/* 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)}