/* ─── Атомы «Поле» и «Селект» ───────────────────────
     Figma: 01 – Input, 02 – Select.

     Две формы одного атома:
     · .field   — обёртка с иконкой внутри рамки (поисковые поля). В прототипе
                  была скопирована трижды: .top-search 38px в шапке ·
                  .menu-search 36px в меню продуктов; 32px — компактный размер.
     · .control — «голый» input/select со своей рамкой (строка фильтров таблицы,
                  размер страницы). Раньше — .f-row input/select и .tbl-size select.

     Ширину задаёт место использования, а не атом. В статической выдаче поля
     декоративны (обработчиков нет), но состояния hover/focus/заполнено видны
     и переносятся в прод как есть. ─── */

  /* ─ поле-обёртка с иконкой ─ */
  .field{display:flex;align-items:center;gap:8px;min-width:0;
    border:1px solid var(--border-default);border-radius:8px;padding:0 12px;
    background:var(--surface-default);color:var(--text-secondary);
    transition:border-color .15s,box-shadow .15s}
  .field:focus-within{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-ring)}
  .field--32{height:32px;padding:0 10px}
  .field--36{height:36px}
  .field--40{height:38px} /* поиск в шапке: 38px под 16px-типографику */

  .field input{width:100%;min-width:0;border:0;outline:0;font:inherit;background:none;
    color:var(--text-primary)}
  .field--32 input{font-size:14px}
  .field input::placeholder{color:var(--text-secondary)}
  .field--32 input::placeholder{color:var(--text-tertiary)}
  .field .ic{color:var(--text-secondary)}

  /* ─ голый контрол: input и select одной формы ─ */
  .control{width:100%;min-width:0;height:32px;font:inherit;font-size:14px;
    color:var(--text-primary);border:1px solid var(--border-default);border-radius:8px;
    padding:0 10px;background:var(--surface-default);outline:none;
    transition:border-color .15s,box-shadow .15s}
  .control--28{height:28px;border-radius:6px;padding:0 8px;font-size:13px}
  .control::placeholder{color:var(--text-tertiary)}
  .control:focus,
  .control:focus-visible{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-ring)}
  select.control{cursor:pointer;color:var(--text-tertiary);padding:0 4px}

  /* заполнено: фильтр сузил срез — видно, что данные отобраны */
  .control.is-filled{border-color:var(--accent-text);background:var(--accent-surface)}
  select.control.is-filled{color:var(--accent-text)}

  /* подпись перед контролом («На странице») */
  .field-label{display:flex;align-items:center;gap:6px;white-space:nowrap;
    font-size:13px;color:var(--text-secondary)}