/* ==========================================================================
   Account forms (SITE-1466): the look of the free signup flow and the login
   pages, from Daniel's free signup mock (Oct 27, 2026) on the --ti-* tokens.
   Loads after tokens.css.

   - Standalone pages put .ac on <body>: FreeAccountSignup.html (plus
     free-signup.css for its two columns and cards),
     FreeAccountSignupAcknowledgement.html, FreeAccountSignupEmailConfirmation.html.
   - Login, ForgottenPassword and ResetPassword render inside the core header
     and footer, so their template's <section> is the .ac. The core header is
     hidden (each template draws the same logo bar) and the footer is darkened.
     main.css styles body, headings, .form-control and .login-page (Login keeps
     that class for login.js), hence the few !important and .ac-scoped rules.

   Markup: .ac-bar (logo), .ac-main > .ac-col (the 400px column): h1.ac-h1
   badge, p.ac-lead, p.ac-chip, .ac-card > form.

   Contract with core/js/main.js: validate_custom()/showMessage() treat an
   input's direct parent as its field group (.has-error on the group, message
   in its child .help-block, an icon inserted after .form-control), so inputs
   stay direct children of .ac-f. Its .toggle-password eye sits beside them.
   ========================================================================== */

.ac,
.ac *,
.ac *::before,
.ac *::after { box-sizing: border-box; }
.ac {
  font-family: var(--ti-font);
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  letter-spacing: normal;   /* main.css tracks body text 0.03rem */
  color: var(--ti-text);
  -webkit-font-smoothing: antialiased;
}
body.ac,
body:has(.ac) {
  margin: 0;
  background:
    radial-gradient(70% 55% at 80% 0%, var(--ti-orange-wash), transparent 70%),
    var(--ti-bg) !important;
}

/* Core header and footer (Login, ForgottenPassword, ResetPassword) */
body:has(.ac) #header { display: none; }
body:has(.ac) #footer {
  color: var(--ti-muted-mid);
  border-top: 1px solid var(--ti-border);
  background: var(--ti-bg-deep);
}
body:has(.ac) #footer a { color: var(--ti-muted); }
body:has(.ac) #footer a:hover,
body:has(.ac) #footer a:focus { color: var(--ti-text); }

/* Standalone pages: logo bar, then the content fills the screen */
.ac-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.ac-bar { flex: 0 0 auto; padding: 10px 24px; }
.ac-bar img { display: block; height: auto; }
.ac-main {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  padding: clamp(16px, 5vh, 56px) 24px 56px;
}

/* The column: badge, lead, chips and card centred on one 400px width */
.ac-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

/* H1 as an achievement badge, as wide as its text */
.ac .ac-h1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 14px 6px 7px;
  font-family: inherit;
  font-size: var(--ti-fs-h3);
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-track-snug);
  text-align: center;
  color: var(--ti-on-accent);
  border-radius: var(--ti-radius-pill);
  background: linear-gradient(180deg, var(--ti-amber), var(--ti-orange) 60%);
  box-shadow: var(--ti-shadow-orange);
}
.ac-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  font-size: var(--ti-fs-sm);
  color: var(--ti-text);
  border-radius: 50%;
  background: var(--ti-shade);
}
.ac-lead {
  margin: 0 0 14px;
  font-size: var(--ti-fs-lg);
  font-weight: var(--ti-fw-medium);
  line-height: var(--ti-lh-snug);
  color: var(--ti-text-soft);
  text-align: center;
  text-wrap: pretty;
}

/* Proof chips above and below the card */
.ac-chip { width: 100%; margin: 0 0 10px; text-align: center; }
.ac-chip--under { margin: 10px 0 0; }
.ac-chip span {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--ti-fs-xs);
  font-weight: var(--ti-fw-semibold);
  line-height: var(--ti-lh-snug);
  letter-spacing: var(--ti-track-caps-sm);
  color: var(--ti-amber);
  border: 1px solid var(--ti-orange-line);
  border-radius: var(--ti-radius-pill);
  background: var(--ti-overlay-2);
}

/* Card */
.ac-card {
  width: 100%;
  padding: 16px 20px 18px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  background: var(--ti-card);
  box-shadow: var(--ti-shadow-md);
}
.ac .ac-card h2 {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: var(--ti-fs-xl);
  font-weight: var(--ti-fw-bold);
  line-height: var(--ti-lh-tight);
  text-align: center;
  color: var(--ti-text);
}

/* Links: the card's top line (the other way in), and small lines under it */
.ac-top { margin: 0 0 8px; font-size: var(--ti-fs-sm); text-align: center; }
.ac-links { margin: 12px 0 0; font-size: var(--ti-fs-sm); text-align: center; color: var(--ti-muted); }
.ac-forgot { margin: -2px 0 12px; font-size: var(--ti-fs-sm); text-align: right; }
.ac-top a,
.ac-links a,
.ac-forgot a { font-weight: var(--ti-fw-semibold); color: var(--ti-orange); text-decoration: none; }
.ac-top a:hover,
.ac-top a:focus,
.ac-links a:hover,
.ac-links a:focus,
.ac-forgot a:hover,
.ac-forgot a:focus { color: var(--ti-orange-hot); text-decoration: underline; }

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

/* Fields (main.css gives .form-control a 5px radius !important and tall padding) */
.ac-f { position: relative; margin: 0 0 8px; }
.ac-f .form-control {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  font: inherit;
  font-size: var(--ti-fs-base);
  color: var(--ti-text);
  border: 1px solid var(--ti-border-strong);
  border-radius: var(--ti-radius-sm) !important;
  background: var(--ti-bg);
  box-shadow: none;
}
.ac-f .form-control::placeholder { color: var(--ti-muted); opacity: 1; }
.ac-f .form-control:focus {
  outline: none;
  color: var(--ti-text);
  border-color: var(--ti-orange);
  background: var(--ti-bg);
  box-shadow: 0 0 0 3px var(--ti-orange-dim);
}
.ac-f.has-error .form-control { border-color: var(--ti-red); }
.ac-f .help-block { display: block; font-size: var(--ti-fs-sm); line-height: var(--ti-lh-snug); color: var(--ti-red); }
.ac-f .help-block:not(:empty) { margin-top: 5px; }
/* showMessage() inserts an exclamation icon after the input; the red border
   and message already say it. */
.ac-f .form-control-feedback { display: none; }
/* .ac-f--pw: password with main.js's eye over the input's right end.
   showMessage()/removeMessage() set an inline right on the eye to clear that
   icon, hence !important. */
.ac-f--pw .form-control { padding-right: 44px; }
.ac-f .toggle-password {
  position: absolute;
  top: 0;
  right: 2px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 42px;
  font-size: var(--ti-fs-md);
  color: var(--ti-muted);
  cursor: pointer;
}
.ac-f .toggle-password:hover { color: var(--ti-text); }
/* The eye is drawn here rather than by its Font Awesome classes: the Font
   Awesome kit answers 403, so the glyph never showed. main.js swaps
   fa-eye / fa-eye-slash on click. */
.ac-f .toggle-password::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ac-f .toggle-password.fa-eye-slash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* Buttons */
.ac-btn,
.ac-btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-size: var(--ti-fs-lg);
  font-weight: var(--ti-fw-black);
  line-height: var(--ti-lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--ti-radius-sm);
  transition: background var(--ti-dur-fast), color var(--ti-dur-fast), border-color var(--ti-dur-fast);
}
.ac-btn { margin-top: 4px; color: var(--ti-on-accent); border: 0; background: var(--ti-orange); }
.ac-btn:hover,
.ac-btn:focus { color: var(--ti-on-accent); text-decoration: none; background: var(--ti-orange-hot); }
/* Quieter action (Resend the email) */
.ac-btn2 { color: var(--ti-amber); border: 1px solid var(--ti-orange-line); background: var(--ti-orange-dim); }
.ac-btn2:hover,
.ac-btn2:focus { color: var(--ti-text); text-decoration: none; border-color: var(--ti-orange); }
.ac-btn:focus-visible,
.ac-btn2:focus-visible { outline: 2px solid var(--ti-text); outline-offset: 2px; }
.ac-btn[disabled],
.ac-btn2[disabled] { cursor: progress; opacity: 0.7; }
.ac-btn .loading:empty { display: none; }

/* Messages: the recovery email sent (forgotten-password.js fills
   .recovery-block), the account confirmation result, the resend status */
.ac-note:empty { display: none; }
.ac-note:not(:empty),
.ac .recovery-block:not(:empty) {
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: var(--ti-fs-base);
  line-height: var(--ti-lh-body);
  text-align: center;
  color: var(--ti-text);
  border: 1px solid var(--ti-border-strong);
  border-radius: var(--ti-radius-sm);
  background: var(--ti-overlay-2);
}
.ac .recovery-block:not(:empty) { border-color: var(--ti-green-line); background: var(--ti-green-dim); }
.ac-status { min-height: 1.4em; margin: 10px 0 0; font-size: var(--ti-fs-sm); line-height: var(--ti-lh-snug); text-align: center; color: var(--ti-text-subtle); }

@media (max-width: 560px) {
  .ac-bar { padding: 10px 16px; }
  .ac-main { padding: 8px 16px 40px; }
  .ac-card { padding: 16px; }
}