/* ============================================================
   36nine Design System : FORM CONTROLS (.fc- layer)
   Built on tokens.css + ds.css. Square geometry, hairline
   borders, corner-bracket focus, notched controls, Exo 2.
   Accessibility is a hard gate: visible focus, 44px targets,
   never color-only state, reduced-motion honored.
   Status tokens (--status-positive / --status-danger /
   --status-warn) are defined globally; referenced, not redefined.
   ============================================================ */

/* ---------- Local layout tokens ---------- */
:root {
  --fc-notch: 7px;                 /* button/CTA notch depth */
  --fc-target: 44px;               /* minimum tap/hit target */
}

/* ============================================================
   FIELD WRAPPER : label + control + helper + error
   ============================================================ */
.fc-field { display: flex; flex-direction: column; gap: var(--space-2); }

.fc-label {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.fc-label .fc-idx {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px; font-weight: var(--fw-bold);
  color: var(--fg-muted);
}
.fc-label .fc-req { color: var(--status-danger); font-weight: var(--fw-bold); }
.fc-label .fc-optional {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9px; letter-spacing: 0.06em; color: var(--fg-muted);
  text-transform: uppercase;
}

.fc-help { font-size: var(--text-xs); color: var(--fg-subtle); line-height: var(--lh-normal); }

.fc-error {
  display: none; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--status-danger); line-height: var(--lh-normal);
}
.fc-error svg { width: 13px; height: 13px; flex: 0 0 auto; }
.fc-field.is-error .fc-error { display: flex; }        /* red text + icon, never color alone */
.fc-field.is-error .fc-help  { display: none; }

.fc-success-note {
  display: none; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--status-positive); line-height: var(--lh-normal);
}
.fc-success-note svg { width: 13px; height: 13px; flex: 0 0 auto; } /* accent + check, never color alone */
.fc-field.is-success .fc-success-note { display: flex; }

/* ============================================================
   TEXT INPUT + TEXTAREA : corner-bracket focus frame
   Wrap control in .fc-iwrap to render L brackets on focus.
   ============================================================ */
.fc-iwrap { position: relative; display: block; }

.fc-input,
.fc-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0 var(--space-3);
  min-height: var(--fc-target);           /* 44px */
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
  -webkit-appearance: none; appearance: none;
}
.fc-textarea {
  padding: var(--space-3);
  min-height: 96px; resize: vertical; display: block;
}
.fc-input::placeholder,
.fc-textarea::placeholder { color: var(--fg-muted); }

.fc-input:hover:not(:disabled):not(:read-only),
.fc-textarea:hover:not(:disabled):not(:read-only) { border-color: var(--border-strong); }

/* Focus: hairline goes accent + programmatic corner-bracket frame */
.fc-input:focus-visible,
.fc-textarea:focus-visible {
  outline: none;
  border-color: var(--brand-creation);
}
.fc-iwrap:focus-within::before,
.fc-iwrap:focus-within::after,
.fc-iwrap:focus-within > .fc-c1,
.fc-iwrap:focus-within > .fc-c2 {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1.5px solid var(--brand-creation); pointer-events: none; z-index: 2;
}
.fc-iwrap:focus-within::before { top: -3px; left: -3px;  border-right: 0; border-bottom: 0; }
.fc-iwrap:focus-within::after  { top: -3px; right: -3px; border-left: 0;  border-bottom: 0; }
.fc-iwrap:focus-within > .fc-c1 { bottom: -3px; left: -3px;  border-right: 0; border-top: 0; }
.fc-iwrap:focus-within > .fc-c2 { bottom: -3px; right: -3px; border-left: 0;  border-top: 0; }

/* Fallback outline for controls used without the .fc-iwrap frame */
.fc-input:focus-visible,
.fc-textarea:focus-visible { outline: 2px solid var(--brand-creation); outline-offset: 2px; }
.fc-iwrap:focus-within .fc-input:focus-visible,
.fc-iwrap:focus-within .fc-textarea:focus-visible { outline: none; } /* brackets replace outline inside wrap */

/* Disabled + read-only */
.fc-input:disabled,
.fc-textarea:disabled {
  background: var(--bg-muted); color: var(--fg-muted);
  border-color: var(--border); cursor: not-allowed;
}
.fc-input:read-only,
.fc-textarea:read-only { background: var(--bg-muted); }

/* Error state on the field wrapper drives the control border (paired with .fc-error text+icon) */
.fc-field.is-error .fc-input,
.fc-field.is-error .fc-textarea {
  border-color: var(--status-danger);
  background: color-mix(in srgb, var(--status-danger) 8%, var(--bg));
}
.fc-field.is-error .fc-iwrap:focus-within::before,
.fc-field.is-error .fc-iwrap:focus-within::after,
.fc-field.is-error .fc-iwrap:focus-within > .fc-c1,
.fc-field.is-error .fc-iwrap:focus-within > .fc-c2 { border-color: var(--status-danger); }

.fc-field.is-success .fc-input,
.fc-field.is-success .fc-textarea { border-color: var(--status-positive); }

/* ============================================================
   SEARCH INPUT : leading icon, notched, optional clear
   ============================================================ */
.fc-search { position: relative; display: flex; align-items: center; }
.fc-search .fc-search-icon {
  position: absolute; left: var(--space-3); width: 15px; height: 15px;
  color: var(--fg-muted); pointer-events: none;
}
.fc-search .fc-input {
  padding-left: 34px; padding-right: 34px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fc-notch)),
             calc(100% - var(--fc-notch)) 100%, 0 100%);
}
.fc-search .fc-clear {
  position: absolute; right: 6px;
  width: 32px; height: 32px;                /* inner hit target within 44px field */
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--fg-muted); cursor: pointer;
}
.fc-search .fc-clear:hover { color: var(--fg); }
.fc-search .fc-clear svg { width: 13px; height: 13px; }
.fc-search .fc-clear:focus-visible { outline: 2px solid var(--brand-creation); outline-offset: 2px; }

/* ============================================================
   NATIVE-STYLED SELECT : square, hairline, custom caret
   ============================================================ */
.fc-select-wrap { position: relative; display: block; }
.fc-select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm); color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 0;
  padding: 0 36px 0 var(--space-3);
  min-height: var(--fc-target);
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.fc-select-wrap::after {                     /* caret chevron, structure not glyph */
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--fg-subtle);
  border-bottom: 1.5px solid var(--fg-subtle);
  transform: rotate(45deg); pointer-events: none;
}
.fc-select:hover:not(:disabled) { border-color: var(--border-strong); }
.fc-select:focus-visible { outline: 2px solid var(--brand-creation); outline-offset: 2px; border-color: var(--brand-creation); }
.fc-select:disabled { background: var(--bg-muted); color: var(--fg-muted); cursor: not-allowed; }
.fc-field.is-error .fc-select {
  border-color: var(--status-danger);
  background: color-mix(in srgb, var(--status-danger) 8%, var(--bg));
}

/* ============================================================
   CHECKBOX : square box, corner-bracket focus, check on set
   ============================================================ */
.fc-check {
  display: inline-flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--fc-target); padding: 6px 0;    /* 44px row target */
  cursor: pointer; font-size: var(--text-sm); color: var(--fg); line-height: var(--lh-normal);
}
.fc-check input {
  position: absolute; opacity: 0; width: 0; height: 0;  /* visually hidden, kept focusable */
}
.fc-check .fc-box {
  position: relative; flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 1px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 0;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.fc-check .fc-box::after {                    /* check mark, drawn not glyph */
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; opacity: 0;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.fc-check:hover input:not(:disabled) ~ .fc-box { border-color: var(--brand-creation); }
.fc-check input:checked ~ .fc-box {
  background: var(--brand-creation); border-color: var(--brand-creation);
}
.fc-check input:checked ~ .fc-box::after { opacity: 1; }
.fc-check input:indeterminate ~ .fc-box { background: var(--brand-creation); border-color: var(--brand-creation); }
.fc-check input:indeterminate ~ .fc-box::after {
  opacity: 1; left: 4px; top: 8px; width: 10px; height: 0;
  border-width: 0 0 1.5px 0; transform: none;
}
.fc-check input:focus-visible ~ .fc-box {   /* visible keyboard focus */
  outline: 2px solid var(--brand-creation); outline-offset: 2px;
}
.fc-check input:disabled ~ .fc-box { background: var(--bg-muted); border-color: var(--border); }
.fc-check input:disabled ~ .fc-txt { color: var(--fg-muted); cursor: not-allowed; }
.fc-field.is-error .fc-check .fc-box { border-color: var(--status-danger); }

/* ============================================================
   RADIO : square framed dot (system stays square)
   ============================================================ */
.fc-radio {
  display: inline-flex; align-items: flex-start; gap: var(--space-3);
  min-height: var(--fc-target); padding: 6px 0;
  cursor: pointer; font-size: var(--text-sm); color: var(--fg); line-height: var(--lh-normal);
}
.fc-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-radio .fc-dot {
  position: relative; flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 1px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.fc-radio .fc-dot::after {
  content: ""; position: absolute; inset: 4px; background: var(--brand-creation);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.fc-radio:hover input:not(:disabled) ~ .fc-dot { border-color: var(--brand-creation); }
.fc-radio input:checked ~ .fc-dot { border-color: var(--brand-creation); }
.fc-radio input:checked ~ .fc-dot::after { opacity: 1; }
.fc-radio input:focus-visible ~ .fc-dot { outline: 2px solid var(--brand-creation); outline-offset: 2px; }
.fc-radio input:disabled ~ .fc-dot { background: var(--bg-muted); border-color: var(--border); }
.fc-radio input:disabled ~ .fc-txt { color: var(--fg-muted); cursor: not-allowed; }

/* ============================================================
   SWITCH / TOGGLE : square track + square knob, no pills
   ============================================================ */
.fc-switch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--fc-target); padding: 6px 0;
  cursor: pointer; font-size: var(--text-sm); color: var(--fg);
}
.fc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fc-switch .fc-track {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 22px;
  background: var(--bg-muted); border: 1px solid var(--border-strong); border-radius: 0;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.fc-switch .fc-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: var(--fg-subtle); border-radius: 0;
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.fc-switch input:checked ~ .fc-track { background: var(--brand-creation); border-color: var(--brand-creation); }
.fc-switch input:checked ~ .fc-track .fc-knob { transform: translateX(22px); background: #fff; }
.fc-switch input:focus-visible ~ .fc-track { outline: 2px solid var(--brand-creation); outline-offset: 2px; }
.fc-switch:hover input:not(:disabled) ~ .fc-track { border-color: var(--brand-creation); }
.fc-switch input:disabled ~ .fc-track { background: var(--bg-muted); border-color: var(--border); }
.fc-switch input:disabled ~ .fc-track .fc-knob { background: var(--fg-muted); }
.fc-switch .fc-state {                        /* ON/OFF text so state is never color-only */
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-subtle); min-width: 22px;
}

/* ============================================================
   FIELDSET / LEGEND : framed group with corner brackets
   ============================================================ */
.fc-fieldset {
  position: relative;
  border: 1px solid var(--border); border-radius: 0;
  padding: var(--space-5); margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--bg);
}
.fc-fieldset::before, .fc-fieldset::after,
.fc-fieldset > .fc-c1, .fc-fieldset > .fc-c2 {
  content: ""; position: absolute; width: 8px; height: 8px;
  border: 1.5px solid var(--fg); pointer-events: none; z-index: 2;
}
.fc-fieldset::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.fc-fieldset::after  { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.fc-fieldset > .fc-c1 { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.fc-fieldset > .fc-c2 { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }
.fc-legend {
  padding: 0 var(--space-2) 0 0;
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle);
}
.fc-legend .fc-idx {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--fg-muted); margin-right: var(--space-2);
}
.fc-fieldset.is-error { border-color: var(--status-danger); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fc-input, .fc-textarea, .fc-select, .fc-box, .fc-box::after,
  .fc-dot, .fc-dot::after, .fc-track, .fc-knob {
    transition: none;
  }
}