/* ==========================================================================
   CREOSON 4.0 BETA survey - layout additions
   --------------------------------------------------------------------------
   Loads AFTER register.css and reuses its card, field, chip, combobox and
   terminal-state rules wholesale (still named reg-*). Everything here is
   either a new option layout or a control the old wizard did not have.

   Prefixes: reg-* where a rule extends the inherited wizard vocabulary,
   svy-* where it is new to the survey.
   ========================================================================== */

/* ---------- Mounting over the hero --------------------------------------
   .hero paints a radial glow (::before) and a grid overlay (::after) across
   its whole box, and .hero__inner lifts itself to z-index 1 to sit above
   them. The survey card replaces .hero__inner in that stacking context, so
   it needs the same promotion or the overlays wash over the form. */
#beta-survey {
    position: relative;
    z-index: 1;
}

/* ---------- Option layouts -----------------------------------------------
   Three layouts, chosen per question in survey-data.js. */

/* pair: side by side while the labels fit on one line, stacked when they do
   not. flex-wrap does the wrapping; min-width: max-content is what makes the
   decision content-driven rather than breakpoint-driven - a chip refuses to
   shrink below the width its own label needs, so two that cannot both fit
   wrap onto separate rows instead of squeezing their text onto two lines.
   flex: 1 1 0 then stretches whatever ends up on a row to fill it, so a
   wrapped option reads as a full-width row and a Yes/No pair splits 50/50. */
.reg-opts--pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.reg-opts--pair > .reg-opt {
    flex: 1 1 0;
    min-width: max-content;
}

/* grid2: fixed two columns for the long lists (15 ways to automate Creo, 8
   languages, 8 products). Letting those flow freely gives ragged rows of
   wildly different widths, which reads as messier than a tidy block. */
.reg-opts--grid2 {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .reg-opts--grid2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* rows: always full width. For sentence-length options, where two across
   would be unreadable even on a wide screen. */
.reg-opts--rows {
    display: grid;
    gap: 0.75rem;
}

/* An option that stands apart from the list it sits in - currently the
   exclusive "NONE OF THESE". Spanning the grid keeps it from occupying a
   column slot, which would otherwise shunt a paired layout (every FREE
   edition on the left, its PAID twin on the right) out of alignment. */
.reg-opts--grid2 .reg-opt--wide {
    grid-column: 1 / -1;
}

/* Chips are <label>s wrapping a radio or checkbox, so the keyboard focus ring
   lands on the hidden-ish control rather than the visible chip. Hoist it. */
.reg-opt:has(:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---------- "Other" / "Comment" block -----------------------------------
   Always its own full-width row below the options, whatever the layout, so
   the revealed text field has somewhere to go. */
.svy-other {
    margin-top: 0.75rem;
}

.reg-opt--other {
    width: 100%;
}

/* ---------- Free-text question ------------------------------------------ */
.svy-textarea {
    min-height: 9rem;
}

.svy-count {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--text-faint);
    text-align: right;
}

/* ---------- Skip survey -------------------------------------------------
   Deliberately quiet: a borderless muted link, not a button. It shares the
   footer's left slot with Back and sits on the same line as Next, so it is
   findable without competing with the primary action - a download that looks
   gated annoys people far more than the survey earns. */
.svy-skip {
    /* Pulls the padded hit area back so the text starts flush with the slot
       edge, where the Back button's box begins on later screens. */
    margin-inline-start: -0.5rem;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-faint);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--speed) var(--ease);
}

.svy-skip:hover {
    color: var(--text-muted);
    text-decoration: underline;
}

/* ---------- Footer nav --------------------------------------------------
   .reg-nav is a 3-up row (Back / error / Next). Back is wrapped so the
   .reg-invisible toggle cannot collapse the row's spacing. */
.svy-nav__left {
    flex: none;
}

/* ---------- Thank-you panel ---------------------------------------------
   The whole panel is centred. .reg-icon centres itself as a block with an
   auto inline margin, which stacked the tick above the message, so that is
   undone and the tick becomes a flex item on the message's own line - with
   the pair then centred as a single group.

   Equal specificity to the register.css rules this overrides (.reg-state p is
   also one class plus one type), so it depends on survey.css loading after
   register.css, which index.html does. */
.svy-done__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.svy-done__head .reg-icon {
    flex: none;
    margin: 0;
}

.svy-done__head p {
    margin: 0;
    /* Keeping .reg-state p's 26rem cap matters more here than it looks: as a
       flex item the message would otherwise size to its content, and the
       longest of the three messages runs about 700px on one line. That pushes
       the tick out to the card's left edge and the "centred group" stops
       reading as one. Capped, it wraps to two lines and the pair stays a
       compact unit in the middle. */
    max-width: 26rem;
}

/* ---------- Nitro promos on the thank-you panel -------------------------
   Three compact cards between the thank-you message and the action buttons.
   Separated by a rule so the promo reads as an aside rather than as part of
   the confirmation. */
/* Ruled top and bottom, so the promo reads as a bounded aside between the
   confirmation message above it and the action buttons below, rather than
   bleeding into either. */
.svy-promos {
    margin-top: 2rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Sized to carry the block as a heading rather than a caption, but kept just
   under .reg-head__title's 1.5rem ceiling so it cannot compete with the
   panel's own "Thank you!" headline.

   Two classes, not one, on purpose: register.css has `.reg-state p` at
   specificity (0,1,1) setting font-size 0.9375rem and the muted colour, which
   beats a lone `.svy-promos__lead` at (0,1,0). A single-class selector here
   silently kept the caption size - the display font and weight applied,
   because those properties are uncontested, which made it look like the rule
   had taken effect when it had not. */
.svy-promos .svy-promos__lead {
    margin: 0 0 1.25rem;
    max-width: none;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2vw, 1.3125rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

/* auto-fit rather than three fixed columns, so the row collapses to two and
   then one on narrow screens without needing breakpoints. */
.svy-promos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.svy-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.1rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.svy-promo__logo-link {
    display: inline-flex;
    justify-content: center;
    flex: none;
}

/* 34px matches .promo-card__logo in the #apps section, so the lockups read at
   the same optical size in both places. The artwork carries roughly 20% empty
   space below it, which is why the box is taller than the visible wordmark.

   The widest lockup (Nitro-PROGRAM, 2002x430) comes to ~158px at this height,
   inside a ~248px card at three across, so max-width never engages in
   practice - it is there as a guard, with object-fit to keep the aspect ratio
   if it ever does. */
.svy-promo__logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Same equal-specificity override as .svy-done__head p: .reg-state p caps
   prose at 26rem and centres it, which is right for the panel message but
   fights a card that should fill its own column. */
.svy-promo p {
    margin: 0;
    max-width: none;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Grid items stretch to a common height, so pushing the button down with an
   auto margin keeps all three Learn More buttons on the same line even though
   the descriptions are different lengths. */
.svy-promo .btn {
    margin-top: auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.8125rem;
}

/* Centred under the heading, matching it. Download is first and primary,
   because it is what the visitor came for. */
.svy-done__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* The SendGrid signup form is a fixed-size embed we do not control, and being
   cross-origin it cannot report its own height, so the frame has to be sized
   to fit it rather than the other way round.

   Width: the form config sets a 500px box with 20px padding each side and a
   1px border, in a document with the default 8px body margin - so it needs
   500 + 40 + 2 + 16 = 558px before it stops scrolling sideways. 35rem (560px)
   clears it.

   Height, measured from the embed's own stylesheet rather than guessed:
     h1 title          34px + 20px margin   =  54
     description       2 lines at 460px     =  60
     3 x label+input   (20+20+5) + 38 each  = 249
     submit button     20px + 24px padding  =  44  (+20px container margin)
     reCAPTCHA notice                       =  40
     form padding / border / margin         =  62
     body margin                            =  16
                                              ---
                                              545px

   Two earlier passes sized it to roughly that figure and still scrolled,
   because anything that nudges the real total - the description wrapping to a
   third line, a font fallback with different metrics, a visible reCAPTCHA
   widget instead of a badge - puts it over. So this is deliberately generous
   at 44rem (704px).

   Over-sizing is free here: the iframe background and the card behind it are
   both white, and the frame has no border, so unused height is invisible
   rather than showing as an empty box. Under-sizing is what costs a
   scrollbar. */
.svy-newsletter-wrap {
    margin-top: 1.5rem;
    /* Below ~560px there is no way to reflow a fixed-width third-party form,
       so contain the overflow here instead of letting it widen the card. */
    overflow-x: auto;
}

.svy-newsletter-wrap iframe {
    display: block;
    width: 100%;
    min-width: 35rem;
    max-width: 36rem;
    height: 44rem;
    margin-inline: auto;
    border: 0;
    background: var(--bg);
}

/* Back out of the thank-you screen. Inherits .reg-state's centring so it
   lines up with the action buttons above it. */
.svy-done__back {
    margin-top: 1.75rem;
}