/* The signed-out shell: sign in, and start a free demo.
 *
 * Lifted out of templates/portal/login.html so the two pages cannot drift.
 * They were one design living in one template; the moment a second page wanted
 * the same look, copying the block would have guaranteed that a change to one
 * silently stopped matching the other.
 *
 * Scoped to .wm-* on purpose. The shared .ep-login-* classes used by the
 * password-reset flow are untouched, so those stay on the simple centred-card
 * layout.
 */

/* Restored after being lost in that extraction, and the reason it matters:
   .wm-submit has no border and .wm-provider has a 1.5px one, so without a
   border-box model the same `width: 100%` produces two different rendered
   widths and the Google button does not line up with the one above it.
   Scoped to the shell rather than a bare `*`, because this stylesheet is
   loaded beside portal.css and a global reset here would reach pages that
   never asked for one. */
.wm-page, .wm-page * { box-sizing: border-box; }

.wm-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #F1F5F9 0%, #E6F9F3 100%);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.wm-card {
  display: flex;
  width: 100%;
  max-width: 900px;
  min-height: 520px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(36, 124, 96, .25), 0 0 0 1px rgba(60, 208, 161, .06);
}

/* ---------- Left: form panel ---------- */
.wm-form-panel {
  flex: 1 1 52%;
  min-width: 300px;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
}
.wm-brand { display: flex; align-items: center; gap: 8px; }
.wm-brand img.symbol { height: 26px; width: 26px; }
.wm-brand img.wordmark { height: 18px; }

.wm-avatar-wrap { display: flex; justify-content: center; margin: 22px 0 6px; }
.wm-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: #F1F5F9; display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.wm-avatar svg { width: 34px; height: 34px; color: #247C60; }

.wm-title { text-align: center; font-size: 22px; font-weight: 800; color: #1e293b; margin-top: 6px; }
.wm-sub   { text-align: center; font-size: 13px; color: #94A3B8; margin-top: 4px; margin-bottom: 24px; }

.wm-error {
  background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600;
  margin-bottom: 16px; text-align: center;
}

.wm-field { position: relative; margin-bottom: 16px; }
.wm-field-icon {
  position: absolute; left: 6px; top: 6px; bottom: 6px; width: 34px;
  border-radius: 999px; background: linear-gradient(135deg, #7EE8C4, #3CD0A1);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.wm-field-icon svg { width: 16px; height: 16px; color: #fff; }
.wm-field input {
  width: 100%; height: 48px; border-radius: 999px;
  border: 1px solid #A8E5D0; background: linear-gradient(180deg, #FFFFFF, #E6F9F3);
  padding: 0 18px 0 52px; font-size: 14px; font-family: inherit; color: #1e293b;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.wm-field input::placeholder { color: #64748B; }
.wm-field input:focus { border-color: #3CD0A1; box-shadow: 0 0 0 3px rgba(60, 208, 161,.15); }

.wm-submit {
  width: 100%; height: 48px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, #7EE8C4, #3CD0A1);
  color: #fff; font-size: 15px; font-weight: 700; font-family: inherit;
  box-shadow: 0 10px 20px -6px rgba(60, 208, 161,.55);
  margin-top: 6px; transition: filter .15s;
}
.wm-submit:hover { filter: brightness(1.04); }

.wm-forgot-wrap { text-align: center; margin-top: 18px; }
.wm-forgot {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  border: 1.5px solid #A8E5D0; color: #247C60; font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.wm-forgot:hover { background: #E6F9F3; }

.wm-note { margin-top: auto; padding-top: 18px; text-align: center; font-size: 11.5px; color: #94A3B8; }

/* ---------- Right: illustration panel ---------- */
.wm-art-panel {
  flex: 1 1 48%;
  min-width: 280px;
  background: linear-gradient(160deg, #D8F5EA 0%, #3CD0A1 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.wm-art-panel svg { width: 100%; height: auto; max-width: 380px; }

@media (max-width: 760px) {
  .wm-card { flex-direction: column; max-width: 440px; }
  .wm-art-panel { display: none; }
  .wm-form-panel { padding: 36px 28px; }
}

/* ── Additions for the demo signup page ──────────────────────────────────
   Same vocabulary as the sign-in form above, so the two read as one product
   rather than two designs that happen to share a colour. */

/* Signup carries three fields, a provider button and the reassurance list
   where sign-in carries two fields, so the panel is tightened to fit a laptop
   screen without scrolling, and scrolls only if it still cannot. */
.wm-form-panel.wm-tall {
  justify-content: flex-start;
  max-height: 94vh;
  overflow-y: auto;
  padding: 32px 44px 28px;
}
.wm-tall .wm-avatar-wrap { margin: 14px 0 2px; }
.wm-tall .wm-avatar { width: 52px; height: 52px; }
.wm-tall .wm-avatar svg { width: 26px; height: 26px; }
.wm-tall .wm-sub { margin-bottom: 18px; }
.wm-tall .wm-field { margin-bottom: 12px; }
.wm-tall .wm-forgot-wrap { margin-top: 14px; }

/* The panel above is capped at 94vh and scrolls, so nothing inside it may
   shrink to fit -- and this is what actually made the two buttons different
   heights. They both declare `height: 48px`, but .wm-submit sits inside the
   <form> and so is not a flex item of this panel, while .wm-provider is a
   direct child. When the content is taller than the cap, flex shrink applies
   to the direct child only: the Google button compressed to roughly half its
   height while the one above it, sheltered by the form, did not move.
   Declaring the same height on both cannot fix that; flex shrink outranks it
   on one of the two. */
.wm-tall > * { flex-shrink: 0; }

.wm-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; border-radius: 999px;
  border: 1.5px solid #A8E5D0; background: #fff;
  color: #1e293b; font-size: 14px; font-weight: 700; font-family: inherit;
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.wm-provider:hover { background: #F1F5F9; }

.wm-or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  color: #94A3B8; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.wm-or::before, .wm-or::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }

/* The label sits above the field rather than inside it as a placeholder.
   Sign-in has two fields somebody types from memory; signup has three that a
   person has to think about, and a placeholder disappears the moment they do.

   It is a SIBLING of .wm-field, never a child. The field icon is positioned
   against .wm-field with top:6px, so a label inside that box gets the icon
   drawn straight over it -- which is exactly what shipped the first time. */
.wm-label {
  display: block; font-size: 12px; font-weight: 700; color: #475569;
  margin: 0 0 5px 18px; letter-spacing: .01em;
}

.wm-field-error { color: #B91C1C; font-size: 12px; font-weight: 600; margin: 5px 0 0 18px; }

.wm-facts { list-style: none; margin: 20px 0 0; padding: 0; }
.wm-facts li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; color: #475569; line-height: 1.55; padding: 4px 0;
}
.wm-facts b { color: #1e293b; font-weight: 700; }
.wm-facts .tick { color: #2FAE85; font-weight: 800; flex-shrink: 0; }

/* Off-screen rather than display:none -- some bots skip hidden fields but
   fill positioned ones. aria-hidden and tabindex keep it away from anyone
   using a screen reader or the keyboard. */
.wm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Show password.
   A real <button> inside the rounded field, on the right where the eye is on
   every other sign-in form. The input gets room on that side so a long
   password does not run underneath it. The icon is not positioned against
   .wm-field-icon's box: that one is pinned left and would collide. */
.wm-field-reveal input { padding-right: 46px; }
.wm-reveal {
  position: absolute; right: 6px; top: 6px; bottom: 6px; width: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #64748B; border-radius: 999px;
}
.wm-reveal:hover { color: #247C60; background: rgba(60, 208, 161, .12); }
.wm-reveal:focus-visible { outline: 2px solid #3CD0A1; outline-offset: 2px; }
.wm-reveal svg { width: 18px; height: 18px; }
/* One icon at a time, chosen by the button's own state.
   NOT the `hidden` attribute: portal.css sets `svg { display: block }`, which
   beats the browser's rule for [hidden], and both eyes drew side by side. */
.wm-reveal .wm-eye-off { display: none; }
.wm-reveal[aria-pressed="true"] .wm-eye { display: none; }
.wm-reveal[aria-pressed="true"] .wm-eye-off { display: block; }

/* The line under "Continue with Google": what the button will and will not do.
   Signing in here never creates an account, and saying so on the button itself
   would make it a paragraph. */
.wm-provider-note {
  margin: 8px 2px 0; font-size: 11.5px; line-height: 1.45; color: #64748B; text-align: center;
}

/* The demo signup's consent line and its offer badge.
   The checkbox is a real one, not a styled span: a person using a keyboard or
   a screen reader has to be able to find the thing they are agreeing to. */
.wm-consent {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 4px 2px 14px; font-size: 12.5px; line-height: 1.45; color: #475569;
  cursor: pointer;
}
.wm-consent input { margin-top: 2px; flex: 0 0 auto; width: 15px; height: 15px; accent-color: #3CD0A1; }
.wm-consent a { color: #247C60; text-decoration: underline; }
.wm-offer {
  display: inline-block; margin: 0 auto 10px; padding: 4px 12px;
  border-radius: 999px; background: #FEF3C7; color: #B45309;
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
/* Disabled until the box is ticked, and it has to look it or the page is
   telling somebody to press something that does nothing. */
.wm-provider[disabled] { opacity: .5; cursor: not-allowed; }