/*
  Sign-up / sign-in / verification flow, and the post-signup credits pop-up.
  Loaded per-view via content_for :view_css (same pattern as heystack_one.css).
  Buttons reuse the shared .cta / .cta-secondary / .cta-primary / .cta-ghost-outline
  classes; this file only tunes their size to the flow's spec and adds the flow's
  form, pill, and modal styles.
*/
@font-face { font-family: 'Gustavo'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/Gustavo-Regular.woff) format('woff'); }
@font-face { font-family: 'Gustavo'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/Gustavo-Medium.woff) format('woff'); }
@font-face { font-family: 'Gustavo'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/Gustavo-Bold.woff) format('woff'); }

/* The app's base styles set html { font-weight: 300 }; this flow is designed at 400. */
.hs-auth { background: #000; color: #fff; font-family: 'Gustavo', Arial, sans-serif; font-weight: 400; min-height: 72vh; padding: 26px 16px 56px; }
.hs-auth *, .hs-auth *::before, .hs-auth *::after { box-sizing: border-box; }
.hs-auth [hidden] { display: none !important; }
.hs-auth a:focus-visible, .hs-auth button:focus-visible, .hs-auth input:focus-visible, .hs-auth [tabindex]:focus-visible { outline: 2px solid #ccff00; outline-offset: 2px; }

.hs-auth-col { width: 480px; max-width: 100%; margin: 0 auto; }
.hs-auth-col--code { width: 520px; }
.hs-auth--center { display: flex; flex-direction: column; justify-content: center; }
.hs-auth-col--wide { width: 900px; }
.hs-auth h1 { font-family: 'Gustavo', Arial, sans-serif; font-weight: 600; font-size: 29px; line-height: 1.15; margin: 0 0 8px; color: #fff; }
.hs-auth-sub { font-size: 15px; color: #a1a1aa; margin: 0 0 20px; }
.hs-auth-muted { font-family: 'Inter', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #a1a1aa; }
.hs-auth-note { font-family: 'Inter', Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #71717a; margin: 0; }
.hs-auth-note--spaced { margin-bottom: 20px; }
.hs-auth-link { color: #ccff00; font-weight: 600; text-decoration: underline; }
.hs-auth-link:hover { color: #d9ff4d; }
.hs-auth-switch { font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #a1a1aa; text-align: center; }
.hs-auth-switch a { color: #fff; font-weight: 600; }
.hs-auth-switch a:hover { color: #ccff00; }

/* Promo banner on the sign-up form */
.hs-auth-banner { background: linear-gradient(90deg, #ccff00 0%, #1cb580 100%); border-radius: 8px; padding: 11px 14px; margin: 14px 0 20px; color: #000; font-size: 13px; line-height: 1.45; }
.hs-auth-banner p { margin: 0; }
.hs-auth-banner p + p { margin-top: 8px; }
.hs-auth-banner strong { font-weight: 600; }
.hs-auth-banner--credits { padding: 11px 14px; margin: 14px 0 18px; }
.hs-auth-banner-headline { display: block; font-family: 'Gustavo', Arial, sans-serif; font-size: 18px; line-height: 1.5; color: #000; white-space: nowrap; }
.hs-auth-banner-sub { display: block; margin-top: 2px; font-family: 'Inter', Arial, sans-serif; font-size: 12.5px; line-height: 1.3; color: #52525b; }

/* Form fields */
.hs-auth-form { display: flex; flex-direction: column; gap: 12px; }
.hs-auth-form--signin { margin-top: 14px; }
.hs-auth-row { display: flex; gap: 16px; }
.hs-auth-row > .hs-auth-field { flex: 1; min-width: 0; }
.hs-auth-field { display: flex; flex-direction: column; gap: 6px; }
.hs-auth-field label, .hs-auth-field > .hs-auth-label { font-size: 13px; color: #d4d4d8; }
/* Rails wraps a field with errors (and its label) in div.field_with_errors; keep the layout. */
.hs-auth-field .field_with_errors, .hs-auth-check .field_with_errors { display: contents; }
.hs-auth-field .hs-auth-optional { font-size: 10px; color: #71717a; }
.hs-auth-input { height: 40px; width: 100%; border-radius: 8px; background: #fff; border: 1px solid transparent; padding: 0 14px; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #000; }
.hs-auth-input::placeholder { color: #71717a; }
.hs-auth-input[aria-invalid="true"] { border-color: #f87171; }
.hs-auth-hint { font-family: 'Inter', Arial, sans-serif; font-size: 12px; color: #71717a; margin: 0; }
.hs-auth-error-text { font-family: 'Inter', Arial, sans-serif; font-size: 13px; color: #f87171; margin: 0; }
/* Sign-up field messages (SignupFormHelper / signup_form_controller.js) sit right under their field. */
.hs-auth-field-error { line-height: 1.4; }
.hs-auth-form > .hs-auth-field-error { margin-top: -4px; }
.hs-auth-divider { display: flex; align-items: center; gap: 14px; font-family: 'Inter', Arial, sans-serif; font-size: 13px; color: #a1a1aa; }
.hs-auth-divider::before, .hs-auth-divider::after { content: ''; flex: 1; height: 1px; background: #27272a; }

/* Custom checkbox (terms) */
.hs-auth-check { display: flex; align-items: center; gap: 10px; font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #d4d4d8; }
.hs-auth-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid #6e6e76; background: transparent; flex-shrink: 0; cursor: pointer; display: inline-grid; place-content: center; }
.hs-auth-check input[type="checkbox"]::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #000; border-bottom: 2.5px solid #000; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.hs-auth-check input[type="checkbox"]:checked { background: #ccff00; border-color: #ccff00; }
.hs-auth-check input[type="checkbox"]:checked::after { opacity: 1; }
.hs-auth-check label { cursor: pointer; }
.hs-auth-check a { color: #ccff00; font-weight: 600; }
.hs-auth-required { color: #71717a; }

/* Alerts */
.hs-auth-alert { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-family: 'Inter', Arial, sans-serif; font-size: 14px; line-height: 1.45; border: 1px solid; }
.hs-auth-alert strong { display: block; font-weight: 600; }
.hs-auth-alert-line { display: block; }
.hs-auth-alert ul { margin: 4px 0 0; padding-left: 18px; }
.hs-auth-alert--error { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.45); color: #fecaca; }
.hs-auth-alert--info { background: rgba(204, 255, 0, 0.08); border-color: rgba(204, 255, 0, 0.4); color: #ecfccb; }

/* Buttons: size the shared .cta classes to the flow spec */
.hs-auth .cta { height: auto; min-height: 0; padding: 11px 24px; font-size: 15px; line-height: 1.4; gap: 10px; flex-wrap: nowrap; }
.hs-auth .cta-block { width: 100%; }
.hs-auth .cta-ghost-outline { border-color: #52525b; color: #fff; padding: 10px 22px; }
.hs-auth .cta-ghost-outline:hover { border-color: #a1a1aa; }
.hs-auth .cta:disabled, .hs-auth .cta[aria-disabled="true"] { background: #2e3313; color: #6b7280; cursor: default; }
.hs-auth .cta:disabled:hover, .hs-auth .cta[aria-disabled="true"]:hover { background: #2e3313; }
.hs-auth-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }

/* Verification code boxes */
.hs-auth-codes { display: flex; gap: 10px; margin: 0 0 20px; }
.hs-auth-codes input { width: 58px; max-width: calc((100% - 50px) / 6); height: 62px; border-radius: 8px; background: #26262a; border: 1px solid transparent; text-align: center; font-family: 'Gustavo', Arial, sans-serif; font-weight: 800; font-size: 24px; color: #fff; padding: 0; }
.hs-auth-codes input:focus { border-color: #ccff00; outline: none; }
.hs-auth-codes--invalid input { border-color: #f87171; }
.hs-auth-resend { margin: 0 0 34px; }
.hs-auth-resend a { color: #ccff00; font-weight: 600; }

/* Post-signup credits pop-up on the stacks page (batches/_signup_credits_popup).
   --hs-credits-gap and --hs-credits-banner-pad are set by signup_credits_popup_controller.js
   on wide screens so every view of the pop-up is the same height. */
.hs-credits { font-family: 'Gustavo', Arial, sans-serif; font-weight: 400; }
.hs-credits *, .hs-credits *::before, .hs-credits *::after { box-sizing: border-box; }
.hs-credits [hidden] { display: none !important; }
.hs-credits a:focus-visible, .hs-credits button:focus-visible, .hs-credits input:focus-visible { outline: 2px solid #ccff00; outline-offset: 2px; }
html.hs-credits-locked, html.hs-credits-locked body { overflow: hidden; }

.hs-credits-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 14px 14px; background: rgba(0, 0, 0, 0.62); }
.hs-credits-dialog { position: relative; width: 640px; max-width: 100%; max-height: calc(90vh - 28px); overflow: auto; overscroll-behavior: contain; background: #000; color: #fff; border-radius: 16px; padding: 22px 30px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); }
.hs-credits-dialog:focus { outline: none; }
.hs-credits-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: #a1a1aa; cursor: pointer; padding: 0; }
.hs-credits-close:hover { color: #fff; background: #1a1a1f; }

.hs-credits h1 { font-family: 'Gustavo', Arial, sans-serif; font-weight: 600; font-size: 28px; line-height: 1.2; margin: 0 0 calc(8px + var(--hs-credits-gap, 0px)); padding-right: 26px; color: #fff; }
.hs-credits-sub { font-family: 'Inter', Arial, sans-serif; font-size: 14px; color: #a1a1aa; margin: 0 0 calc(18px + var(--hs-credits-gap, 0px)); }

/* Progress bar: the fill is a second copy of the text on the gradient, clipped to the share earned. */
.hs-credits-banner { position: relative; overflow: hidden; border-radius: 12px; background: #1a1a1f; color: #fff; margin-bottom: calc(18px + var(--hs-credits-gap, 0px)); }
.hs-credits-banner-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #ccff00 0%, #1cb580 100%); color: #000; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hs-credits-banner-inner { position: relative; padding: calc(12px + var(--hs-credits-banner-pad, 0px)) 18px; }
.hs-credits-count { font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hs-credits-of { font-size: 16px; font-weight: 600; opacity: 0.7; }
.hs-credits-left { font-family: 'Inter', Arial, sans-serif; font-size: 13px; line-height: 1.3; margin-top: 4px; opacity: 0.85; }
.hs-credits-milestone { position: absolute; top: 0; bottom: 0; left: 75%; width: 1px; background: currentColor; opacity: 0.25; }

/* Tasks */
.hs-credits-task { display: flex; flex-direction: column; background: #1a1a1f; border-radius: 12px; padding: 18px; margin-bottom: calc(10px + var(--hs-credits-gap, 0px)); }
.hs-credits-task-head { display: flex; align-items: center; gap: 14px; }
.hs-credits-tick { width: 26px; height: 26px; border-radius: 999px; background: #3f3f46; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.hs-credits-tick svg { visibility: hidden; }
.hs-credits-task-text { flex: 1; min-width: 0; }
.hs-credits-task h2 { font-family: 'Gustavo', Arial, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.25; margin: 0; color: #fff; }
.hs-credits-task-desc { font-family: 'Inter', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #a1a1aa; margin: 0; }
.hs-credits-task-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.hs-credits-plus { font-family: 'Inter', Arial, sans-serif; font-weight: 600; font-size: 13px; color: #ccff00; background: #2a3300; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.hs-credits-plus--below { display: none; margin-top: 6px; }
.hs-credits-task.is-done { flex-direction: row; align-items: center; padding: 10px 16px; margin-bottom: 8px; }
.hs-credits-task.is-done .hs-credits-tick { background: #ccff00; }
.hs-credits-task.is-done .hs-credits-tick svg { visibility: visible; }
.hs-credits-task.is-done h2 { font-size: 16px; }
.hs-credits-task.is-done .hs-credits-task-desc, .hs-credits-task.is-done .hs-credits-plus, .hs-credits-task.is-done .hs-credits-task-side { display: none; }
.hs-credits-task-body { margin-top: 8px; padding-top: 8px; background: linear-gradient(#26262a, #26262a) top / 100% 2px no-repeat; }

/* Buttons: the shared .cta classes, sized to the pop-up */
.hs-credits .cta { height: auto; min-height: 0; padding: 11px 24px; font-family: 'Inter', Arial, sans-serif; font-size: 15px; line-height: 1.4; flex-wrap: nowrap; }
.hs-credits .cta-block { width: 100%; }
.hs-credits .hs-credits-start { font-size: 14px; padding: 10px 18px; white-space: nowrap; }
.hs-credits .cta-secondary[aria-disabled="true"], .hs-credits .cta-secondary:disabled { background: #2e3313; color: #6b7280; cursor: default; }
.hs-credits .cta-primary[aria-disabled="true"], .hs-credits .cta-primary:disabled { opacity: 0.45; cursor: default; }
.hs-credits-start.is-glowing { animation: hs-credits-glow 1.6s ease-out infinite; }
@keyframes hs-credits-glow { 0% { box-shadow: 0 0 0 0 rgba(45, 117, 255, 0.65); } 70% { box-shadow: 0 0 0 12px rgba(45, 117, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 117, 255, 0); } }
.hs-credits-finish { margin-top: calc(14px + var(--hs-credits-gap, 0px)); }

/* Name + business name */
.hs-credits-profile { display: flex; flex-direction: column; gap: calc(12px + var(--hs-credits-gap, 0px)); }
.hs-credits-names { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-credits-names > .hs-auth-field { flex: 1; min-width: 130px; }

/* Questions: one per page; later pages keep the first page's height */
.hs-credits-page { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; min-width: 0; }
.hs-credits-question { font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; margin: 0 0 10px; padding: 0; }
.hs-credits-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-credits-pills--even { display: grid; grid-template-columns: repeat(2, 1fr); }
.hs-credits-pill { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 16px; line-height: 1.2; border: 1px solid transparent; border-radius: 999px; background: #26262a; color: #fff; font-size: 15px; cursor: pointer; user-select: none; }
.hs-credits-pill:hover { border-color: #52525b; }
.hs-credits-pill:has(.hs-credits-pill-input:checked) { border-color: #ccff00; }
.hs-credits-pill:has(.hs-credits-pill-input:focus-visible) { outline: 2px solid #ccff00; outline-offset: 2px; }
.hs-credits-pill-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.hs-credits-box { width: 18px; height: 18px; border-radius: 5px; background: #3f3f46; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.hs-credits-box svg { visibility: hidden; }
.hs-credits-pill-input:checked + .hs-credits-box { background: #ccff00; }
.hs-credits-pill-input:checked + .hs-credits-box svg { visibility: visible; }
.hs-credits-footer { margin-top: auto; padding-top: 12px; }
.hs-credits-page .hs-auth-error-text { margin-top: 10px; }

/* Shown after the pop-up is skipped or closed; lifted above the credits HUD. */
.hs-credits-fab.cta { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom) + var(--hs-credits-fab-lift, 0px)); z-index: 45; height: auto; min-height: 0; padding: 11px 20px; font-family: 'Inter', Arial, sans-serif; font-size: 15px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.hs-credits-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }

@media (max-width: 640px) {
  .hs-credits-dialog { width: 460px; padding: 20px 18px; }
  .hs-credits h1 { font-size: 22px; }
  .hs-credits-task-desc, .hs-credits-plus--side { display: none; }
  .hs-credits-plus--below { display: inline-block; }
  .hs-credits-pills--even { display: flex; flex-direction: column; }
  .hs-credits .hs-auth-input { height: 44px; font-size: 16px; }
  .hs-credits .cta { padding: 13px 24px; }
  .hs-credits .hs-credits-start { padding: 10px 18px; }
}

/* Phones: the sign-up form keeps the desktop design at a smaller scale, and the credits
   banner wraps instead of shrinking to one line. */
@media (max-width: 640px) {
  .hs-auth--signup { padding: 20px 20px 26px; min-height: 0; }
  .hs-auth--signup h1 { font-size: 23px; }
  .hs-auth--signup .hs-auth-input { height: 44px; font-size: 16px; }
  .hs-auth--signup .cta { padding: 13px 24px; }
  .hs-auth--signup .hs-auth-row { gap: 12px; }
  .hs-auth-banner-headline { white-space: normal; }
  .hs-auth-note--spaced { font-size: 12.5px; margin-bottom: 18px; }
}