/* Shared look for the Soda demo form (FormVariantB, pinned in tools/demo-form/vendor/), used by
   /data-quality-tools and available to /compare. CSS only: the form's routing, email check,
   Turnstile, honeypot and click-id capture are untouched.

   Mount:  <link rel="stylesheet" href="/demo-form/demo-form.css">
           <div id="demo-form"></div>
           <script src="/demo-form/demo-form.js" defer></script>
   Theme:  set the variables on .demo-band (or on #demo-form when used without the band), e.g.
           .demo-band{--band-bg:#F4F4F2;--f-accent:#0D1311;--f-accent-2:#26302b}
   Every rule is keyed on #demo-form and nothing depends on the surrounding layout.
   The form writes inline styles, hence the !important. Its only signal for a blocked email is a
   red border (serialised as "rgb(255, 0, 0)"); the rules below make that loud and add a message. */
/* tokens live on the band when there is one, so a theme set on .demo-band reaches the form and steps */
.demo-band,#demo-form:not(.demo-band #demo-form){--f-ink:#0D1311;--f-ink2:#2A332F;--f-mute:#5E6A64;--f-line:rgba(13,19,17,.12);--f-field:#F3F7F5;--f-field-h:#ECF2EE;
  --f-accent:#1B0B6E;--f-accent-2:#2A1896;--f-radius:12px;--f-err:#B3261E;--f-err-bg:#FBEAE7}
#demo-form{text-align:left}
#demo-form .soda-form-wrapper{background:transparent!important;border-radius:0!important;padding:0!important;overflow:visible!important}
#demo-form .soda-form-container{max-width:none!important;padding:0!important}
#demo-form .soda-form-title{margin:0 0 18px!important;max-width:none!important;text-align:left!important;font:600 22px/1.2 Inter,sans-serif!important;letter-spacing:-.025em!important;color:var(--f-ink)!important}
#demo-form .soda-form > div:nth-of-type(1){margin-bottom:18px!important;display:flex;flex-direction:column-reverse;gap:8px}
#demo-form .soda-form > div:nth-of-type(1) > div:first-child{margin:0!important}
#demo-form .soda-form > div:nth-of-type(1) span{font-size:11.5px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--f-mute)!important}
#demo-form .soda-form > div:nth-of-type(1) > div:last-child{height:3px!important;background:var(--f-line)!important;border-radius:3px!important}
#demo-form .soda-form-step{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:14px}
#demo-form .soda-form-step > div{margin:0!important;min-width:0}
#demo-form .soda-form-step:has(select){grid-template-columns:1fr}
#demo-form .soda-form-step > div:has(>input[type=email]),#demo-form .soda-form-step > div:nth-child(4){grid-column:1/-1}
#demo-form .soda-form-step > div:has(>input[type=checkbox]){grid-column:1/-1;display:flex;align-items:center;gap:10px}
#demo-form label{font-family:Inter,sans-serif!important;font-size:13px!important;font-weight:500!important;color:var(--f-ink2)!important;margin-bottom:6px!important}
#demo-form input[type=text],#demo-form input[type=email],#demo-form select{scroll-margin:110px;height:48px;
  background-color:var(--f-field)!important;border:0!important;border-bottom:1.5px solid rgba(13,19,17,.28)!important;border-radius:10px 10px 2px 2px!important;
  padding:0 14px!important;font-family:Inter,sans-serif!important;font-size:16px!important;color:var(--f-ink)!important;box-shadow:none!important;transition:background-color .2s,border-color .2s,box-shadow .2s!important}
#demo-form input[type=text]:hover,#demo-form input[type=email]:hover,#demo-form select:hover{background-color:var(--f-field-h)!important}
#demo-form input[type=text]:focus,#demo-form input[type=email]:focus,#demo-form select:focus{background-color:#fff!important;border-bottom-color:var(--f-accent)!important;box-shadow:0 2px 0 0 var(--f-accent)!important}
#demo-form select{appearance:none!important;-webkit-appearance:none!important;padding-right:36px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%231B0B6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important}
#demo-form input[style*="rgb(255, 0, 0)"]{background-color:var(--f-err-bg)!important;border-bottom:2px solid var(--f-err)!important;box-shadow:0 2px 0 0 var(--f-err)!important;color:var(--f-err)!important}
#demo-form .soda-form-step > div:has(>input[style*="rgb(255, 0, 0)"])::after{content:"Please use your work email.";display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:var(--f-err)}
#demo-form .soda-form-step > div:has(>input[style*="rgb(255, 0, 0)"]) label{color:var(--f-err)!important}
#demo-form div[style*="color: rgb(255, 0, 0)"]{color:var(--f-err)!important;font-size:12.5px!important}
#demo-form input[type=checkbox]{accent-color:var(--f-accent)!important;width:16px;height:16px;margin:0}
#demo-form .soda-form-step > div:has(>input[type=checkbox]) label{margin:0!important;font-weight:400!important}
/* main button = the page's .btn (purple pill, 52px); Back is a quiet link */
#demo-form form button:not([style*="background: none"]){margin-top:22px!important;width:100%!important;height:52px;padding:0 26px!important;border-radius:var(--f-radius,12px)!important;
  background-color:var(--f-accent)!important;color:#fff!important;font:500 16px/1 Inter,sans-serif!important;letter-spacing:-.01em!important;opacity:1!important;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 10px 24px -12px rgb(27 11 110/.7)!important;transition:transform .15s,background-color .2s!important}
#demo-form form button:not([style*="background: none"]):not([disabled]):hover{background-color:var(--f-accent-2)!important}
#demo-form form button:not([style*="background: none"]):not([disabled]):active{transform:scale(.97)}
#demo-form form button:not([style*="background: none"])[disabled]{background-color:#E9EEEB!important;color:rgba(13,19,17,.42)!important;box-shadow:none!important;cursor:not-allowed!important}
#demo-form button[style*="background: none"]{color:var(--f-ink2)!important;font:500 14px Inter,sans-serif!important;margin-top:16px!important;padding:0!important}
#demo-form button[style*="background: none"]:hover{color:var(--f-accent)!important}
#demo-form [style*="rgb(0, 217, 137)"]{border-color:var(--f-accent)!important}
#demo-form div[style*="background-color: rgb(0, 217, 137)"]{background-color:var(--f-accent)!important}
#demo-form [style*="color: rgb(0, 217, 137)"]:not(button){color:var(--f-accent)!important}
#demo-form:has(iframe){height:min(720px,88vh);border-radius:16px;overflow:hidden;background:#fff}
#demo-form:has(iframe) > div,#demo-form:has(iframe) .soda-calendar-wrapper,#demo-form:has(iframe) .soda-calendar-container{height:100%!important;width:100%!important;max-width:none!important;padding:0!important;box-sizing:border-box}
#demo-form:has(iframe) > div > div{height:100%!important;max-width:none!important}
#demo-form iframe{width:100%!important;height:100%!important;border:0}
@media (max-width:760px){
  #demo-form .soda-form-step{grid-template-columns:1fr}
  #demo-form:has(iframe){height:min(700px,86vh);border-radius:12px}
}

/* ============ the band around the form (optional, reusable) ============
   Markup: section.demo-band > .wrap > .demo-band__grid > (.demo-band__ask, .demo-card > ol.demo-steps + #demo-form)
   Theme per page with variables on .demo-band, e.g. /compare:
     .demo-band{--band-bg:#F4F4F2;--f-accent:#0D1311;--f-accent-2:#26302b}
   Default background = /data-quality-tools' own hero wash, mirrored, melting into its footer. */
.demo-band{--band-bg:linear-gradient(180deg,#FFFFFF 0%,#EDF7F3 38%,#E4F1FB 72%,#F6FAF7 100%);
  --card-bg:#FFFFFF;--card-radius:24px;--card-shadow:0 0 0 1px rgba(13,19,17,.09),0 18px 36px -26px rgba(13,19,17,.28);
  background:var(--band-bg);padding:clamp(64px,7vw,112px) 0 clamp(64px,7vw,104px)}
.demo-band__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(40px,6vw,96px);align-items:start}
.demo-card{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:clamp(24px,2.6vw,36px)}

/* three steps on top of the card, driven by /demo-form/steps.js (reads the form, never writes to it) */
.demo-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.demo-steps li{display:flex;flex-direction:column;gap:10px;font:500 13.5px/1.25 Inter,sans-serif;color:var(--f-mute,#5E6A64)}
.demo-steps li::before{content:"";height:3px;border-radius:3px;background:var(--f-line,rgba(13,19,17,.12));transition:background-color .35s}
.demo-steps b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;font-size:12px;font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--f-line,rgba(13,19,17,.18));color:var(--f-mute,#5E6A64);transition:all .35s}
.demo-steps li.is-on{color:var(--f-ink,#0D1311)}
.demo-steps li.is-on::before,.demo-steps li.is-done::before{background:var(--f-accent,#1B0B6E)}
.demo-steps li.is-on b{background:var(--f-accent,#1B0B6E);color:#fff;box-shadow:none}
.demo-steps li.is-done b{background:transparent;color:var(--f-accent,#1B0B6E);box-shadow:inset 0 0 0 1.5px var(--f-accent,#1B0B6E)}
/* with the steps shown, the form's own title and "1 / 2" bar are redundant */
.demo-card:has(.demo-steps) #demo-form .soda-form-title,
.demo-card:has(.demo-steps) #demo-form .soda-form > div:nth-of-type(1){display:none!important}

/* calendar open: the booking IS the band. The ask steps aside, the card fits one screen
   (Cal.com's own layout is ~520px tall at desktop width), and steps.js brings it under the nav. */
.demo-band:has(#demo-form iframe){padding-top:20px;padding-bottom:32px}
.demo-band:has(#demo-form iframe) .demo-band__grid{grid-template-columns:1fr;gap:0}
.demo-band:has(#demo-form iframe) .demo-band__ask,.demo-band:has(#demo-form iframe) .demo-band__head{display:none}
.demo-card{scroll-margin-top:84px}
.demo-card:has(#demo-form iframe){padding:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px) 8px}
.demo-card:has(#demo-form iframe) .demo-steps{margin-bottom:12px}
/* Cal.com switches to its compact 3-column layout at ~860px wide and needs ~575px of height there (600 leaves room for a six-week month).
   Any wider or taller is empty grey space, so the calendar card is sized to exactly that. */
.demo-card:has(#demo-form iframe){width:100%;max-width:920px;margin:0 auto}
#demo-form:has(iframe){height:clamp(520px,calc(100vh - 170px),600px)!important}


@media (max-width:900px){
  .demo-band__grid{grid-template-columns:1fr;gap:28px}
  .demo-card{padding:22px 18px;--card-radius:20px}
}
@media (max-width:640px){
  .demo-card:has(#demo-form iframe){margin:0 -8px;padding:10px}
  .demo-steps{margin-bottom:20px}
  .demo-steps li{font-size:12.5px}
}