/* ===========================================================================
   VEORA ONE — login, reset password, broker registration (v26)
   Depends on veora-ds-v26.css for tokens and alert primitives.

   Layout: an ink counterfoil on the left, a form on pale stock on the right,
   joined by a perforated tear line. That perforation is the one decorative
   element; everything else is plain ruled fields.
   ========================================================================= */

body.auth-gate-only {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--on-paper);
  font-family: var(--font-ui);
}
body.auth-gate-only #tailadminRoot { padding: 0; margin: 0; }

.v26-auth *, .v26-auth *::before, .v26-auth *::after { box-sizing: border-box; }
.v26-auth .auth-hidden { display: none !important; }
.v26-auth .hidden { display: none !important; }

.v26-auth {
  --perf: 14px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--on-paper);
}

/* ---------- counterfoil ---------- */

.v26-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3.4vw, 3rem);
  padding-right: calc(clamp(1.5rem, 3.4vw, 3rem) + var(--perf) / 2);
  background: var(--ink);
  color: var(--on-ink);
}

/* The tear line: paper-coloured notches bitten out of the ink edge, with a
   dashed fold running through them. */
.v26-stub::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--perf);
  background:
    radial-gradient(circle at 100% 50%, var(--paper) 0 4.5px, transparent 5px) 0 0 / var(--perf) 22px repeat-y;
  pointer-events: none;
}
.v26-stub::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--perf) + 6px);
  border-inline-end: 1px dashed var(--ink-line);
  pointer-events: none;
}

.v26-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.v26-brand img { width: 2.5rem; height: 2.5rem; border-radius: 10px; background: #fff; padding: 2px; object-fit: contain; }
.v26-brand strong {
  display: block;
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -.005em;
  line-height: 1.15;
}
.v26-brand small { display: block; color: var(--on-ink-dim); font-size: .75rem; margin-top: .0625rem; }

.v26-stub__body { max-width: 30rem; }

.v26-stub h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-stretch: 120%;
  font-weight: 700;
  font-size: clamp(1.75rem, 2.9vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: #fff;
}
.v26-stub__body > p {
  margin: 0 0 2rem;
  max-width: 26rem;
  color: var(--on-ink-dim);
  font-size: var(--step-1);
  line-height: 1.55;
}

/* Ledger: label, dotted leader, value — the way a fare breakdown is printed. */
.v26-ledger { margin: 0; padding: 0; display: grid; gap: .625rem; }
.v26-ledger > div { display: flex; align-items: baseline; gap: .5rem; font-size: var(--step--1); }
.v26-ledger dt { margin: 0; color: var(--on-ink); font-weight: 600; white-space: nowrap; }
.v26-ledger > div::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 1px dotted var(--ink-line);
  transform: translateY(-.2em);
}
.v26-ledger dt { order: 0; }
.v26-ledger dd { order: 2; margin: 0; color: var(--on-ink-dim); text-align: right; }

.v26-stub__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--on-ink-dim);
  font-size: .75rem;
}

/* ---------- form side ---------- */

.v26-form-side {
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem);
  background: var(--paper);
  min-width: 0;
}

.v26-card {
  width: min(100%, 30rem);
  padding-block: clamp(0rem, 3vh, 2rem);
}
.v26-auth[data-auth-visual-mode="broker_register"] .v26-card { width: min(100%, 38rem); }

.v26-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.v26-card__titles { min-width: 0; }
.v26-card h2 {
  margin: 0 0 .375rem;
  font-family: var(--font-display);
  font-stretch: 114%;
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--on-paper);
  text-wrap: balance;
}
.v26-card__titles p { margin: 0; color: var(--on-paper-dim); max-width: 32rem; }
.v26-card__head .v-stamp { flex: none; margin-top: .25rem; }

/* tabs: a ruled baseline with a thick marker under the current page */
.v26-tabs {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.v26-tabs::-webkit-scrollbar { display: none; }
.v26-tabs:not(:has(.v26-tab:not(.auth-hidden))) { display: none; }
.v26-tab {
  position: relative;
  padding: .625rem 0;
  margin-bottom: -1px;
  color: var(--on-paper-dim);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.v26-tab:hover { color: var(--on-paper); }
.v26-tab.is-active { color: var(--on-paper); border-bottom-color: var(--seal); }
.v26-tab:focus-visible, .v26-brand:focus-visible, .v26-back:focus-visible, .v26-card__foot a:focus-visible,
.v26-toggle:focus-visible, .v26-resend button:focus-visible {
  outline: 2px solid var(--seal) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

.v26-feedback { margin-bottom: 1.25rem; }
.v26-feedback[hidden] { display: none; }

/* steps */
.v26-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.v26-step {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-top: .625rem;
  border-top: 3px solid var(--rule);
  color: var(--on-paper-dim);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.v26-step.is-active { border-top-color: var(--ink); color: var(--on-paper); }
.v26-step.is-done { border-top-color: var(--verify); color: var(--on-paper); }
.v26-step__n {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: .75rem; font-weight: 700;
  flex: none;
}
.v26-step.is-active .v26-step__n { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.v26-step.is-done .v26-step__n { background: var(--verify); border-color: var(--verify); color: #fff; font-size: 0; }
.v26-step.is-done .v26-step__n::before { content: "✓"; font-size: .8125rem; }
.v26-step strong { display: block; font-size: var(--step-0); font-weight: 600; line-height: 1.2; }
.v26-step small { display: block; font-size: .75rem; color: var(--on-paper-dim); }
#otpStepIndicator.opacity-70 { opacity: 1; }

/* ---------- fields: ruled lines, the way a paper form is filled in ---------- */

.v26-form { display: grid; gap: 1.125rem; }
.v26-group { display: grid; gap: 1.125rem; }
.v26-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
.v26-field { display: grid; gap: .375rem; min-width: 0; }

.v26-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--on-paper);
  letter-spacing: .005em;
}
.v26-label--center { text-align: center; }

.v26-control {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-field);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.v26-control:hover { border-color: var(--on-paper-dim); }
.v26-control:focus-within {
  border-color: var(--ink);
  border-bottom-color: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 16%, transparent);
}
.v26-control input,
.v26-control select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: .75rem .875rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--on-paper);
  font: inherit;
  font-size: var(--step-1);
  line-height: 1.3;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.v26-control input:focus, .v26-control input:focus-visible,
.v26-control select:focus, .v26-control select:focus-visible { outline: none !important; box-shadow: none !important; }
.v26-control input::placeholder { color: color-mix(in srgb, var(--on-paper-dim) 70%, transparent); }
.v26-control--mono input { font-family: var(--font-code) !important; font-size: var(--step-0) !important; letter-spacing: .02em; }
.v26-control--select::after {
  content: "";
  position: absolute;
  inset-inline-end: .875rem;
  top: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--on-paper-dim);
  border-bottom: 2px solid var(--on-paper-dim);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.v26-control--select select { padding-inline-end: 2.25rem; cursor: pointer; }

.v26-toggle {
  flex: none;
  align-self: center;
  margin-inline: .25rem .5rem;
  padding: .375rem .5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--on-paper-dim);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.v26-toggle:hover { color: var(--on-paper); background: var(--paper-sunk); }

.v26-help, .v26-foot { margin: 0; color: var(--on-paper-dim); font-size: var(--step--1); line-height: 1.5; }
.v26-help--center { text-align: center; }
.v26-foot { text-align: center; }

.v26-match { min-height: 1.1em; font-size: var(--step--1); color: var(--on-paper-dim); }
.v26-match.is-match { color: var(--verify); font-weight: 600; }
.v26-match.is-mismatch { color: var(--flag); font-weight: 600; }
.v26-control.v26-match-ok { border-color: var(--verify); border-bottom-color: var(--verify); }
.v26-control.v26-match-warn { border-color: var(--flag); border-bottom-color: var(--flag); }

/* section break inside the long broker form */
.v26-section { margin-top: .5rem; padding-top: 1.125rem; border-top: 1px dashed var(--rule-strong); }
.v26-section--flush { margin-top: 0; padding-top: 0; border-top: 0; }
.v26-section h3 { margin: 0 0 .125rem; font-size: var(--step-1); font-weight: 650; letter-spacing: -.005em; font-family: var(--font-display); font-stretch: 108%; }
.v26-section p { margin: 0; color: var(--on-paper-dim); font-size: var(--step--1); }

/* ---------- human check (Cap) ---------- */

.v26-human {
  display: grid;
  gap: .625rem;
  padding: .875rem;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-field);
  background: var(--paper-sunk);
}
.v26-human__copy strong { display: block; font-size: var(--step-0); font-weight: 600; }
.v26-human__copy small { display: block; color: var(--on-paper-dim); font-size: var(--step--1); line-height: 1.45; }
.v26-human__widget cap-widget {
  display: block;
  width: 100%;
  --cap-background: var(--paper-raised);
  --cap-border-color: var(--rule-strong);
  --cap-border-radius: 6px;
  --cap-color: var(--on-paper);
  --cap-checkbox-background: var(--paper);
  --cap-checkbox-border: 1.5px solid var(--on-paper-dim);
  --cap-checkbox-border-radius: 4px;
  --cap-spinner-color: var(--seal);
  --cap-focus-ring: 0 0 0 3px color-mix(in srgb, var(--seal) 25%, transparent);
  --cap-font: 500 .9375rem/1.3 "Archivo", system-ui, sans-serif;
  --cap-widget-width: 100%;
}

.v26-notice {
  margin: 0;
  padding: .625rem .75rem;
  border-left: 3px solid var(--seal);
  background: var(--seal-wash);
  color: var(--on-paper);
  font-size: var(--step--1);
  line-height: 1.5;
  border-radius: 0 var(--r-field) var(--r-field) 0;
}

/* ---------- primary action ---------- */

.v26-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  min-height: 3.125rem;
  padding: .75rem 1.25rem;
  border: 0;
  border-radius: var(--r-field);
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: var(--step-1);
  font-weight: 650;
  cursor: pointer;
  transition: background .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);
}
.v26-submit:hover:not(:disabled) { background: var(--ink-raised); box-shadow: var(--lift-2); }
.v26-submit:active:not(:disabled) { transform: translateY(1px); }
.v26-submit:focus-visible { outline: 3px solid var(--seal) !important; outline-offset: 3px; }
.v26-submit:disabled { cursor: progress; opacity: .85; }
.v26-submit.is-loading::before {
  content: "";
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: v-spin .7s linear infinite;
}
.v26-submit .spinner { display: none; }
.v26-back, .v26-resend button {
  display: block;
  margin: .75rem auto 0;
  padding: .5rem .75rem;
  border: 0;
  background: transparent;
  color: var(--on-paper-dim);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  padding-inline: 0;
}
.v26-back:hover, .v26-resend button:not(:disabled):hover { color: var(--on-paper); }
.v26-resend button:disabled { border-bottom-color: transparent; cursor: default; opacity: .8; }
.v26-resend { text-align: center; }
.v26-resend button { margin-top: 0; }

/* ---------- OTP ---------- */

.v26-otp-head { text-align: center; margin-bottom: 1.25rem; }
.v26-otp-head p { margin: 0; color: var(--on-paper-dim); }
.v26-otp-head strong { display: block; margin: .125rem 0 .25rem; font-size: var(--step-1); overflow-wrap: anywhere; }
.v26-otp-head small { color: var(--on-paper-dim); font-size: var(--step--1); }

/* Six ruled slots drawn with one gradient. Each character is given exactly one
   cell's width via letter-spacing, so digits land on their own rule. */
.v26-otp {
  --cell: 3.25rem;
  display: block;
  width: calc(var(--cell) * 6);
  max-width: 100%;
  margin: .25rem auto 0;
  padding: .25rem 0 .5rem calc((var(--cell) - 1ch) / 2);
  border: 0;
  border-radius: 0;
  outline: none;
  background:
    linear-gradient(to right, var(--ink) 0 calc(100% - .75rem), transparent calc(100% - .75rem)) 0 100% / var(--cell) 3px repeat-x;
  color: var(--on-paper);
  font-family: var(--font-code) !important;
  font-weight: 500;
  font-size: 1.875rem !important;
  letter-spacing: calc(var(--cell) - 1ch);
  line-height: 1.3;
  text-align: left;
  caret-color: var(--seal);
  box-shadow: none;
  transition: background-image .15s var(--ease);
}
.v26-otp.is-masked { -webkit-text-security: disc; text-security: disc; }
.v26-otp::placeholder { color: var(--rule-strong); opacity: 1; }
.v26-otp:focus, .v26-otp:focus-visible { outline: none !important; box-shadow: none !important; }
.v26-otp:focus {
  background-image: linear-gradient(to right, var(--seal) 0 calc(100% - .75rem), transparent calc(100% - .75rem));
}
.v26-otp-status {
  min-height: 1.5em;
  margin-top: .25rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--on-paper-dim);
}
.v26-otp-status.is-checking { color: var(--seal); }
.v26-otp-status.is-success { color: var(--verify); font-weight: 600; }
.v26-otp-status.is-error { color: var(--flag); font-weight: 600; }

/* ---------- reset password ---------- */

.v26-reset { display: grid; gap: 1.125rem; padding-top: 1.125rem; border-top: 1px dashed var(--rule-strong); }
.v26-meter { display: grid; gap: .375rem; margin-top: .25rem; }
.v26-meter__track { height: 4px; border-radius: 2px; background: var(--paper-sunk); overflow: hidden; border: 1px solid var(--rule); }
.v26-meter__track span { display: block; height: 100%; width: 0; background: var(--flag); transition: width .25s var(--ease), background .25s var(--ease); }
.v26-meter__track span[data-level="3"] { background: var(--hold); }
.v26-meter__track span[data-level="4"] { background: var(--verify); }
.v26-meter small { color: var(--on-paper-dim); font-size: var(--step--1); }

/* ---------- card footer ---------- */

.v26-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--on-paper-dim);
  font-size: .75rem;
}
.v26-card__foot #loginVersionBadge { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; border-radius: 0; }
.v26-card__foot a { color: inherit; text-decoration: none !important; border-bottom: 1px solid currentColor; }
.v26-card__foot a:hover { color: var(--on-paper); }

/* ---------- state animations driven by auth-ui.js ---------- */

#authCard.auth-ui-shake { animation: v26-shake .42s var(--ease); }
#authCard.auth-ui-success { animation: v26-settle .4s var(--ease); }
@keyframes v26-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes v26-settle { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- narrow screens: the counterfoil becomes a header strip ---------- */

@media (max-width: 960px) {
  .v26-auth { grid-template-columns: 1fr; min-height: 0; }
  .v26-stub {
    padding: 1rem 1.25rem calc(1rem + var(--perf) / 2);
    gap: 0;
  }
  .v26-stub__body, .v26-stub__foot { display: none; }
  .v26-stub::after {
    inset-block: auto 0;
    inset-inline: 0;
    width: auto;
    height: var(--perf);
    background: radial-gradient(circle at 50% 100%, var(--paper) 0 4.5px, transparent 5px) 0 0 / 22px var(--perf) repeat-x;
  }
  .v26-stub::before {
    inset-block: auto calc(var(--perf) + 6px);
    inset-inline: 0;
    border-inline-end: 0;
    border-block-end: 1px dashed var(--ink-line);
  }
  .v26-form-side { padding-top: 1.5rem; }
}

@media (max-width: 560px) {
  .v26-card h2 { font-size: var(--step-2); }
  .v26-card__head { flex-direction: column-reverse; gap: .5rem; }
  .v26-grid { grid-template-columns: 1fr; }
  .v26-otp { --cell: 2.75rem; font-size: 1.625rem !important; }
  .v26-tabs { gap: 1.125rem; }
  .v26-steps small { display: none; }
  .v26-card__foot { flex-direction: column; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  #authCard.auth-ui-shake, #authCard.auth-ui-success { animation: none; }
  .v26-meter__track span { transition: none; }
}