/* ==========================================================================
   KuduDoc — auth pages (signup.html, signin.html)
   Minimal chrome comes from styles/app.css (.minimal-shell / .minimal-topbar /
   .minimal-main). This file adds the auth card, the sign-up step wizard, the
   stepper, and the step-3 signature-moment treatment.
   ========================================================================== */

/* ---- Topbar link (right side of .minimal-topbar) ---- */
.minimal-topbar__link{ font-size: var(--text-small); color: var(--text-secondary); white-space: nowrap; }
.minimal-topbar__link a{ font-weight: 600; color: var(--blue-600); margin-left: 6px; }
.minimal-topbar__link a:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px){
  .minimal-topbar__link-full{ display: none; }
  .minimal-topbar__link a{ margin-left: 0; }
}

/* ---- Auth card ----
   Mobile/tablet keep a 440px card. On the split layout (≥961px, same
   breakpoint as .minimal-main in app.css) the form sits in a 50% column —
   440px inside that column reads as a phone strip. Signup fills the column
   with a 640px cap; sign-in (.auth-card--simple) stays a short form. */
.auth-card{ width: 100%; max-width: 440px; padding: var(--space-8) var(--space-7); }
.auth-card--simple{ max-width: 400px; }
@media (max-width: 480px){
  .auth-card{ padding: var(--space-6) var(--space-5); }
}
@media (min-width: 961px){
  .auth-card{
    max-width: 640px;
    padding: var(--space-8) var(--space-8);
  }
  .auth-card--simple{
    max-width: 400px;
    padding: var(--space-8) var(--space-7);
  }
}

.auth-lede{ margin-top: var(--space-2); font-size: var(--text-small); }

/* ---- Stepper ---- */
.auth-steps{
  position: relative; display: flex; justify-content: space-between;
  margin: var(--space-7) 0 var(--space-8);
}
.auth-steps::before{
  content: ""; position: absolute; top: 15px; left: 15px; right: 15px; height: 2px;
  background: var(--ink-100); z-index: 0;
}
.auth-steps__item{
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.auth-steps__dot{
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--white); border: 1.5px solid var(--ink-200); color: var(--ink-500);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-small);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.auth-steps__label{ font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-align: center; line-height: 1.3; }
.auth-steps__item.is-active .auth-steps__dot{ background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.auth-steps__item.is-active .auth-steps__label{ color: var(--blue-700); }
.auth-steps__item.is-complete .auth-steps__dot{ background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-700); }
.auth-steps__item.is-complete .auth-steps__label{ color: var(--ink-700); }
@media (max-width: 480px){ .auth-steps__label{ font-size: 10px; } }

/* ---- Step panels ---- */
.auth-step{ display: none; }
.auth-step.is-active{ display: block; animation: auth-step-in var(--dur-slow) var(--ease-out); }
@keyframes auth-step-in{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* Headings are focused programmatically on step change (for AT announcement)
   — suppress the ring so a non-interactive heading doesn't look clickable. */
.auth-step__title:focus{ outline: none; }
.auth-step__intro{ margin-top: var(--space-2); margin-bottom: var(--space-6); }

.auth-step__actions{ margin-top: var(--space-7); }
.auth-step__actions--split{ display: flex; gap: var(--space-4); margin-top: var(--space-7); }
.auth-step__back{ flex: 0 0 auto; }
.auth-step__continue{ flex: 1; }

.auth-field-row{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
/* 121×22 measured at 375px — two pixels under WCAG 2.5.8's 24px floor, on 23
   pages. padding-block grows the hit box into the gap the form already has,
   without touching line-height, so nothing on the row moves. */
.auth-forgot-link{ font-size: var(--text-small); font-weight: 600; color: var(--blue-600); padding-block: 2px; }
.auth-forgot-link:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

.auth-card__footer-note{ margin-top: var(--space-7); text-align: center; font-size: var(--text-small); color: var(--text-secondary); }
.auth-card__footer-note a{ font-weight: 600; color: var(--blue-600); }
.auth-card__footer-note a:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Step 3: the signature moment ---- */
.sig-step__doc{ max-width: 360px; margin: var(--space-6) auto 0; }
.sig-step__doc .doc-window__body{ padding: var(--space-5); }
.sig-clause-label{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); }
.sig-clause-text{ font-size: 12px; line-height: 1.6; color: var(--ink-700); margin-top: 4px; }
.sig-party{ margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ink-100); }
.sig-party__label{ display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); margin-bottom: 10px; }
/* .signature / .is-drawn live in components.css; .is-placeholder is page-
   specific (also defined in design-system.css, which this page doesn't
   load) so it's restated here verbatim for the same resting state. */
.signature{ font-size: 3rem; }
.signature.is-placeholder{ color: var(--ink-300); font-family: var(--font-sans); font-size: var(--text-body); }
.sig-line{ display: block; margin-top: 8px; height: 2px; max-width: 220px; background: var(--ink-200); }
.sig-party__meta{ display: block; margin-top: 8px; font-size: 11px; color: var(--text-tertiary); }

/* ---- Step 4: done ---- */
.auth-done{ text-align: center; }
.auth-done__icon{
  width: 60px; height: 60px; border-radius: 50%; margin-inline: auto;
  background: var(--success-50); color: var(--success-700);
  display: flex; align-items: center; justify-content: center;
}
.auth-done__title{ margin-top: var(--space-5); }

/* The promo panel's headline is decorative, not part of the document outline —
   it renders before the page's h1, so it is a <p> that looks like a heading. */
.minimal-main__brandhead{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h3); line-height: 1.2; color: var(--white);
}

/* Sign-up errors were written only to a visually-hidden live region, so a
   failed registration looked like the Continue button doing nothing. */
.auth-error{
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--danger-50); border: 1px solid var(--danger-500);
  border-radius: var(--radius-md);
  font-size: var(--text-small); line-height: 1.55; color: var(--danger-700);
}
.auth-error[hidden]{ display: none; }
.auth-error a{ color: var(--danger-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Six-step stepper ----
   Adding the plan step makes six dots share the 440px card. The labels are
   the part that runs out of room first, not the dots. */
.auth-steps--compact .auth-steps__label{ font-size: 10px; }
@media (max-width: 480px){ .auth-steps--compact .auth-steps__label{ font-size: 9px; letter-spacing: -0.01em; } }

/* ---- Plan picker (sign-up step 4) ----
   A vertical stack, not a 2x2 grid: four columns inside a 440px card leaves
   each plan about 150px, which is not enough room to say what it is. Stacked,
   every card reads on one line — name on the left, price on the right — and
   the eye runs straight down the prices. */
.plan-picker{ border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }

.plan-option{
  position: relative; display: block; cursor: pointer;
  padding: var(--space-4);
  border: 1.5px solid var(--ink-100); border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.plan-option:hover{ border-color: var(--blue-300); }
/* The whole card is the target, so the selected state cannot rest on an 18px
   radio alone — the border and wash carry it. */
.plan-option.is-selected{ border-color: var(--blue-600); background: var(--blue-50); box-shadow: var(--shadow-sm); }
/* Keyboard focus lands on the input inside; put the ring on the card. */
.plan-option:focus-within{ border-color: var(--blue-600); box-shadow: var(--shadow-focus); }
.plan-option__radio{
  position: absolute; top: 18px; left: var(--space-4);
  width: 18px; height: 18px; margin: 0; accent-color: var(--blue-600);
}
.plan-option__radio:focus-visible{ outline: none; }
.plan-option__body{ display: block; padding-left: 30px; }

.plan-option__head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.plan-option__name{
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: var(--tracking-h); color: var(--text-primary);
}
.plan-option__tag{
  margin-left: 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--blue-600); white-space: nowrap;
}
/* Amount carries, unit recedes — "R99" is the number being compared, "per
   month" is the same on every paid row and should not compete with it. */
.plan-option__price{ display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; text-align: right; }
.plan-option__amount{
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.1; color: var(--text-primary);
}
.plan-option__unit{ margin-top: 2px; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.plan-option__desc{ display: block; margin-top: 6px; font-size: var(--text-micro); line-height: 1.5; color: var(--text-secondary); }
.plan-option__trial{
  display: inline-block; margin-top: 10px; padding: 3px 9px;
  border-radius: var(--radius-full); background: var(--success-50); color: var(--success-700);
  font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}

.plan-picker__vat{ margin-top: var(--space-4); font-size: 11px; line-height: 1.55; color: var(--text-tertiary); }
.plan-picker__vat a{ color: var(--blue-600); font-weight: 600; }
.plan-picker__vat a:hover{ color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 480px){
  .plan-option{ padding: var(--space-3); }
  .plan-option__radio{ top: 14px; left: var(--space-3); }
  .plan-option__body{ padding-left: 26px; }
  .plan-option__head{ flex-wrap: wrap; }
}