/* ==========================================================================
   OneView — Login Screens (redesign, Phase 1)
   Ported from oneview-two/styles.css (Figma: OneView / Login Screen, node
   3376:8780). Covers: Landing · Sign In · Find Event · Forgot Password ·
   Reset Password. Loaded alongside oneview_login.css (not replacing it) since
   the OTP/MFA-setup pages still use the older design system for now.

   Responsive model
   ----------------
   The Figma frame is a fixed 1728×1024 split into two 864px panes. That split
   is kept as a *ratio* down to the point where the right pane can no longer
   hold a 474px form plus gutters; below that the panes stack. Type and spacing
   are fluid via clamp(), so there are no dead zones between breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ov-green: #41ad49;
  --ov-green-alt: #48a750;
  --ov-ink: #1a1a1a;
  --ov-ink-deep: #191919;
  --ov-black: #060606;

  /* Neutrals */
  --ov-white: #ffffff;
  --ov-text-muted: #525a67;
  --ov-placeholder: #9ea3ad;
  --ov-border: #d4d6d9;
  --ov-border-soft: #cccfd4;
  --ov-border-card: #E5E6E9;
  --ov-checkbox-border: #99a1ab;

  /* Feedback */
  --ov-error: #e5484d;

  /* Overlays */
  --ov-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%);
  --ov-panel-wash: rgba(229, 229, 229, 0.95);

  /* Elevation */
  --ov-shadow-card:
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 10px 24px -2px rgba(15, 23, 41, 0.12);

  /* Type */
  --ov-font-display: "Mohave", "Oswald", "Arial Narrow", sans-serif;
  --ov-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type — ceiling is the Figma value, floor is the smallest legible size */
  --ov-fs-hero: clamp(2.75rem, 6.25vw, 6.75rem);          /* 44 → 108 */
  --ov-fs-form-title: clamp(2rem, 2.55vw, 2.75rem);       /* 32 → 44  */
  --ov-fs-btn: clamp(1.125rem, 1.33vw, 1.4375rem);        /* 18 → 23  */
  --ov-fs-help: clamp(1.125rem, 1.27vw, 1.375rem);        /* 18 → 22  */
  --ov-fs-features-title: clamp(1.25rem, 1.39vw, 1.5rem); /* 20 → 24  */

  /* Fluid layout */
  --ov-gutter-x: clamp(1.5rem, 4.17vw, 4.5rem);    /* 24 → 72 */
  --ov-pad-block: clamp(1.75rem, 3.01vw, 3.25rem); /* 28 → 52 */
  --ov-panel-pad: clamp(1.5rem, 3.5vw, 3.5rem);

  /* Control sizing */
  --ov-btn-pad-y: clamp(0.875rem, 1.22vw, 1.3125rem);
  --ov-btn-pad-x: clamp(1.5rem, 2.55vw, 2.75rem);

  --ov-radius-input: 2px;
  --ov-radius-card: 6px;
  --ov-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   2. Reset & base (scoped to .ov-screen so it can't leak into other pages
   sharing the same layout, e.g. otp/accounts still on the old design)
   -------------------------------------------------------------------------- */
.ov-screen,
.ov-screen *,
.ov-screen *::before,
.ov-screen *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ov-screen {
  font-family: var(--ov-font-body);
  color: var(--ov-ink);
  background: var(--ov-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ov-screen :where(img, svg, video) {
  display: block;
  max-width: 100%;
}

/* :where() keeps these resets at zero added specificity so component classes
   like .ov-btn--primary (background: var(--ov-green)) always win over them,
   in every state — not just :hover, where the extra pseudo-class bumped the
   component rule's specificity just enough to mask this in manual testing. */
.ov-screen :where(button) {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.ov-screen :where(input) {
  font: inherit;
  color: inherit;
  min-width: 0; /* lets inputs shrink inside flex rows */
}

.ov-screen :where(a) {
  color: inherit;
}

.ov-screen :where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ov-green);
  outline-offset: 3px;
}

.ov-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Screen shell — 1:1 pane ratio, preserved fluidly
   -------------------------------------------------------------------------- */
.ov-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Left pane ---------------------------------------------------------------- */
.ov-pane-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  min-width: 0;
  padding: var(--ov-pad-block) var(--ov-gutter-x);
  background: var(--ov-white);
}

/* Right pane --------------------------------------------------------------- */
.ov-pane-right {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: var(--ov-ink);
}

.ov-pane-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ov-pane-scrim {
  position: absolute;
  inset: 0;
  background: var(--ov-scrim);
}

.ov-pane-wash {
  position: absolute;
  inset: 0;
  background: var(--ov-panel-wash);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.ov-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ov-logo-link {
  display: block;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  min-width: 0;
}

.ov-logo {
  width: clamp(150px, 12.6vw, 218px);
  height: auto;
}

.ov-help {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-help);
  font-weight: 700;
  color: var(--ov-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.ov-hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(1.5rem, 2.78vw, 3rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-hero-title {
  margin: 0;
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-hero);
  font-weight: 700;
  line-height: 0.907; /* 98/108 */
  letter-spacing: -0.0093em;
  color: var(--ov-ink);
  text-align: center;
  text-wrap: balance;
}

.ov-screen--landing .ov-hero-title {
  color: var(--ov-black);
}

.ov-cta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(0.75rem, 1.27vw, 1.375rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.ov-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: clamp(0.625rem, 0.81vw, 0.875rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: auto;
  padding: var(--ov-btn-pad-y) var(--ov-btn-pad-x);
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-btn);
  font-weight: 700;
  line-height: 1.39;
  text-decoration: none;
  -webkit-transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ov-btn--primary {
  color: var(--ov-white);
  background: var(--ov-green);
  /* Matches .ov-btn--ghost's 2.5px visible border so both sit at the same
     height wherever they're paired (add_team_members, landing) — height is
     auto, so an unmatched border changes the rendered box, not just the look. */
  border: 2.5px solid transparent;
  border-radius: var(--ov-radius-pill);
}

/* button/a-qualified to out-specificity a bundled vendor rule
   (button:not([disabled]):hover{color:...}) that would otherwise win the
   color property on <button> elements. */
.ov-btn--primary:hover,
button.ov-btn--primary:hover,
a.ov-btn--primary:hover {
  color: var(--ov-white);
  background: var(--ov-green-alt);
}

.ov-btn--ghost {
  color: var(--ov-ink);
  background: var(--ov-white);
  border: 2.5px solid var(--ov-ink);
  border-radius: var(--ov-radius-pill);
}

.ov-btn--ghost:hover,
button.ov-btn--ghost:hover,
a.ov-btn--ghost:hover {
  color: var(--ov-white);
  background: var(--ov-ink);
}

/* aria-disabled (not the native disabled attribute) so the button still
   receives click events and can reveal "is required" validation messages
   instead of silently doing nothing. */
.ov-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ov-btn-icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: auto;
  height: 1em;
  fill: currentColor;
}

/* Form submit CTAs (login, MFA setup, password reset) shrink to fit their
   label instead of stretching to the form's full width via the parent's
   default flex `stretch`, so the text sits at the start of the button
   rather than looking centered in unused space. */
.ov-form .ov-btn--primary {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ov-btn-icon--search {
  height: 1.05em;
}

/* Hero CTAs are square-edged blocks in the Figma frames. */
.ov-hero .ov-btn {
  border-radius: 0;
}

/* Search button — Find Event frame */
.ov-btn--search {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding: clamp(0.75rem, 1.16vw, 1rem) clamp(1.125rem, 1.62vw, 1.375rem);
  font-size: clamp(1rem, 1.16vw, 1.25rem);
  color: var(--ov-white);
  background: var(--ov-green);
  border-radius: 53px;
}

.ov-btn--search:hover,
button.ov-btn--search:hover {
  color: var(--ov-white);
  background: var(--ov-green-alt);
}

/* --------------------------------------------------------------------------
   7. Portal features
   -------------------------------------------------------------------------- */
.ov-features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-features-title {
  margin: 0;
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-features-title);
  font-weight: 700;
  line-height: 1.375;
  color: var(--ov-ink);
}

/* auto-fit collapses 3 → 2 → 1 columns on its own; no breakpoint needed */
.ov-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  width: 100%;
}

.ov-feature-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 20px 18px 24px;
  background: var(--ov-white);
  border: 1px solid var(--ov-border-card);
  border-radius: var(--ov-radius-card);
  -webkit-box-shadow: var(--ov-shadow-card);
          box-shadow: var(--ov-shadow-card);
}

.ov-feature-bullet {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--ov-text-muted);
}

.ov-feature-text {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--ov-text-muted);
}

/* --------------------------------------------------------------------------
   7b. MFA setup left pane (accounts#authentication_method/#verify/#final)
   Replaces the marketing hero/features above for this flow only.
   -------------------------------------------------------------------------- */
.ov-pane-left--mfa {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.ov-mfa-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0.8;
      -ms-flex: 0.8 0.8 auto;
          flex: 0.8 0.8 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 0;
}

.ov-mfa-pane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(2rem, 3.5vw, 3rem);
}

.ov-mfa-heading {
  margin: 0;
  max-width: 27ch;
  font-family: var(--ov-font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ov-ink);
}

.ov-mfa-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.ov-mfa-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ov-mfa-step {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  padding-bottom: 44px;
}

.ov-mfa-step:last-child {
  padding-bottom: 0;
}

.ov-mfa-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: var(--ov-border);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.ov-mfa-step__marker {
  position: relative;
  z-index: 1;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 28px;
  height: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--ov-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ov-placeholder);
  background: var(--ov-white);
  border: 2px solid var(--ov-border);
  border-radius: 50%;
}

.ov-mfa-step__marker svg {
  width: 13px;
  height: auto;
}

.ov-mfa-step__marker--complete,
.ov-mfa-step__marker--active {
  color: var(--ov-white);
  background: var(--ov-green);
  border-color: var(--ov-green);
}

.ov-mfa-step__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.ov-mfa-step__title {
  font-family: var(--ov-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ov-placeholder);
}

.ov-mfa-step__desc {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ov-placeholder);
}

.ov-mfa-step--complete .ov-mfa-step__title,
.ov-mfa-step--active .ov-mfa-step__title {
  color: var(--ov-ink);
}

.ov-mfa-step--complete .ov-mfa-step__desc,
.ov-mfa-step--active .ov-mfa-step__desc {
  color: var(--ov-text-muted);
}

.ov-mfa-shield {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-top: -72px;
}

.ov-mfa-shield svg {
  width: clamp(220px, 20vw, 340px);
  height: auto;
}

/* --------------------------------------------------------------------------
   8. Panel (modal content over the right pane)
   -------------------------------------------------------------------------- */
.ov-panel {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--ov-panel-pad);
  overflow-y: auto;
}

.ov-panel--top {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ov-panel-close {
  position: absolute;
  top: clamp(1rem, 2.3vw, 2.5rem);
  right: clamp(1rem, 2.3vw, 2.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
}

.ov-panel-close svg {
  width: 28px;
  height: 28px;
}

/* Form shrinks with the pane instead of holding 474px until it clips */
.ov-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(1rem, 1.27vw, 1.375rem);
  width: 100%;
  max-width: 474px;
}

.ov-form--find {
  gap: clamp(0.875rem, 1.04vw, 1.125rem);
  max-width: 478px;
}

/* Wider variant for forms with side-by-side field pairs (e.g. account creation) —
   smaller/denser inputs so a 2-up layout doesn't feel oversized. */
.ov-form--wide {
  max-width: 640px;
  gap: 14px;
}

.ov-form--wide .ov-input,
.ov-form--wide .ov-input-bare {
  padding: 11px 14px;
}

.ov-form--wide .ov-field {
  gap: 6px;
}

.ov-field-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}

.ov-field-row > .ov-field {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .ov-field-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.ov-form-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}

.ov-form-title {
  margin: 0;
  font-family: var(--ov-font-display);
  font-size: var(--ov-fs-form-title);
  font-weight: 700;
  line-height: 1.386;
  letter-spacing: -0.0227em;
  color: var(--ov-green);
}

.ov-form-sub {
  margin: 0;
  font-size: 16px;
  color: var(--ov-ink);
  text-wrap: pretty;
  font-family: Lato;
  font-weight: 400;
  font-style: Regular;
  leading-trim: NONE;
  line-height: 24px;
  letter-spacing: 0%;
}

.ov-form-sub--plain {
  font-weight: 400;
  line-height: 19px;
}

.ov-form-sub strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Fields
   -------------------------------------------------------------------------- */
.ov-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}

.ov-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--ov-ink);
  text-transform: none !important;
}

.ov-input-shell {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px; /* 16px floor prevents iOS zoom-on-focus */
  line-height: 19px;
  color: var(--ov-ink);
  background: var(--ov-white);
  border: 1.5px solid var(--ov-border);
  border-radius: var(--ov-radius-input);
  -webkit-transition: border-color 0.16s ease;
  transition: border-color 0.16s ease;
}

/* Password field grows a toggle button; not in the Figma frame but kept from
   the existing (working) login page rather than dropped silently. */
.ov-input-shell .ov-input {
  padding-right: 44px;
}

.ov-input-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--ov-text-muted);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.ov-input-toggle svg {
  width: 18px;
  height: 18px;
}

.ov-input::-webkit-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input::-moz-placeholder {
  color: var(--ov-placeholder);
}

.ov-input:-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input::-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input::placeholder {
  color: var(--ov-placeholder);
}

.ov-input:focus {
  border-color: var(--ov-green);
  outline: none;
}

.ov-input--invalid,
.ov-input[aria-invalid="true"],
.ov-input[aria-invalid="true"]:focus {
  border-color: var(--ov-error);
}

/* password_strength_validation.js's setFieldErrorState toggles "is-error" on
   the closest .input/.ov-input-shell ancestor of the password field. */
.ov-input-shell.is-error .ov-input {
  border-color: var(--ov-error);
}

/* inline field validation messages injected by the password-strength JS
   (showClientError appends a .alert.alert-danger.alert-outline into the
   closest .form-group/.field/.ov-field) */
.ov-field .alert.alert-danger.alert-outline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.ov-field .alert.alert-danger.alert-outline .icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.ov-field .alert.alert-danger.alert-outline .alert-message {
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  color: var(--ov-error);
  text-align: left;
}

/* password strength meter, shown under the new password field */
.ov-form .account-setup__password-strength {
  margin-top: 8px;
}

/* oneview_login.js's setupLoginForm/setupResetRequestForm/setupResetPasswordForm
   toggle "is-error" on the field shell (by id) when client-side validation
   fails, before the form ever reaches the server. */
.ov-field.is-error .ov-input {
  border-color: var(--ov-error);
}

.ov-field-link {
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin-top: 8px;
  font-size: 15px;
  line-height: 18px;
  color: var(--ov-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Error row — wraps instead of squeezing */
.ov-error-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 6px 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

.ov-error-msg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  color: var(--ov-error);
}

.ov-error-msg svg {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

/* Inside .ov-error-row, the message shares space with "Forgot password?" —
   let it shrink and wrap its own text instead of pushing the link off to a
   second line (where "justify-content: space-between" would strand a lone
   item at the left). */
.ov-error-row .ov-error-msg {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.ov-error-row .ov-field-link {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-top: 0;
}

/* Standalone error message (not inside .ov-error-row) — collapsed until the
   owning .ov-form carries "is-error" (set server-side on re-render, or by
   oneview_login.js's client-side checks before the form ever submits). */
.ov-error-msg--standalone {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.16s ease, max-height 0.16s ease;
  transition: opacity 0.16s ease, max-height 0.16s ease;
}

.ov-form.is-error .ov-error-msg--standalone {
  max-height: 80px;
  margin-top: -4px;
  opacity: 1;
}

/* Success / info notice (e.g. "password reset email sent") ------------------ */
.ov-form-notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 474px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 18px;
  color: var(--ov-ink);
  background: #f2fbf3;
  border: 1px solid var(--ov-green);
  border-radius: var(--ov-radius-card);
}

.ov-form-notice svg {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  color: var(--ov-green);
}

/* Remember me / terms & conditions ------------------------------------------ */
.ov-remember {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  line-height: 18px;
  color: var(--ov-ink);
  cursor: pointer;
}

.ov-checkbox {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--ov-white);
  border: 1.5px solid var(--ov-checkbox-border);
  border-radius: var(--ov-radius-input);
  cursor: pointer;
}

#terms_and_conditions {
  margin-right: 7px;
}

.ov-remember a {
  color: var(--ov-green);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 2px;
  padding-left: 5px;
}

/* Tick path taken from the Figma success-icon vector */
.ov-checkbox:checked {
  background: var(--ov-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21' fill='none'%3E%3Cpath d='M1.76782 9.63672L8.76782 16.6367L21.7678 1.63672' stroke='white' stroke-width='5'/%3E%3C/svg%3E") center / 11px 10px no-repeat;
  border-color: var(--ov-green);
}

/* setupLoginForm (oneview_login.js) and sessions#create's @terms_missing
   toggle "is-error" on #termsShell when the terms checkbox is required. */
.ov-remember.is-error .ov-checkbox {
  border-color: var(--ov-error);
}

/* --------------------------------------------------------------------------
   10. Find Event frame
   -------------------------------------------------------------------------- */
.ov-search-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-search-row .ov-input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 200px;
          flex: 1 1 200px;
  border-color: var(--ov-border-soft);
}

.ov-rule {
  height: 1px;
  margin: 0;
  background: var(--ov-border-soft);
  border: 0;
}

.ov-results-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  font-size: 17px;
  line-height: 20px;
  color: var(--ov-ink);
}

.ov-results-count {
  font-weight: 900;
  color: var(--ov-green);
}

.ov-results {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding-left: 6px;
  margin: 0;
  list-style: none;
}

.ov-result {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-result::before {
  content: "•";
  font-size: 16px;
  font-weight: 900;
  line-height: 19px;
  color: var(--ov-ink);
}

.ov-result a {
  font-size: 17px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ov-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ov-result a:hover {
  color: var(--ov-green);
}

/* --------------------------------------------------------------------------
   11. Check Your Email / success notice
   -------------------------------------------------------------------------- */
.ov-success-icon {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--ov-green);
  border-radius: 50%;
}

.ov-success-icon svg {
  width: 20px;
  height: auto;
}

.ov-resend-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  color: var(--ov-ink);
}

.ov-resend {
  font-weight: 700;
  color: var(--ov-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ov-back-link {
  width: 100%;
  max-width: 474px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  color: var(--ov-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. Stacked layout
   Below this width the right pane can no longer hold the form comfortably,
   so the panes stack and each sizes to its own content.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .ov-screen {
    grid-template-columns: 1fr;
    min-height: 0; /* stop each pane inheriting a full-viewport floor */
  }

  .ov-pane-left {
    gap: clamp(2.5rem, 7vw, 4rem);
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Panel screens: the media pane is a backdrop for the form, so it sizes to
     the form rather than to an arbitrary fixed height. */
  .ov-pane-right {
    display: grid;
  }

  .ov-panel,
  .ov-panel--top {
    position: relative;
    inset: auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: clamp(3.5rem, 9vw, 5.5rem) var(--ov-gutter-x);
  }

  /* Landing has no panel — give the media a presence of its own. */
  .ov-screen--landing .ov-pane-right {
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   12b. Tablet stacked layout (iPad / Android tablets)
   At phone widths the full-viewport-height left pane roughly matches its
   content, but at tablet widths (768–1100px) that same min-height leaves the
   header/hero/features — or the MFA step-tracker — stretched across a much
   taller box than they need via "justify-content: space-between"/flex-grow
   centering, pushing the form pane hundreds of pixels below the fold. Let
   the left pane size to its own content instead, same as the existing
   landscape-phone override below.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1100px) {
  .ov-pane-left {
    min-height: 0;
  }

  .ov-mfa-center {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

/* --------------------------------------------------------------------------
   13. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ov-header {
    gap: 0.75rem;
  }

  .ov-cta-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-item-align: stretch;
        align-self: stretch;
  }

  .ov-cta-row .ov-btn {
    width: 100%;
  }

  .ov-search-row .ov-btn--search {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  .ov-form .ov-btn--primary {
    width: 100%;
  }

  .ov-screen--landing .ov-pane-right {
    aspect-ratio: 4 / 3;
  }

  .ov-mfa-heading {
    max-width: none;
    font-size: clamp(1.375rem, 5vw, 1.75rem);
    text-wrap: balance;
  }

  .ov-mfa-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .ov-mfa-shield {
    margin-top: 0;
  }

  .ov-mfa-shield svg {
    width: 160px;
  }
}

/* Touch targets: coarse pointers get a comfortable minimum */
@media (pointer: coarse) {
  .ov-checkbox {
    width: 22px;
    height: 22px;
  }

  .ov-panel-close {
    width: 44px;
    height: 44px;
  }
}

/* Landscape phones — reclaim vertical space */
@media (max-height: 560px) and (orientation: landscape) {
  .ov-pane-left {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ov-screen *,
  .ov-screen *::before,
  .ov-screen *::after {
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   15. MFA setup flow (Phase 2)
   Ported from oneview-two/styles.css section 15 (Figma: OneView / Login
   Screen - MFA, node 3407:9148). Covers: Choose Method · Verify
   (Authenticator / Email / Phone) · Add Phone Number · Setup Complete.
   Loaded on app/views/accounts/* (AccountsController's account-setup MFA
   enrollment flow), which now opts into the same .ov-screen layout as the
   Phase 1 pages via content_for(:hero_variant, "find").
   ========================================================================== */

/* Method accent colours, taken from the badge fills in the file */
:root {
  --ov-auth-tint: #f2fbf3;
  --ov-email-ink: #41ad49;
  --ov-email-tint: #f2fbf3;
  --ov-sms-ink: #41ad49;
  --ov-sms-tint: #f2fbf3;
  --ov-warn: #d9990d;
  --ov-muted-2: #6b7280;
  --ov-muted-3: #737885;
  --ov-hairline: #ebedf0;
  --ov-card-border: #e3e5e8;
  --ov-summary-border: #dee0e3;
  --ov-qr-bg: #f3f5f7;
  --ov-qr-ink: #0f1217;
  --ov-expiry-txt: #E5484D;
}

/* Eyebrow — "STEP 1 OF 2 · CHOOSE METHOD" */
.ov-eyebrow {
  margin: 0;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--ov-green);
}

.ov-form--mfa {
  gap: clamp(1rem, 1.39vw, 1.5rem);
}

.ov-form--mfa .ov-form-head {
  gap: 6px;
}

/* Verify/Complete screens use a 40px title against Choose Method's 44px */
.ov-form-title--sm {
  font-size: clamp(1.75rem, 2.31vw, 2.5rem);
  line-height: 1.4;
}

/* Icon badge above the Verify / Add Phone heads ---------------------------- */
.ov-icon-badge {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.ov-icon-badge--email { background: var(--ov-email-tint); }
.ov-icon-badge--sms   { background: var(--ov-sms-tint); }
.ov-icon-badge--auth  { background: var(--ov-auth-tint); }

.ov-icon-badge svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Method cards
   -------------------------------------------------------------------------- */
.ov-methods {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
}

.ov-methods legend {
  padding: 0;
}

.ov-method {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
  cursor: pointer;
  background: var(--ov-white);
  border: 1.5px solid var(--ov-card-border);
  border-radius: 12px;
  -webkit-transition: border-color 0.16s ease, background-color 0.16s ease;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.ov-method:hover {
  border-color: var(--ov-checkbox-border);
}

/* The real radio drives state and stays focusable */
.ov-method-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ov-method:has(.ov-method-input:checked) {
  background: var(--ov-auth-tint);
  border: 2px solid var(--ov-green);
}

.ov-method:has(.ov-method-input:focus-visible) {
  outline: 3px solid var(--ov-green);
  outline-offset: 3px;
}

/* Disabled method card (e.g. SMS with no valid US mobile on file) — not in
   the prototype, which has no notion of a disabled option. */
.ov-method.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ov-method.is-disabled:hover {
  border-color: var(--ov-card-border);
}

.ov-method-badge {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.ov-method-badge--auth  { background: var(--ov-auth-tint); }
.ov-method-badge--email { background: var(--ov-email-tint); }
.ov-method-badge--sms   { background: var(--ov-sms-tint); }

.ov-method-badge svg {
  width: 20px;
  height: 20px;
}

.ov-method-txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ov-method-titlerow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ov-method-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.19;
  color: var(--ov-ink);
}

.ov-method-rec {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ov-white);
  background: var(--ov-green);
  border-radius: var(--ov-radius-pill);
}

.ov-method-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.23;
  color: var(--ov-muted-2);
  text-wrap: pretty;
}

/* Radio indicator */
.ov-method-radio {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1.5px solid #b2b8bf;
  border-radius: 50%;
  -webkit-transition: background-color 0.16s ease, border-color 0.16s ease;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.ov-method-radio svg {
  width: 11px;
  height: 8px;
  opacity: 0;
}

.ov-method:has(.ov-method-input:checked) .ov-method-radio {
  background: var(--ov-green);
  border-color: var(--ov-green);
}

.ov-method:has(.ov-method-input:checked) .ov-method-radio svg {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   QR panel — Verify (Authenticator)
   -------------------------------------------------------------------------- */
.ov-qr-panel {
  display: grid;
  place-items: center;
  padding: 18px 0;
  background: var(--ov-qr-bg);
  border-radius: 12px;
}

.ov-qr {
  display: block;
  width: 132px;
  height: 132px;
  background: var(--ov-white);
  border-radius: 8px;
}

/* Numbered setup steps */
.ov-steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: ov-step;
}

.ov-step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  font-size: 13px;
  line-height: 1.23;
  color: var(--ov-muted-3);
  counter-increment: ov-step;
  text-wrap: pretty;
}

.ov-step::before {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ov-white);
  content: counter(ov-step);
  background: var(--ov-green);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   OTP input
   -------------------------------------------------------------------------- */
.ov-otp-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.21;
  color: var(--ov-ink);
}

.ov-otp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.ov-otp-box {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 0;
  font-family: var(--ov-font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--ov-ink);
  text-align: center;
  background: var(--ov-white);
  border: 1.5px solid var(--ov-border);
  border-radius: 8px;
  -webkit-transition: border-color 0.16s ease;
  transition: border-color 0.16s ease;
}

.ov-otp-box:focus {
  border: 2px solid var(--ov-green);
  outline: none;
}

.ov-otp-box:not(:-moz-placeholder) {
  border-color: var(--ov-green);
}

.ov-otp-box:not(:-ms-input-placeholder) {
  border-color: var(--ov-green);
}

.ov-otp-box:not(:placeholder-shown) {
  border-color: var(--ov-green);
}

/* Sent-to line and expiry meta */
.ov-sent-to,
.ov-otp-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.23;
  color: var(--ov-muted-3);
}

.ov-sent-to {
  font-size: 14px;
}

.ov-sent-to strong {
  font-weight: 700;
  color: var(--ov-ink);
}

.ov-otp-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.ov-expiry {
  margin: 0;
  font-size: 14px;
  color: var(--ov-muted-3);
}

.ov-expiry-timer {
  margin: 0;
  color: var(--ov-expiry-txt);
}

.ov-expiry strong {
  font-weight: 700;
  color: var(--ov-ink);
}

.ov-resend-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--ov-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ov-resend-link[disabled] {
  color: var(--ov-placeholder);
  text-decoration: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Add Phone Number
   -------------------------------------------------------------------------- */
.ov-warn-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.23;
  color: var(--ov-warn);
}

.ov-warn-row svg {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.ov-labelrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4px 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ov-labelrow .ov-label {
  font-size: 14px;
  line-height: 1.21;
}

.ov-labelrow-note {
  font-size: 12px;
  color: var(--ov-muted-3);
}

/* Input with a leading icon */
.ov-input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px 16px;
  background: var(--ov-white);
  border: 1.5px solid var(--ov-border);
  border-radius: 8px;
  -webkit-transition: border-color 0.16s ease;
  transition: border-color 0.16s ease;
}

.ov-input-group:focus-within {
  border-color: var(--ov-green);
}

.ov-input-group svg {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 20px;
  height: 20px;
}

.ov-input-bare {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 0;
  font-size: 16px;
  line-height: 19px;
  background: none;
  border: 0;
}

.ov-input-bare:focus {
  outline: none;
}

.ov-input-bare::-webkit-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input-bare::-moz-placeholder {
  color: var(--ov-placeholder);
}

.ov-input-bare:-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input-bare::-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.ov-input-bare::placeholder {
  color: var(--ov-placeholder);
}

.ov-consent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 13px;
  line-height: 1.23;
  color: var(--ov-muted-3);
  cursor: pointer;
}

.ov-consent .ov-checkbox {
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Setup Complete summary
   -------------------------------------------------------------------------- */
.ov-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--ov-white);
  border: 1.5px solid var(--ov-summary-border);
  border-radius: 12px;
}

.ov-summary-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 15px 16px;
}

.ov-summary-row + .ov-summary-row {
  border-top: 1px solid var(--ov-hairline);
}

.ov-summary-lg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
}

.ov-summary-icon {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.ov-summary-icon--auth  { background: var(--ov-auth-tint); }
.ov-summary-icon--email { background: var(--ov-email-tint); }
.ov-summary-icon--sms   { background: var(--ov-sms-tint); }

.ov-summary-icon svg {
  width: 18px;
  height: 18px;
}

.ov-summary-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.21;
  color: var(--ov-ink);
}

.ov-summary-rg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
}

.ov-summary-value {
  font-size: 14px;
  line-height: 1.21;
  color: var(--ov-muted-3);
}

.ov-summary-tick {
  display: grid;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  background: var(--ov-green);
  border-radius: 50%;
}

.ov-summary-tick svg {
  width: 8px;
  height: 6px;
}

/* --------------------------------------------------------------------------
   Existing verify-email/verify-sms/verify-auth error & notice elements keep
   their original ids and classes (the fetch-based JS in each partial writes
   to them via textContent/style directly) — these rules just restyle them
   to match the new .ov-error-msg / .ov-warn-row look without touching any
   markup or JS.
   -------------------------------------------------------------------------- */
.ov-screen .verify-auth__otp-error,
.ov-screen .verify-email__otp-error,
.ov-screen .verify-sms__otp-error {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ov-error);
  visibility: hidden;
}

.ov-screen .verify-sms__phone-error,
.ov-screen .verify-sms__consent-error {
  display: none;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ov-error);
}

/* Pulled closer to the checkbox it belongs to — .ov-consent's parent gap
   (clamp(1rem, 1.27vw, 1.375rem)) already puts ~16-22px above it, so this
   cancels most of that out instead of stacking a further 4px on top. */
.ov-screen .verify-sms__consent-error {
  margin-top: calc(6px - clamp(1rem, 1.27vw, 1.375rem));
}

.ov-screen .verify-sms__phone-input--error,
.ov-screen .ov-input-group:has(.verify-sms__phone-input--error) {
  border-color: var(--ov-error);
}

.ov-screen .mfa-otp-attempts-remaining {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ov-warn);
}

.ov-screen .verify-auth__refresh {
  margin: 0;
  font-size: 13px;
  line-height: 1.23;
  color: var(--ov-muted-3);
}

/* verify/_sms.html.erb nests its two steps ("add phone" / "confirm phone")
   in wrapper divs instead of putting their contents directly under
   .ov-form, so they need .ov-form's own flex/gap repeated here — otherwise
   everything inside each wrapper packs together with no spacing. */
#verify-sms-phone-box,
#verify-sms-otp-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(1rem, 1.27vw, 1.375rem);
}

/* toggles "is-disabled" on the phone box (once an OTP has been sent) and the
   OTP section (until a phone number is submitted) — same class, same JS.
   The prototype shows "Add Phone" and "Verify Phone" as two separate
   screens, so the inactive step here should be hidden entirely rather than
   merely dimmed, otherwise both cards stack on top of each other. */
#verify-sms-phone-box.is-disabled,
#verify-sms-otp-section.is-disabled {
  display: none;
}

/* --------------------------------------------------------------------------
   MFA responsive
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* 6 boxes × 68px will not fit; let them shrink and stay tappable */
  .ov-otp {
    gap: 6px;
  }

  .ov-otp-box {
    height: 56px;
    font-size: 20px;
  }

  .ov-summary-row {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .ov-summary-rg {
    padding-left: 38px; /* line up under the label text */
  }

  .ov-method {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .ov-method-radio {
    margin-top: 2px;
  }
}

/* --------------------------------------------------------------------------
   16. Password strength meter (shared/_password_strength_meter)
   Classes below are set directly by password_strength_validation.js —
   keep them in sync with that file rather than renaming here.
   -------------------------------------------------------------------------- */
.account-setup__password-strength {
  margin-top: 8px;
}

.account-setup__password-strength-bars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  height: 6px;
}

.account-setup__password-strength-bar {
  background: var(--ov-border);
  border-radius: 3px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-transition: background-color 0.16s ease;
  transition: background-color 0.16s ease;
}

.account-setup__password-strength-bars--score-0 .account-setup__password-strength-bar:nth-child(-n + 1) {
  background: var(--ov-error);
}

.account-setup__password-strength-bars--score-1 .account-setup__password-strength-bar:nth-child(-n + 2) {
  background: #e67e22;
}

.account-setup__password-strength-bars--score-2 .account-setup__password-strength-bar:nth-child(-n + 3) {
  background: var(--ov-warn);
}

.account-setup__password-strength-bars--score-3 .account-setup__password-strength-bar:nth-child(-n + 4) {
  background: var(--ov-green);
}

.account-setup__password-strength-bars--score-4 .account-setup__password-strength-bar:nth-child(-n + 4) {
  background: var(--ov-green-alt);
}

.account-setup__password-strength-meta {
  color: var(--ov-text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.account-setup__password-strength-label {
  font-weight: 600;
}

.account-setup__password-strength--score-0 .account-setup__password-strength-label,
.account-setup__password-strength--score-1 .account-setup__password-strength-label {
  color: var(--ov-error);
}

.account-setup__password-strength--score-2 .account-setup__password-strength-label {
  color: var(--ov-warn);
}

.account-setup__password-strength--score-3 .account-setup__password-strength-label,
.account-setup__password-strength--score-4 .account-setup__password-strength-label {
  color: var(--ov-green);
}

/* --------------------------------------------------------------------------
   17. intl-tel-input country dropdown (accounts/edit.html.erb,
   accounts/verify/_sms.html.erb). The library ships with no real styling of
   its own, so the popup renders as a bare white box and its search input
   picks up the app-wide ":focus-visible" reset (a thick green outline) —
   fine for a plain field, way too heavy for this compact widget.
   -------------------------------------------------------------------------- */
.iti__dropdown-content {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--ov-border);
  border-radius: var(--ov-radius-card);
  -webkit-box-shadow: var(--ov-shadow-card);
          box-shadow: var(--ov-shadow-card);
  background: var(--ov-white);
}

.iti__dropdown-content .iti__search-input {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--ov-border);
  border-radius: var(--ov-radius-input);
  font-family: var(--ov-font-body);
  font-size: 14px;
  color: var(--ov-ink);
}

.iti__dropdown-content .iti__search-input::-webkit-input-placeholder {
  color: var(--ov-placeholder);
}

.iti__dropdown-content .iti__search-input::-moz-placeholder {
  color: var(--ov-placeholder);
}

.iti__dropdown-content .iti__search-input:-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.iti__dropdown-content .iti__search-input::-ms-input-placeholder {
  color: var(--ov-placeholder);
}

.iti__dropdown-content .iti__search-input::placeholder {
  color: var(--ov-placeholder);
}

.iti__dropdown-content .iti__search-input:focus {
  outline: none;
  border-color: var(--ov-green);
}

.iti__country-list {
  max-height: 260px;
  overflow-y: auto;
}

.iti__country {
  padding: 8px 10px;
  border-radius: var(--ov-radius-input);
  font-family: var(--ov-font-body);
  font-size: 14px;
}

.iti__country.iti__highlight {
  background-color: var(--ov-auth-tint);
}

.iti__country .iti__dial-code {
  color: var(--ov-text-muted);
}

/* --------------------------------------------------------------------------
   18. Onboarding (layouts/onboarding.html.erb, onboarding/booth_team_member,
   booth_teams/add_team_members) — a plain single card on a light page
   background, not the two-pane hero used by the login/MFA flow.
   -------------------------------------------------------------------------- */
.ov-onboarding-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  min-height: 100vh;
  font-family: var(--ov-font-body);
}

.ov-onboarding-header {
  background: var(--ov-white);
  border-bottom: 1px solid var(--ov-border-card);
  padding: 20px clamp(1.5rem, 4vw, 3rem);
}

.ov-onboarding-main {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: clamp(2rem, 5vw, 4rem) 1.5rem;
}

/* Dismissible flash banner shown under the onboarding header, right-aligned
   with it. Server-rendered (not the legacy React Flash component) so it can
   share the oneview-two icon/color language instead of the icomoon-font-based
   .flash styles. */
.ov-toast-region {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 20px clamp(1.5rem, 4vw, 3rem) 0;
}

.ov-toast {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 14px 16px;
  background: var(--ov-white);
  border-left: 4px solid currentColor;
  border-radius: var(--ov-radius-card);
  -webkit-box-shadow: var(--ov-shadow-card);
          box-shadow: var(--ov-shadow-card);
  color: var(--ov-warn);
}

.ov-toast-icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  color: inherit;
  width: 20px;
  height: 20px;
}

.ov-toast-message {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ov-ink);
}

.ov-toast-close {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding: 2px;
  margin: 0;
  background: none;
  border: none;
  color: var(--ov-placeholder);
  cursor: pointer;
}

.ov-toast--alert,
.ov-toast--error,
.ov-toast--danger {
  color: var(--ov-error);
}

.ov-toast--success {
  color: var(--ov-green);
}

.ov-onboarding-footer {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  border-top: none;
  margin: 0;
  padding: 0 1.5rem 2rem;
  font-size: 13px;
  color: var(--ov-muted-3);
  text-align: center;
}

.ov-onboarding-stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

.ov-onboarding-card {
  width: 100%;
  max-width: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  background: var(--ov-white);
  border: 1px solid var(--ov-border-card);
  border-radius: var(--ov-radius-card);
  -webkit-box-shadow: var(--ov-shadow-card);
          box-shadow: var(--ov-shadow-card);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.ov-onboarding-card--wide {
  max-width: 70%;
}

/* Unlike the login/MFA screens, the onboarding card's sub-titles ("Team
   Member N") are dark ink, not brand green. The page title itself (e.g.
   "Invite Team Members") is an <h2> and is carved back out to green below. */
.ov-onboarding-card .ov-form-title {
  color: var(--ov-ink);
}

.ov-onboarding-card h2.ov-form-title {
  color: var(--ov-green);
}

.ov-onboarding-card .ov-btn {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.ov-onboarding-hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--ov-border-card);
  margin: 0;
}

.ov-onboarding-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  .ov-btn {
    line-height: 1 !important;
  }
}

/* Plain <select>, styled to match .ov-input; browsers render the popup list
   natively, so accent-color is the only lever available for the selected
   row's tint inside that native popup. */
.ov-select {
  width: 100%;
  height: auto;
  padding: 14px 40px 14px 16px;
  font-size: 16px;
  line-height: 19px;
  font-family: var(--ov-font-body);
  color: var(--ov-ink);
  background: var(--ov-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  background-size: 20px 20px;
  border: 1.5px solid var(--ov-border);
  border-radius: var(--ov-radius-input);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  accent-color: var(--ov-green);
  -webkit-transition: border-color 0.16s ease;
  transition: border-color 0.16s ease;
}

/* Native <select> popups don't expose an "open" pseudo-class across browsers;
   :focus is the closest approximation (focus fires when the popup opens). */
.ov-select:focus {
  outline: none;
  border-color: var(--ov-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ov-onboarding-notice {
  padding: 14px 16px;
  background: #FDF3CF;
  font-size: 14px;
  line-height: 1.4;
  color: #1A1A1A;
  border-left: 4px solid #F2C94C;
  border-radius: 3px;
}

.ov-onboarding-card .ov-field-row {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* shared/_mobile_intl_field renders old Bootstrap-era markup (.form-group,
   .form-control) — it's reused by many non-oneview-two pages, so it can't be
   edited directly. Restyle it here to match the sibling .ov-label/.ov-input
   fields in the same row instead. */
.ov-onboarding-card .mobile-intl-field label {
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  color: var(--ov-ink);
}

.ov-onboarding-card .mobile-intl-field .iti input[type="tel"] {
  height: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 16px;
  font-size: 16px;
  line-height: 19px;
  color: var(--ov-ink);
  background: var(--ov-white);
  border: 1.5px solid var(--ov-border);
  border-radius: var(--ov-radius-input);
}

.ov-onboarding-card .mobile-intl-field .iti input[type="tel"]:focus {
  border-color: var(--ov-green);
  outline: none;
}