/* ==========================================================================
   Kuura Forms — Starter CSS
   --------------------------------------------------------------------------
   This stylesheet controls public Kuura Forms only. It is intentionally
   divided into clearly named sections so you can copy the whole file to an
   AI assistant and ask it to restyle the form without changing Forms logic.

   Main wrapper:        .kuura-form
   Field wrapper:       .kf-public-field
   Step:                .kf-public-step
   Upload area:         .kf-drop
   Slider:              .kf-range
   Math challenge:      .kf-math
   Navigation buttons:  .kf-step-actions
   Status / errors:     .kf-form-status, .kf-error

   RESPONSIVE CONTAINER QUERIES
   --------------------------------------------------------------------------
   640px — Compact form spacing when the FORM itself is 640px wide or less.
   320px — Very narrow form layout. Previous / Next / Send navigation stacks
           vertically only when the FORM itself is 320px wide or less.

   Above 320px container width, Previous stays on the left and Next / Send
   stays on the right on the same row.

   WHY CONTAINER QUERIES ARE USED
   --------------------------------------------------------------------------
   Kuura Forms is an embeddable component. Width-based layout must react to
   the space available to the form itself, not to the device/browser viewport.
   A form may be narrow inside a desktop column or wide on a phone layout.

   WHERE TO FIND RESPONSIVE RULES
   --------------------------------------------------------------------------
   All width-based @container rules are kept together in the RESPONSIVE
   section at the END OF THIS FILE.

   When adding, removing or changing a width breakpoint:
   1. Update this responsive reference at the top of the file.
   2. Add or change the actual @container rule in the RESPONSIVE section.
   3. Do not use viewport-width @media queries for component layout.
   4. @media remains appropriate for user/system preferences such as
      prefers-reduced-motion, if needed in the future.

   AI / DEVELOPER NOTE
   --------------------------------------------------------------------------
   Keep this top-level documentation synchronized with the actual CSS.
   Temporary comments marked "KUURA CHANGE" explain recent development
   changes. They may be removed once those changes have been tested and
   confirmed. Keep the actual CSS rules unless intentionally changing them.
   ========================================================================== */

/* 1. FORM DESIGN TOKENS ---------------------------------------------------
   Change these first when you want a different overall look. */
.kuura-form {
  --kf-bg: #ffffff;
  --kf-text: #17202a;
  --kf-muted: #667085;
  --kf-line: #d9e1e8;
  --kf-line-focus: #6d8cff;
  --kf-accent: #17202a;
  --kf-accent-text: #ffffff;
  --kf-error: #b42318;
  --kf-soft: #f6f8fa;
  --kf-radius: 18px;
  --kf-radius-small: 13px;
  --kf-shadow: 0 16px 44px rgba(16, 24, 40, .08);

  /* KUURA CHANGE: width-based form layout uses the form as query container. */
  container-type: inline-size;

  width: 100%;
  max-width: 720px;
  color: var(--kf-text);
}

/* 2. STEPS --------------------------------------------------------------- */
.kf-public-step {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  background: var(--kf-bg);
  border: 1px solid var(--kf-line);
  border-radius: calc(var(--kf-radius) + 4px);
  box-shadow: var(--kf-shadow);
}
.kf-public-step[hidden] { display: none !important; }

/* 3. FIELD SPACING + LABELS --------------------------------------------- */
.kf-public-field { margin: 0 0 1.15rem; }
.kf-public-field > label {
  display: block;
  margin: 0 0 .45rem;
  font-weight: 650;
  line-height: 1.35;
}
.kf-public-field > label span[aria-hidden="true"] { color: var(--kf-error); }

/* 4. TEXT INPUTS, TEXTAREAS + SELECTS ----------------------------------- */
.kf-public-field input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]),
.kf-public-field textarea,
.kf-public-field select,
.kf-math input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: .78rem .95rem;
  color: var(--kf-text);
  background: var(--kf-bg);
  border: 1px solid var(--kf-line);
  border-radius: var(--kf-radius-small);
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.kf-public-field textarea { min-height: 140px; resize: vertical; }
.kf-public-field input:focus,
.kf-public-field textarea:focus,
.kf-public-field select:focus,
.kf-math input:focus {
  border-color: var(--kf-line-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kf-line-focus) 16%, transparent);
}

/* 5. RADIO + CHECKBOX CHOICES ------------------------------------------- */
.kf-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .45rem 0;
  cursor: pointer;
}
.kf-choice input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--kf-accent); }

/* 6. FILE UPLOAD / DROP AREA -------------------------------------------- */
.kf-drop {
  display: grid !important;
  place-items: center;
  gap: .65rem;
  min-height: 150px;
  padding: 1.25rem;
  text-align: center;
  background: var(--kf-soft);
  border: 2px dashed var(--kf-line);
  border-radius: var(--kf-radius);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.kf-drop:hover { border-color: var(--kf-line-focus); background: var(--kf-bg); }
.kf-drop input[type="file"] { max-width: 100%; font: inherit; }
.kf-drop strong { font-weight: 700; }

/* 7. SLIDER / RANGE ------------------------------------------------------ */
.kf-range { display: flex; align-items: center; gap: 1rem; }
.kf-range input[type="range"] { flex: 1; accent-color: var(--kf-accent); }
.kf-range output {
  min-width: 2.5rem;
  padding: .35rem .55rem;
  text-align: center;
  background: var(--kf-soft);
  border-radius: 999px;
  font-weight: 700;
}

/* 8. IMAGE MATH CHALLENGE ----------------------------------------------- */
.kf-math[hidden] { display: none !important; }
.kf-math {
  display: grid;
  gap: .45rem;
  margin: 1rem 0;
}
.kf-math > label { font-weight: 650; }
.kf-math-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.kf-math-row img { display: block; width: 120px; max-width: 100%; height: auto; border-radius: 8px; }
.kf-math-row input { width: 84px; max-width: 84px; min-height: 44px; margin: 0; }

/* 9. BUTTONS + STEP NAVIGATION ------------------------------------------ */
.kuura-form button {
  min-height: 46px;
  padding: .72rem 1.05rem;
  color: var(--kf-accent-text);
  background: var(--kf-accent);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.kuura-form button:hover { transform: translateY(-1px); }
.kuura-form button:active { transform: translateY(0); }
.kf-step-navigation { margin-top: 1.25rem; }

/* KUURA CHANGE: normal layout remains one row; narrow stacking is below. */
.kf-step-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  width: 100%;
}
.kf-step-actions__left,
.kf-step-actions__right { display: flex; align-items: center; min-width: 0; }
.kf-step-actions__left { justify-content: flex-start; }
.kf-step-actions__right { margin-left: auto; justify-content: flex-end; }
.kf-step-actions [data-kf-back] {
  color: var(--kf-text);
  background: var(--kf-soft);
  border: 1px solid var(--kf-line);
}
.kf-step-actions [data-kf-submit] {
  background: #2f9e44;
  border-color: #2f9e44;
  color: #fff;
}
.kf-step-actions [data-kf-submit]:hover {
  background: #27853a;
  border-color: #27853a;
}
.kf-required-note {
  margin-top: 14px;
  text-align: center;
  color: var(--kf-muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  opacity: .70;
}

/* 10. SUBMISSION STATES -------------------------------------------------- */
.kf-submit-state {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.kf-submit-state[hidden] { display: none !important; }
.kf-submit-state__inner { display: grid; justify-items: center; gap: .8rem; max-width: 640px; }
.kf-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--kf-muted) 28%, transparent);
  border-top-color: var(--kf-accent);
  border-radius: 50%;
  animation: kf-spin .8s linear infinite;
}
@keyframes kf-spin { to { transform: rotate(360deg); } }
.kf-success-message { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.35; }
.kf-reset-link {
  display: inline-block !important;
  font-size: .88rem;
  color: var(--kf-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* 11. INFORMATION + CONSENT --------------------------------------------- */
.kf-public-information { padding: .2rem 0 1rem; }
.kf-public-information h3 { margin: 0 0 .4rem; }
.kf-public-information p { margin: 0; color: var(--kf-muted); white-space: pre-line; }
.kf-consent { display: flex; gap: .65rem; align-items: flex-start; }
.kf-consent input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .22rem; }
.kf-consent span { min-width: 0; }
.kf-consent a { text-decoration: underline; }

/* 12. VALIDATION + FORM STATUS ------------------------------------------ */
.kf-error { margin-top: .3rem; color: var(--kf-error); font-size: .9rem; }
.kf-form-status { margin-top: 1rem; color: var(--kf-error); font-weight: 600; }
.kf-form-status:empty { display: none; }
.kf-invalid { border-color: var(--kf-error) !important; box-shadow: 0 0 0 1px var(--kf-error) !important; outline: none; }

/* 13. SECURITY HONEYPOT -------------------------------------------------
   Do not make this visible. Kuura's basic spam filter uses it. */
.kf-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; }

/* ==========================================================================
   14. RESPONSIVE
   --------------------------------------------------------------------------
   Width-based responsive behavior is documented at the TOP OF THIS FILE.
   Keep this section and the top-level responsive reference synchronized.
   ========================================================================== */

/* 640px FORM CONTAINER — Compact spacing -------------------------------- */
@container (max-width: 640px) {
  .kf-public-step {
    padding: 1rem;
    border-radius: var(--kf-radius);
  }
}

/* 320px FORM CONTAINER — Stack step navigation -------------------------- */
@container (max-width: 320px) {
  .kf-step-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .kf-step-actions__left,
  .kf-step-actions__right {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .kf-required-note { text-align: left; }
}


/* CONDITIONAL LOGIC ------------------------------------------------------ */
.kf-conditional { overflow: hidden; padding-left: 3px; padding-right: 3px; margin-left: -3px; margin-right: -3px; transition: max-height .15s ease, opacity .15s ease, transform .15s ease; }
.kf-conditional.kf-condition-hidden { opacity: 0; transform: translateY(-4px); max-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kf-conditional { transition: none !important; } }