/* ============================================================
   landing-demo.css, the "Get a demo" dialog.

   SMALL ON PURPOSE. The dialog shell, the fields, the error state, the buttons
   and the toast are all existing atoms (see the header of js/landing-demo.js);
   this file only does the two things the shell does not already know:

     1 · the shell is 400px wide and centred-text, which is right for a
         confirmation and wrong for a form. This widens it and sets the text
         back to the reading direction.
     2 · the form's own vertical rhythm.

   Nothing here restyles a product class outside the dialog.
   ============================================================ */

/* 460, between the 400 confirmation shell and the 560 .dialog--wide: three
   stacked fields need more room than a two-line question, and less than a
   settings panel. The viewport clamp is the shell's own. */
.dialog--demo{width:min(460px,calc(100vw - 48px));text-align:start}

/* the shell stacks its children at gap 8, which is the right beat for
   icon/title/message and too tight for a form under them */
.dialog--demo .dialog__m{margin-bottom:4px}

.dm-form{display:flex;flex-direction:column;gap:16px;margin-top:4px}

/* the actions row sits inside the form (so Enter submits from any field) and
   keeps the shell's own spacing above it */
.dm-form .dialog__actions{margin-top:2px}

/* the submit is a .btn--primary, which is 40px in the app; the dialog's own
   .dlg-btn is 38. Matching them stops the two buttons in the row reading as
   two different sizes. */
.dm-form .dm-submit{height:38px;padding:0 18px;font-size:14px}

/* A TEXTAREA IS NOT AN INPUT. .ds-input is a 44px fixed-height flex row built
   for one line; .ds-input--ta already unsets the height for the Save drawer's
   description field, and this only adds what a textarea inside a DIALOG needs:
   its own font (a bare textarea does not inherit one) and a cap so a long
   message scrolls inside the field rather than growing the dialog past the
   fold on a short window. */
.dm-form .ds-input--ta{width:100%;max-height:150px;font-family:var(--font-sans);
  font-size:14px;color:var(--text-primary)}
.dm-form .ds-input--ta::placeholder{color:var(--text-faint)}

/* On a short window the dialog has to be able to scroll rather than run off the
   top and bottom of the screen with its close button unreachable. The scrim is
   a centred grid, so capping the dialog and letting IT scroll keeps the whole
   thing on screen at any height. */
@media (max-height:680px){
  .dialog--demo{max-height:calc(100dvh - 48px);overflow-y:auto}
}