/* Agent survey (/agent-survey) - 2026-10-20 redesign, Anthony: "i like it".
   Loaded only by tmpl/agentsurvey/default.php and thankyou.php.
   House rules (DESIGN-DIRECTION.md): no card shadows (hairline instead; the only
   shadow is the input focus ring), radius 12 cards / 8 controls, weights 400/500
   (600 on the display heading only), ONE gold element per viewport = the send
   button. Helix overrides need #sp-main-body specificity. */

/* Helix gives #sp-main-body 100px top and bottom padding over navy. On this
   full-bleed page that is an empty navy slab above the hero and above the footer.
   :has() keeps the fix to this view. */
#sp-main-body:has(.dv-sv) { padding-top: 0; padding-bottom: 0; }

.dv-sv { --sv-navy: var(--dv-navy, #1F3A5F); --sv-blue: var(--dv-blue, #2F6FCC); --sv-tint: var(--dv-blue-tint, #E6F1FB);
         --sv-ink: var(--dv-ink, #1B1B1A); --sv-ink2: var(--dv-ink-2, #5F5E5A); --sv-ink3: var(--dv-ink-3, #888780);
         --sv-line: var(--dv-hairline, rgba(0,0,0,.10)); --sv-line2: var(--dv-hairline-strong, rgba(0,0,0,.18));
         --sv-gold: var(--dv-gold, #F5B041); --sv-gold-ink: var(--dv-gold-ink, #412402);
         --sv-bg: var(--dv-surface-1, #F7F6F3); }

/* ---- Hero ---- */
/* Full-bleed out of Helix's .container, the same technique as .dv-pg-band */
.dv-sv-hero, .dv-sv-body { margin-inline: calc(50% - 50vw); padding-inline: max(16px, calc(50vw - 50%)); }
.dv-sv-hero { background: radial-gradient(1100px 380px at 50% -10%, #2b4f7d 0%, var(--sv-navy) 60%); color: #fff;
              text-align: center; padding-top: 3.5rem; padding-bottom: 8.5rem; }
#sp-main-body .dv-sv-eyebrow { display: inline-block; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .06em;
              text-transform: uppercase; color: var(--dv-on-navy-mute, #B5D4F4); border: 1px solid rgba(255,255,255,.18);
              border-radius: 999px; padding: 6px 12px; }
#sp-main-body .dv-sv-hero h1 { margin: 1.1rem auto .9rem; max-width: 20ch; color: #fff; font-size: clamp(30px, 5vw, 46px);
              font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
#sp-main-body .dv-sv-lede { margin: 0 auto; max-width: 52ch; text-align: center; color: var(--dv-on-navy-mute, #B5D4F4); font-size: 18px; line-height: 1.55; }

/* ---- Card (overlaps the hero so the answer box is above the fold) ---- */
/* flow-root stops the card's negative margin collapsing through this band,
   which would drag the whole band up instead of overlapping the card */
.dv-sv-body { display: flow-root; background: var(--sv-bg); padding-bottom: 4rem; }
.dv-sv-card { position: relative; max-width: 760px; margin: -6rem auto 0; background: #fff; border: 1px solid var(--sv-line);
              border-radius: 12px; padding: 28px; color: var(--sv-ink); }
@media (max-width: 600px) { .dv-sv-card { padding: 20px 16px; } }

#sp-main-body .dv-sv-label { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--sv-navy); }
.dv-sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
#sp-main-body .dv-sv-chip { border: 1px solid #cfdff3; background: var(--sv-tint); color: var(--sv-navy); border-radius: 8px;
              padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; cursor: pointer;
              transition: background .15s, border-color .15s; }
#sp-main-body .dv-sv-chip:hover { background: #d9e8f8; border-color: #b4cdeb; }
#sp-main-body .dv-sv-chip.is-used { background: #fff; color: var(--sv-ink3); border-style: dashed; }
.dv-sv-chip span { color: var(--sv-blue); margin-right: 4px; }

#sp-main-body .dv-sv-answer { display: block; width: 100%; min-height: 190px; resize: vertical; margin: 0; padding: 16px;
              border: 1.5px solid var(--sv-line2); border-radius: 8px; background: #fcfcfb; color: var(--sv-ink);
              font: inherit; font-size: 17px; line-height: 1.55; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
#sp-main-body .dv-sv-answer:focus { outline: none; border-color: var(--sv-blue); background: #fff; box-shadow: 0 0 0 4px rgba(47,111,204,.15); }
.dv-sv-meta { display: flex; justify-content: space-between; gap: 12px; margin: 6px 2px 18px; font-size: 13px; color: var(--sv-ink3); }

/* Optional details: <details> so it works without JS and reopens after a failed submit */
#sp-main-body .dv-sv-reply { margin: 0; padding: 0; border: 0; background: none; }
#sp-main-body .dv-sv-reply > summary { display: inline-block; list-style: none; cursor: pointer; margin: 0; padding: 0;
              font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--sv-blue); background: none; border: 0; }
#sp-main-body .dv-sv-reply > summary::-webkit-details-marker { display: none; }
#sp-main-body .dv-sv-reply > summary::after { content: none; }
#sp-main-body .dv-sv-reply > summary::before { content: '+'; display: inline-block; width: 18px; }
#sp-main-body .dv-sv-reply[open] > summary::before { content: '-'; }
#sp-main-body .dv-sv-reply-note { max-width: none; margin: 10px 0; font-size: 14px; color: var(--sv-ink2); }
.dv-sv-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .dv-sv-fields { grid-template-columns: 1fr; } }
#sp-main-body .dv-sv-fields input { width: 100%; margin: 0; padding: 11px 12px; border: 1.5px solid var(--sv-line2); border-radius: 8px;
              font: inherit; font-size: 15px; color: var(--sv-ink); background: #fff; box-shadow: none; }
#sp-main-body .dv-sv-fields input:focus { outline: none; border-color: var(--sv-blue); box-shadow: 0 0 0 4px rgba(47,111,204,.15); }
.dv-sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The one gold element */
#sp-main-body .dv-sv-send { display: block; width: 100%; margin: 22px 0 0; padding: 15px; border: 0; border-radius: 8px;
              background: var(--sv-gold); color: var(--sv-gold-ink); font: inherit; font-size: 17px; font-weight: 500;
              cursor: pointer; transition: filter .15s; }
#sp-main-body .dv-sv-send:hover { filter: brightness(.96); }
#sp-main-body .dv-sv-send:focus-visible { outline: 3px solid var(--sv-blue); outline-offset: 2px; }

.dv-sv-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--sv-line); }
@media (max-width: 600px) { .dv-sv-trust { grid-template-columns: 1fr; } }
.dv-sv-trust-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--sv-ink2); }
.dv-sv-trust-item svg { flex: 0 0 22px; margin-top: 1px; }
.dv-sv-trust-item strong { display: block; color: var(--sv-navy); font-weight: 500; }
#sp-main-body .dv-sv-fine { max-width: none; margin: 18px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--sv-ink3); }
#sp-main-body .dv-sv-fine a { color: var(--sv-blue); }

/* ---- Thank-you ---- */
.dv-sv-card--done { text-align: center; padding: 36px 28px; }
#sp-main-body .dv-sv-card--done p { margin: 0 auto 20px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--sv-ink2); }
#sp-main-body .dv-sv-card--done .dv-sv-send { display: inline-block; width: auto; margin: 0; padding: 13px 28px; text-decoration: none; }