/* Kaligraf Design — Form Elements
   All form element styles: input, textarea, select, button, checkbox, radio, pill.
   Validation states: empty, focus, filled, error, success, disabled.
   Dark-background variant for START A PROJECT page.
   Depends on: design-system.css, typography.css
   Source: spec/phase-2/00-design-foundation.md §5
           spec/phase-2/07-start.md
           spec/phase-4/07-start-visual.md */

/* ══════════════════════════════════════════════════════════
   FORM LAYOUT
   ══════════════════════════════════════════════════════════ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--component-gap-md);
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   LABEL
   Always above the input — never inside. No exceptions.
   Source: spec/phase-2/00-design-foundation.md §5
   ══════════════════════════════════════════════════════════ */

.form__label {
  display: block;
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 600;
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body-sm);
  color: var(--color-text-on-light);
}

.form__label--required::after {
  content: ' *';
  color: var(--color-error);
}

/* ══════════════════════════════════════════════════════════
   HELPER TEXT & ERROR MESSAGE
   ══════════════════════════════════════════════════════════ */

.form__helper {
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 400;
  color: var(--color-text-on-light-muted);
  display: none;
}

.form__group:focus-within .form__helper {
  display: block;
}

.form__error {
  display: none;
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 400;
  color: var(--color-error);
  align-items: center;
  gap: 4px;
}

.form__error.is-visible {
  display: flex;
}

.form__error::before {
  content: '⚠';
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   INPUT & TEXTAREA
   ══════════════════════════════════════════════════════════ */

.form__input,
.form__textarea,
.form__select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-family-body);
  font-size: var(--size-body-md);
  font-weight: 400;
  line-height: var(--lh-body-md);
  color: var(--color-text-on-light);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border-on-light);
  border-radius: var(--border-radius-input);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 150ms var(--ease-standard),
    box-shadow 150ms var(--ease-standard);
}

/* Placeholder: body-md, muted, no italics */
.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-on-light-muted);
  font-style: normal;
}

/* Focus state */
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

/* Filled state (controlled via JS adding .is-filled) */
.form__input.is-filled,
.form__textarea.is-filled {
  border-color: var(--color-border-on-light);
}

/* Error state */
.form__input.is-error,
.form__textarea.is-error,
.form__select.is-error {
  border: 2px solid var(--color-error);
  padding: 11px 15px; /* compensate for wider border */
}

/* Success state */
.form__input.is-success,
.form__textarea.is-success {
  border-color: var(--color-success);
}

/* Disabled state */
.form__input:disabled,
.form__textarea:disabled,
.form__select:disabled {
  border-color: rgba(26, 26, 26, 0.08);
  color: var(--color-text-on-light-muted);
  cursor: not-allowed;
  background-color: rgba(26, 26, 26, 0.04);
}

.form__group:has(:disabled) .form__label {
  opacity: 0.4;
}

/* Textarea: no fixed height — expands with content */
.form__textarea {
  resize: vertical;
  min-height: 120px;
}

/* ══════════════════════════════════════════════════════════
   SELECT DROPDOWN
   Custom-styled via appearance: none + ::after arrow.
   ══════════════════════════════════════════════════════════ */

.form__select-wrapper {
  position: relative;
}

.form__select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: var(--color-text-on-light-muted);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.form__select {
  cursor: pointer;
  padding-right: 40px;
}

/* ══════════════════════════════════════════════════════════
   NATIVE CHECKBOX & RADIO
   Accessible base — used for non-pill contexts.
   ══════════════════════════════════════════════════════════ */

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.form__check-input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--color-border-on-light);
  border-radius: 2px;
  background-color: var(--color-bg-secondary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 150ms var(--ease-standard),
              border-color 150ms var(--ease-standard);
}

input[type="radio"].form__check-input {
  border-radius: 50%;
}

.form__check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
}

input[type="radio"].form__check-input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='2.5' fill='white'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}

.form__check-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.form__check-label {
  font-family: var(--font-family-body);
  font-size: var(--size-body-md);
  font-weight: 400;
  color: var(--color-text-on-light);
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   PILL SELECTORS
   Used for: market checkboxes + scope radios on START page.
   Each option is a pill with border → accent-filled on selection.
   Source: spec/phase-2/07-start.md §4
   ══════════════════════════════════════════════════════════ */

.form__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hide native input, use label as the interactive surface */
.form__pill-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form__pill-label {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  font-family: var(--font-family-body);
  font-size: var(--size-body-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-text-on-light);
  border: 1px solid var(--color-border-on-light);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease-standard),
    border-color 150ms var(--ease-standard),
    color 150ms var(--ease-standard);
}

/* Hover state (unselected) */
.form__pill-label:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Selected state */
.form__pill-input:checked + .form__pill-label {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

/* Focus visible */
.form__pill-input:focus-visible + .form__pill-label {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* "Other" text field that appears on selection */
.form__pill-other {
  display: none;
  margin-top: 8px;
}

.form__pill-other.is-visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   FORM SUBMIT BUTTON
   Inherits .btn--primary; wrapped here for form context.
   ══════════════════════════════════════════════════════════ */

.form__submit {
  align-self: flex-start;
  margin-top: var(--component-gap-sm);
}

/* ══════════════════════════════════════════════════════════
   DARK BACKGROUND VARIANT
   Used on: START A PROJECT page (full Indigo background).
   Toggle with: .form--dark on the .form element.
   Source: spec/phase-2/00-design-foundation.md §5
   ══════════════════════════════════════════════════════════ */

.form--dark .form__label {
  color: var(--color-text-on-dark-muted);
}

.form--dark .form__label--required::after {
  color: var(--color-error);
}

.form--dark .form__input,
.form--dark .form__textarea,
.form--dark .form__select {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--color-border-on-dark);
  color: var(--color-text-on-dark);
}

.form--dark .form__input::placeholder,
.form--dark .form__textarea::placeholder {
  color: var(--color-text-on-dark-muted);
}

.form--dark .form__input:focus,
.form--dark .form__textarea:focus,
.form--dark .form__select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20);
}

.form--dark .form__input.is-error,
.form--dark .form__textarea.is-error {
  border-color: var(--color-error);
}

.form--dark .form__input:disabled,
.form--dark .form__textarea:disabled {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-dark-muted);
}

.form--dark .form__check-input {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--color-border-on-dark);
}

.form--dark .form__check-label {
  color: var(--color-text-on-dark);
}

/* Dark pill variant */
.form--dark .form__pill-label {
  color: var(--color-text-on-dark-muted);
  border-color: var(--color-border-on-dark);
}

.form--dark .form__pill-label:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.form--dark .form__pill-input:checked + .form__pill-label {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-dark);
}

.form--dark .form__select-wrapper::after {
  background-color: var(--color-text-on-dark-muted);
}

.form--dark .form__helper {
  color: var(--color-text-on-dark-muted);
}

/* ══════════════════════════════════════════════════════════
   FORM SUCCESS STATE
   Full-form success (not per-field) — replaces the form.
   The one motion execution on START A PROJECT that matters.
   ══════════════════════════════════════════════════════════ */

.form__success {
  display: none;
  text-align: center;
  padding: var(--section-pad-sm) var(--component-gap-lg);
  animation: fade-in-enter 400ms var(--ease-standard) forwards;
}

.form__success.is-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--component-gap-md);
}

.form__success-heading {
  font-family: var(--font-family-display);
  font-size: var(--size-h2);
  font-weight: 700;
  color: var(--color-text-on-dark);
}

.form__success-body {
  font-family: var(--font-family-body);
  font-size: var(--size-body-md);
  color: var(--color-text-on-dark-muted);
  max-width: 480px;
}