/* Static, dependency-free equivalents of the Atelier Web design-system's
   React form/nav components (Input, Textarea, Select, Checkbox, LanguageToggle).
   Values match the components' inline styles 1:1 — see _ds_bundle.js. */

.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.field input,.field textarea,.field select{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;
  font-family:var(--font-sans);font-size:var(--size-body);color:var(--text-primary);
  outline:none;border-radius:0;width:100%;
}
.field input,.field select{
  border-bottom:1px solid var(--rule-medium);height:var(--control-height);
  padding:0 0 var(--space-2);transition:var(--transition-control);
}
.field input:focus,.field select:focus{border-color:var(--rule-strong)}
.field textarea{
  border:1px solid var(--rule-medium);padding:var(--space-3) var(--space-4);
  line-height:var(--leading-body);resize:vertical;transition:var(--transition-control);
}
.field textarea:focus{border-color:var(--rule-strong)}
.field-select{position:relative;display:flex;align-items:center}
.field-select select{padding-right:var(--space-6)}
.field-select i{position:absolute;right:0;bottom:12px;color:var(--text-muted);pointer-events:none}

.chkbox{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.chkbox input{position:absolute;opacity:0;width:0;height:0}
.chkbox-box{
  width:18px;height:18px;flex:0 0 auto;margin-top:2px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--rule-medium);
  background:transparent;color:var(--text-on-ink);transition:var(--transition-control);
}
.chkbox-box i{display:none}
.chkbox input:checked ~ .chkbox-box{border-color:var(--rule-strong);background:var(--surface-ink)}
.chkbox input:checked ~ .chkbox-box i{display:inline-flex}
.chkbox-label{font-family:var(--font-sans);font-size:var(--size-body-s);line-height:var(--leading-tight);color:var(--text-secondary)}

.langtog{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--size-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.langtog span{color:var(--rule-medium)}
.langtog button{background:transparent;border:0;padding:var(--space-1) 0;cursor:pointer;color:var(--text-muted);border-bottom:1px solid transparent;transition:var(--transition-control)}
.langtog button.on{color:var(--text-primary);border-color:var(--rule-strong)}
[data-theme="ink"] .langtog span{color:var(--rule-on-ink)}
[data-theme="ink"] .langtog button{color:var(--text-on-ink-muted)}
[data-theme="ink"] .langtog button.on{color:var(--text-on-ink);border-color:var(--ivory-100)}


/* Form runtime states */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{margin:0;font-family:var(--font-sans);font-size:var(--size-body-s);line-height:1.5;color:#8b2d2d;max-width:52ch}
.fp-form.is-sending{opacity:.72;pointer-events:none}
.fp-submit[disabled]{cursor:wait;opacity:.7}
.field input:invalid:not(:placeholder-shown),.field select:invalid{border-color:#a65a4b}
.chkbox a{text-decoration:underline;text-underline-offset:2px}

.form-status{font-size:13px;line-height:1.5;color:#8d3b2f;max-width:52ch}
.fp-form.is-sending .fp-submit{opacity:.72;cursor:wait}
.fp-submit:disabled{cursor:wait}