/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — FIELD ATOM
   Classification : UI Atom | Input Layer | Token-Driven | Theme + Wrap Aware
   Version        : 2.0.0 | Genesis-Final • Token-Harmonized • Safe-Fallback
   File           : /tools/modules/ui.field/ui.field.css
   Maintainer     : DΛREΛKT_ UI TEAM
   Runtime        : { type:"style", trusted:true, async:false, sandbox:false }
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.field {

  /* ─── Root Host ─────────────────────────────────────────────────────────── */
  .ui-field[data-mod="ui_field"] {
    display: grid;
    gap: var(--ufd-gap, 6px);
    color: var(--ufd-fg, inherit);
    inline-size: 100%;
    min-inline-size: 0;
    position: relative;
    transition: all 0.25s ease-in-out;
  }

  /* ─── Label + Required Marker ───────────────────────────────────────────── */
  .ui-field__label {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.9;
    color: var(--ufd-fg, inherit);
  }

  .ui-field__req {
    color: #e66;
    margin-inline-start: 2px;
  }

  /* ─── Shell (Structure) ─────────────────────────────────────────────────── */
  .ui-field__shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .ui-field__prefix[hidden],
  .ui-field__suffix[hidden] {
    display: none !important;
  }

  .ui-field__control {
    display: contents;
  }

  /* ─── Input Core ───────────────────────────────────────────────────────── */
  .ui-field__input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ufd-bd, rgba(255,255,255,.2));
    border-radius: var(--ufd-radius, 10px);
    background: var(--ufd-bg, transparent);
    color: var(--ufd-fg, inherit);
    padding: var(--ufd-pad, 0.55rem 0.75rem);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .ui-field__input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ufd-btn-bg, #fff) 40%, transparent);
  }

  .ui-field__input:focus {
    border-color: var(--ufd-btn-bg, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ufd-btn-bg, #fff) 25%, transparent);
  }

  /* ─── Checkbox Variant ─────────────────────────────────────────────────── */
  .ui-field__input--checkbox {
    width: auto;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    padding: 0;
    accent-color: var(--ufd-btn-bg, #fff);
  }

  /* ─── Help / Message Text ──────────────────────────────────────────────── */
  .ui-field__help {
    font-size: var(--ufd-help, 0.85rem);
    opacity: 0.8;
    color: var(--ufd-fg-muted, #aaa);
  }

  .ui-field__msg {
    font-size: var(--ufd-msg, 0.85rem);
    color: color-mix(in srgb, tomato 85%, var(--ufd-bg, #000));
    margin-block-start: 2px;
  }

  .ui-field__msg[hidden] { display: none; }

  /* ─── Error State ─────────────────────────────────────────────────────── */
  .has-error .ui-field__input {
    border-color: color-mix(in srgb, tomato 70%, var(--ufd-bd, rgba(255,255,255,.2)));
    box-shadow: 0 0 0 1px color-mix(in srgb, tomato 35%, transparent);
  }

  /* ─── Disabled State ───────────────────────────────────────────────────── */
  .ui-field__input:disabled {
    opacity: .6;
    cursor: not-allowed;
  }

  /* ─── Density Modifiers ───────────────────────────────────────────────── */
  .ui-field[data-density="dense"] .ui-field__input {
    padding-block: 0.3rem;
  }

  .ui-field[data-density="roomy"] .ui-field__input {
    padding-block: 0.8rem;
  }

  /* ─── Theme Awareness (Site Token Bridges) ─────────────────────────────── */
  [data-theme="dark"] .ui-field {
    --ufd-bd: rgba(255,255,255,.2);
    --ufd-bg: transparent;
    --ufd-fg: var(--site-fg, #eee);
  }

  [data-theme="light"] .ui-field {
    --ufd-bd: rgba(0,0,0,.2);
    --ufd-bg: transparent;
    --ufd-fg: var(--site-fg, #111);
  }

  /* ─── Motion Reduction (Accessibility Compliance) ─────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .ui-field { transition: none !important; }
  }

  /* ─── Genesis Token Bridges (System Defaults) ─────────────────────────── */
  :root {
    --ufd-gap: 6px;
    --ufd-pad: 0.55rem 0.75rem;
    --ufd-radius: 10px;
    --ufd-bd: rgba(255,255,255,.2);
    --ufd-fg: inherit;
    --ufd-bg: transparent;
    --ufd-btn-bg: #fff;
    --ufd-btn-fg: #111;
    --ufd-help: 0.85rem;
    --ufd-msg: 0.85rem;
  }

}