/* The one enquiry pop-up, on every page. */
.pdm { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.pdm[hidden] { display: none; }
.pdm__overlay { position: absolute; inset: 0; background: rgba(47,27,17,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pdm__dialog {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  width: 100%; max-width: 900px; max-height: calc(100vh - 2.4rem); max-height: calc(100dvh - 2.4rem); overflow: hidden;
  background: var(--white); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(47,27,17,.6);
  animation: pdm-in .22s ease;
}
@keyframes pdm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pdm__dialog { animation: none; } }
.pdm__dialog :focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.pdm__side { display: flex; flex-direction: column; padding: clamp(2rem, 3.4vw, 2.8rem); background: var(--burgundy); color: var(--cream); }
.pdm__logo { display: block; height: 46px; width: auto; align-self: flex-start; margin-bottom: clamp(1.8rem, 5vh, 3rem); }
.pdm__title { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 3.1vw, 2.6rem); line-height: 1.06; letter-spacing: -.012em; color: var(--cream); text-wrap: balance; }
.pdm__sub { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; color: rgba(247,239,221,.9); }
.pdm__note { margin: auto 0 0; padding-top: 2rem; font-size: .84rem; line-height: 1.5; color: rgba(247,239,221,.78); }
/* Conference QR: scan to fill the form in on a phone. Laptops and tablets only. */
.pdm__qr { display: flex; align-items: center; gap: .6rem; margin: auto 0 0 -10px; padding-top: 2rem; }
.pdm__qr + .pdm__note { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(247,239,221,.22); }
/* Cream code straight on the burgundy, 2.5px per square so it stays sharp; the burgundy around it is its quiet zone. */
.pdm__qr-code { flex: none; display: block; padding: 10px; line-height: 0; }
.pdm__qr-code img { display: block; width: 82.5px; height: 82.5px; image-rendering: pixelated; }
.pdm__qr p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--cream); max-width: 13rem; }

/* the form scrolls inside the pop-up, so its last line keeps the same space as the top */
.pdm__inner { min-height: 0; max-height: calc(100vh - 2.4rem); max-height: calc(100dvh - 2.4rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.8rem, 3vw, 2.5rem); }
.pdm__x { position: absolute; top: .75rem; right: .75rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--cream); color: var(--walnut); font-size: 1.45rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.pdm__x:hover { background: var(--walnut); color: var(--cream); }
.pdm__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.pdm__form { display: block; margin: 0; }
.pdm .field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.pdm .field[hidden] { display: none; }
.pdm .field--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
.pdm .field label { font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--cocoa); }
.pdm .field label .opt { font-weight: 400; letter-spacing: 0; }
.pdm .field label[data-opt]::after { content: " (optional)"; font-weight: 400; letter-spacing: 0; }
.pdm .field input, .pdm .field textarea, .pdm .field select { width: 100%; padding: .72rem .9rem; border: 1px solid var(--line); border-radius: 10px; background-color: var(--cream); font-family: var(--sans); font-size: 1rem; color: var(--walnut); transition: border-color .2s, background-color .2s; }
.pdm .field input::placeholder, .pdm .field textarea::placeholder { color: var(--camel); }
.pdm .field input:focus, .pdm .field textarea:focus, .pdm .field select:focus { outline: none; border-color: var(--burgundy); background-color: var(--white); }
.pdm .field textarea { display: block; min-height: 84px; resize: vertical; }
.pdm .field select { padding-right: 2.4rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23735746' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 15px; }
.pdm .field select:invalid { color: var(--camel); }
/* an empty dropdown reads like the other empty fields */
.pdm .field select:has(option[value=""]:checked) { color: var(--camel); }
.pdm .field select option { color: var(--walnut); }
.pdm__err { display: block; font-size: .78rem; color: var(--burgundy); }
.pdm__err:empty { display: none; }
.pdm .field input.is-invalid, .pdm .field select.is-invalid { border-color: var(--burgundy); background-color: var(--white); }
.pdm__formerr { margin: .2rem 0 .7rem; font-size: .86rem; color: var(--burgundy); text-align: center; }
.pdm__submit { width: 100%; margin-top: .3rem; }
.pdm__privacy { margin: .8rem 0 0; font-size: .78rem; color: var(--cocoa); text-align: center; }
.pdm__privacy a { color: var(--cocoa); text-decoration: underline; text-underline-offset: 2px; }
.pdm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pdm__success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 2rem 0; text-align: center; }
.pdm__success[hidden] { display: none; }
.pdm__check { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1.1rem; border-radius: 50%; background: var(--cream); color: var(--burgundy); font-size: 1.4rem; }
.pdm__done { margin: 0; max-width: 34ch; font-size: 1.04rem; line-height: 1.6; color: var(--walnut); }
.pdm__success .btn { margin-top: 1.5rem; }

/* spore's own form, shown in the same design. Its utility classes only apply inside the
   spore page, so the layout is stated here. */

/* Phones: a sheet that rises from the bottom, with a short heading */
@media (max-width: 720px) {
  .pdm { align-items: flex-end; padding: 0; }
  .pdm__dialog { display: flex; flex-direction: column; max-width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .pdm__side { flex: none; padding: 1.4rem 4rem 1.3rem 1.25rem; }
  .pdm__logo, .pdm__sub, .pdm__note, .pdm__qr { display: none; }
  .pdm__title { font-size: 1.55rem; line-height: 1.1; }
  /* level with the first line of the heading, with the same margin as the heading has on the left */
  .pdm__x { top: 1rem; right: 1rem; }
  .pdm__inner { flex: 1; padding: 1.25rem 1.25rem max(1.4rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .pdm .field--row { grid-template-columns: minmax(0, 1fr); } .pdm .field--row { gap: 0; } }
.pdm__about { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.pdm__about legend { padding: 0; margin-bottom: .5rem; font-size: .86rem; font-weight: 500; color: var(--walnut); }
.pdm__about legend .opt { font-weight: 400; color: var(--cocoa); }
.pdm__opts { display: grid; }
.pdm__opt { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 40px; font-size: .95rem; color: var(--walnut); cursor: pointer; }
.pdm__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pdm__box { flex: none; position: relative; width: 20px; height: 20px; border: 1.5px solid var(--cocoa); border-radius: 5px; background: var(--white); transition: background .15s, border-color .15s; }
.pdm__opt:hover .pdm__box { border-color: var(--burgundy); }
.pdm__opt input:checked + .pdm__box { background: var(--burgundy); border-color: var(--burgundy); }
.pdm__opt input:checked + .pdm__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pdm__opt input:focus-visible + .pdm__box { outline: 2px solid var(--burgundy); outline-offset: 2px; }