/* "Resources" download form (views/lead-capture.ejs, #my_modal), Nov 2 2026.
   Opens from the Library for the Results Book, PDFs and gated videos. Same look as the shared request modal
   (req-modal.css) and the "try it free" lead form: white card, 24px corners, Cabinet Grotesk + Manrope, small
   uppercase labels, gold pill button with ink text, brand colours only. Phones (under 600px): a bottom sheet.
   Still the Bootstrap 4 modal underneath, so the existing submit handler in customJs/resources.js is untouched.
   Everything is scoped to #my_modal. The legacy rules it must beat (style.css .form-control, .modal-*message,
   inline border colours set by the old script) are overridden with !important on purpose. */

#my_modal {
  --rm-gold: #FFC61E; --rm-gold3: #FFE8A5; --rm-violet: #341D99; --rm-ink: #110A33; --rm-lav: #DDD6FF;
  --rm-mist: #F6F4FF; --rm-slate: #5B6478;
  --rm-disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; --rm-body: Manrope, Arial, sans-serif;
  --rm-out: cubic-bezier(.23, 1, .32, 1); --rm-sheet: cubic-bezier(.32, .72, 0, 1);
  --rm-pad: 28px;
  font-family: var(--rm-body); -webkit-font-smoothing: antialiased; text-align: start;
  z-index: 2147483000 !important; /* above the nav, the Ask AI pill, the chat bubble and the cookie banner, like the shared request modal (top layer) */
}
#my_modal *, #my_modal *::before, #my_modal *::after { box-sizing: border-box; }

/* dim + blur the page like the other forms (falls back to the plain Bootstrap backdrop without :has) */
body:has(#my_modal.show) .modal-backdrop { z-index: 2147482999; background: #110A33; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body:has(#my_modal.show) .modal-backdrop.show { opacity: .5; }

/* centred card; the dialog itself is the flex box so the card is always centred or at the bottom */
#my_modal .modal-dialog { width: auto; max-width: 520px; margin: 16px auto; padding: 0 16px; min-height: calc(100% - 32px); pointer-events: none; }
#my_modal .modal-dialog::before { display: none; }
#my_modal .modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(calc(100vh - 32px), 780px); max-height: min(calc(100dvh - 32px), 780px);
  border: 0; border-radius: 24px; overflow: hidden; background: #fff; color: var(--rm-ink); pointer-events: auto;
  box-shadow: 0 32px 64px -24px rgba(17, 10, 51, .35), 0 2px 8px rgba(17, 10, 51, .08);
}

/* head: the title and the close button stay put while the body scrolls */
#my_modal .modal-header { position: relative; z-index: 1; display: block; flex: none; padding: var(--rm-pad) calc(var(--rm-pad) + 44px) 12px var(--rm-pad); border: 0; border-radius: 0; background: transparent; transition: box-shadow .15s; }
#my_modal.is-scrolled .modal-header { box-shadow: 0 1px 0 var(--rm-lav), 0 8px 16px -12px rgba(17, 10, 51, .18); }
#my_modal .modal-title { margin: 0; padding: 0; font: 700 24px/1.15 var(--rm-disp); letter-spacing: -.02em; color: var(--rm-ink); text-transform: none; outline: none; }
#my_modal .modal-header .close {
  position: absolute; top: 16px; right: 16px; float: none; width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: transparent; color: var(--rm-slate); opacity: 1; text-shadow: none; cursor: pointer;
  transition: background-color .15s, color .15s, transform .16s var(--rm-out);
}
#my_modal .modal-header .close:hover { background: var(--rm-mist); color: var(--rm-ink); }
#my_modal .modal-header .close:active { transform: scale(.96); }

#my_modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--rm-pad) var(--rm-pad); scrollbar-width: thin; }

/* what you are getting: thumbnail + name, then the short description */
#my_modal .res-m__resource { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "thumb name" "desc desc"; gap: 12px 16px; align-items: center; padding: 0 0 20px; border-bottom: 1px solid var(--rm-lav); }
#my_modal .res-m__thumb { grid-area: thumb; display: block; width: 96px; height: 54px; max-width: none; margin: 0; object-fit: cover; border-radius: 10px; border: 1px solid var(--rm-lav); background: var(--rm-mist); }
#my_modal .res-m__thumb:not([src]), #my_modal .res-m__thumb[src=""] { display: none !important; }
#my_modal .res-m__name { grid-area: name; min-width: 0; margin: 0; padding: 0; font: 700 17px/1.3 var(--rm-disp); letter-spacing: -.01em; color: var(--rm-ink); text-align: start; text-wrap: balance; overflow-wrap: anywhere; }
#my_modal .res-m__desc { grid-area: desc; margin: 0 !important; font-size: 14px !important; line-height: 1.5; color: var(--rm-slate); text-wrap: pretty; }
#my_modal .res-m__desc:empty, #my_modal .res-m__name:empty { display: none; }
#my_modal .res-m__resource:not(:has(.res-m__name:not(:empty))) .res-m__thumb { grid-column: 1 / -1; }
#my_modal .res-m__resource:not(:has(*:not(:empty))) { display: none; }

#my_modal .res-m__form { margin: 0; padding: 20px 0 0; }
#my_modal .res-m__formh { margin: 0 0 16px; padding: 0; font: 700 18px/1.25 var(--rm-disp); letter-spacing: -.01em; color: var(--rm-ink); text-align: start; text-transform: none; }

#my_modal .res-m__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 480px) { #my_modal .res-m__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#my_modal .res-m__field { min-width: 0; }
#my_modal .res-m__label { display: block; margin: 0 0 6px; padding: 0; font: 700 12px/1.3 var(--rm-body); letter-spacing: .09em; text-transform: uppercase; color: var(--rm-slate); }

/* inputs: !important beats legacy .form-control and the red / green / yellow inline border colours the old script sets */
#my_modal .res-m__input.form-control {
  display: block; width: 100%; height: auto !important; min-height: 48px; margin: 0; padding: 0 14px !important;
  border: 1.5px solid rgba(91, 100, 120, .72) !important; border-radius: 12px !important; background: var(--rm-mist) !important; box-shadow: none !important;
  font: 500 16px/1.3 var(--rm-body); letter-spacing: 0; color: var(--rm-ink); text-transform: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
#my_modal .res-m__input.form-control::placeholder { color: var(--rm-slate); opacity: 1; }
#my_modal .res-m__input.form-control:hover { border-color: var(--rm-slate) !important; }
#my_modal .res-m__input.form-control:focus, #my_modal .res-m__input.form-control:focus-visible { outline: none; border-color: var(--rm-ink) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(52, 29, 153, .22) !important; }
#my_modal .res-m__input.form-control[aria-invalid="true"] { border-color: var(--rm-violet) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(52, 29, 153, .12) !important; }

/* field errors: shown by resources-modal.js (.is-on) or by the old script's inline visibility; violet text with a mark, never colour alone */
#my_modal .res-m__err { display: none; gap: 6px; align-items: flex-start; margin: 6px 0 0; font: 700 13px/1.4 var(--rm-body); color: var(--rm-violet); visibility: visible; }
#my_modal .res-m__err.is-on, #my_modal .res-m__err[style*="visibility: visible"] { display: flex; }
#my_modal .res-m__err::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 999px; background: var(--rm-violet); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }

/* consent: a small readable row, no grey box */
#my_modal .res-m__consent { margin: 20px 0 0; padding: 0 !important; background: transparent !important; border: 0; border-radius: 0; }
#my_modal .res-m__consent-h { margin: 0 0 6px; font: 700 14px/1.3 var(--rm-disp); color: var(--rm-ink); }
#my_modal .res-m__privacy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rm-slate); text-align: start !important; text-wrap: pretty; }
#my_modal .res-m__privacy a { color: var(--rm-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#my_modal .res-m__optin { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 8px 0; font-size: 13px; line-height: 1.45; color: var(--rm-slate); cursor: pointer; }
#my_modal .res-m__optin input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; position: static;
  border: 1.5px solid var(--rm-ink); border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .15s;
}
#my_modal .res-m__optin input:checked {
  background-color: var(--rm-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#my_modal .res-m__optin input:focus-visible { outline: 2px solid var(--rm-violet); outline-offset: 2px; }

/* server messages from the old handler ("Something went wrong", "Please Provide Your Details") */
#my_modal .res-m__status { margin: 12px 0 0; padding: 0; background: transparent !important; font: 700 13px/1.4 var(--rm-body) !important; color: var(--rm-violet) !important; text-align: start; }

/* the pill. !important beats the white / blue background the old script writes inline while sending and after. */
#my_modal .res-m__submit, #my_modal .res-m__done {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 20px 0 0; padding: 12px 24px;
  border: 0 !important; border-radius: 999px !important; background: var(--rm-gold) !important; color: var(--rm-ink) !important; box-shadow: none;
  font: 700 16px/1 var(--rm-disp) !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
  transition: background-color .15s, transform .16s var(--rm-out);
}
#my_modal .res-m__submit:hover { background: var(--rm-gold3) !important; }
#my_modal .res-m__submit:active, #my_modal .res-m__done:active { transform: scale(.97); }
#my_modal .res-m__submit:disabled { pointer-events: none; background: var(--rm-gold3) !important; }
#my_modal .res-m__submit:disabled::after { content: ""; width: 16px; height: 16px; border: 2px solid var(--rm-ink); border-right-color: transparent; border-radius: 50%; animation: rm-spin .7s linear infinite; }
#my_modal .modal-header .close:focus-visible, #my_modal .res-m__submit:focus-visible, #my_modal .res-m__done:focus-visible, #my_modal .res-m__privacy a:focus-visible { outline: 2px solid var(--rm-violet); outline-offset: 3px; }

/* thank-you state (resources-modal.js adds .is-sent when the old handler shows its success message) */
#my_modal .res-m__thanks, #my_modal .res-m__done { display: none; }
#my_modal.is-sent .res-m__resource, #my_modal.is-sent .res-m__formh, #my_modal.is-sent .res-m__grid, #my_modal.is-sent .res-m__consent,
#my_modal.is-sent .res-m__status, #my_modal.is-sent .res-m__submit, #my_modal.is-sent .error-messages { display: none !important; }
#my_modal.is-sent .modal-body { visibility: visible !important; }
#my_modal.is-sent .res-m__form { padding-top: 8px; }
#my_modal.is-sent .res-m__thanks { display: grid; justify-items: center; gap: 12px; text-align: center; }
#my_modal.is-sent .res-m__tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--rm-gold); color: var(--rm-ink); }
#my_modal .res-m__thanks p.success_message { position: static !important; top: auto; left: auto; margin: 0; padding: 0 !important; max-width: 36ch; font: 500 16px/1.5 var(--rm-body) !important; color: var(--rm-ink) !important; text-align: center; visibility: visible !important; text-wrap: pretty; }
#my_modal.is-sent .res-m__done { display: flex; width: auto; min-width: 160px; margin: 20px auto 0; background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--rm-ink); }
#my_modal.is-sent .res-m__done:hover { background: var(--rm-ink) !important; color: #fff !important; }
#my_modal.is-sent .modal-title { font-size: 20px; }

/* phones: a bottom sheet, thumb reach for the button, safe area respected */
@media (max-width: 599px) {
  #my_modal { --rm-pad: 20px; }
  #my_modal .modal-dialog { max-width: none; margin: 0; padding: 0; min-height: 100%; align-items: flex-end; }
  #my_modal .modal-content { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 24px 24px 0 0; }
  #my_modal .modal-header { padding-top: 28px; }
  #my_modal .modal-header::before { content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--rm-lav); }
  #my_modal .modal-header .close { top: 12px; right: 8px; }
  #my_modal .modal-title { font-size: 22px; }
  #my_modal .modal-body { padding-bottom: calc(var(--rm-pad) + env(safe-area-inset-bottom, 0px)); }
  #my_modal .res-m__thumb { width: 80px; height: 45px; }
}

/* motion: fast in, faster out. The sheet slides up on phones. Reduced motion: fade only. */
@media (prefers-reduced-motion: no-preference) {
  #my_modal.fade .modal-dialog { transform: translateY(8px) scale(.97); transition: transform .22s var(--rm-out); }
  #my_modal.show .modal-dialog { transform: none; }
  @media (max-width: 599px) {
    #my_modal.fade .modal-dialog { transform: translateY(100%); transition: transform .3s var(--rm-sheet); }
    #my_modal.show .modal-dialog { transform: none; }
  }
  #my_modal.is-sent .res-m__tick { animation: rm-pop .32s var(--rm-out); }
  #my_modal.is-sent .res-m__tick path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rm-draw .3s .12s var(--rm-out) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  #my_modal.fade .modal-dialog { transform: none; transition: none; }
  #my_modal .res-m__submit, #my_modal .res-m__done, #my_modal .res-m__input.form-control, #my_modal .modal-header .close { transition: none; }
  #my_modal .res-m__submit:disabled::after { animation-duration: 1.6s; }
}
@keyframes rm-spin { to { transform: rotate(360deg); } }
@keyframes rm-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rm-draw { to { stroke-dashoffset: 0; } }

@media (forced-colors: active) {
  #my_modal .modal-content { border: 2px solid CanvasText; }
  #my_modal .res-m__input.form-control:focus, #my_modal .res-m__input.form-control:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
  #my_modal .res-m__optin input:checked { background-color: Highlight; }
}