/* KOJAK rep app · fields and sheets on the iPhone (owner report 2026-09-22: «مربعات الإدخال ما تظهر تمام بالآيفون»).
   Loaded after app.css. Colours from shared/tokens.css only. */

/* iOS Safari draws its own field (inner shadow, a pill for search) and zooms into text under 16px; a field inside a
   flex row does not shrink below its own width unless allowed to */
input.input, .tf__input, .wbox__input { -webkit-appearance: none; appearance: none; border-radius: var(--kj-radius-lg); }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.input { font-size: 16px; min-width: 0; }
.input-group > .input { flex: 1 1 0; width: auto; min-width: 0; }
.input-group__addon { flex: none; white-space: nowrap; }

/* a sheet stays inside the part of the screen the keyboard leaves (ui.js moves the backdrop with the visual viewport) */
.sheet { max-height: min(92dvh, calc(100% - 12px)); }
.sheet__body { overscroll-behavior: contain; }

/* ── a field: its label, then one box holding the value and its unit ── */
.tf .field__label { margin-bottom: 0; }
.tf__box { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 14px; background: var(--kj-white); border: 1.5px solid var(--kj-gray-200); border-radius: var(--kj-radius-lg); transition: border-color var(--kj-transition-fast), box-shadow var(--kj-transition-fast); }
.tf__box:focus-within { border-color: var(--kj-gold); box-shadow: var(--kj-focus-ring); }
.field.is-invalid .tf__box { border-color: var(--kj-danger); box-shadow: var(--kj-focus-ring-danger); }
.tf__input { flex: 1 1 auto; width: 100%; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--kj-ink); font: inherit; font-size: 18px; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.tf__input::placeholder { color: var(--kj-gray-300); }
.tf__input--big { font-size: 24px; font-weight: var(--kj-fw-medium); }
.tf__input--text { direction: rtl; text-align: start; font-size: 16px; }
.tf__unit { flex: none; font-size: var(--kj-fs-base); color: var(--kj-gray-500); white-space: nowrap; }
.tform .field { margin-bottom: var(--kj-sp-4); }
.tform__code { display: flex; align-items: center; gap: 6px; margin-bottom: var(--kj-sp-3); padding: 8px 12px; border-radius: var(--kj-radius-md); background: var(--kj-gold-cream); color: var(--kj-gold-deep); font-size: var(--kj-fs-sm); }
.tform__del { color: var(--kj-danger-deep); flex: 0 0 auto !important; }
.krow { display: flex; align-items: center; gap: var(--kj-sp-2); flex-wrap: wrap; }
.kchips .chip { min-width: 52px; min-height: 44px; }
.tf__box--karat { flex: 1 1 90px; min-height: 44px; }
.tf__box--karat .tf__input { height: 40px; font-size: 16px; }