حقل الهوية والإقامة

<div class="mini natid">
  <div class="ni-head"><span data-ar="رقم الهوية أو الإقامة" data-en="National ID / Iqama">رقم الهوية أو الإقامة</span></div>
  <div class="ni-row ok">
    <i>1084215761</i>
    <span class="ni-badge" data-ar="مواطن" data-en="Citizen">مواطن</span>
    <span class="ni-tick">✓</span>
  </div>
  <div class="ni-row ok">
    <i>2084215769</i>
    <span class="ni-badge res" data-ar="مقيم" data-en="Resident">مقيم</span>
    <span class="ni-tick">✓</span>
  </div>
  <div class="ni-row bad">
    <i>1084215762</i>
    <span class="ni-badge err" data-ar="رقم التحقّق خاطئ" data-en="Bad checksum">رقم التحقّق خاطئ</span>
    <span class="ni-tick">✕</span>
  </div>
  <p class="ni-note" data-ar="يبدأ بـ 1 للمواطن و2 للمقيم · عشر خانات · الخانة الأخيرة رقم تحقّق"
     data-en="Starts with 1 for citizens, 2 for residents · ten digits · last digit is a checksum">يبدأ بـ 1 للمواطن و2 للمقيم · عشر خانات · الخانة الأخيرة رقم تحقّق</p>
</div>

/* pt-scoped */
/* حقل الهوية والإقامة */
.natid{width:100%;max-width:260px;background:var(--pt-surface);border-radius:var(--pt-radius-md);
  border:1px solid var(--pt-border-subtle);padding:10px;display:flex;flex-direction:column;gap:6px}
.natid .ni-head{font-size:9px;color:var(--pt-text-muted)}
.natid .ni-row{display:flex;align-items:center;gap:6px;padding:6px 7px;
  border-radius:var(--pt-radius-sm);background:var(--pt-bg-inset);
  border:1px solid var(--pt-border-default)}
.natid .ni-row.bad{border-color:var(--pt-color-danger-600)}
.natid .ni-row i{font-style:normal;font-size:11px;color:var(--pt-text-primary);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;direction:ltr}
.natid .ni-badge{margin-inline-start:auto;font-size:8px;padding:1px 6px;border-radius:99px;
  border:1px solid var(--pt-accent);color:var(--pt-accent);white-space:nowrap}
.natid .ni-badge.res{border-color:var(--pt-color-info-400);color:var(--pt-color-info-400)}
.natid .ni-badge.err{border-color:var(--pt-color-danger-400);color:var(--pt-color-danger-400)}
.natid .ni-tick{font-size:10px;color:var(--pt-accent)}
.natid .ni-row.bad .ni-tick{color:var(--pt-color-danger-400)}
.natid .ni-note{margin:2px 0 0;font-size:8px;color:var(--pt-text-muted);line-height:1.9}

# National ID / Iqama Field

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** National ID / Iqama Field — Tells citizen from resident by the first digit, and validates the checksum

**Why this component matters:** The first digit identifies the document type; the last is a checksum computed from the preceding nine. Validating in the browser prevents typos that would otherwise surface days later inside government systems.

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.

**Important:** This component has no equivalent in any global library. Do not imitate a
Latin pattern and translate its labels — build it from Gulf market requirements directly.


## Checksum algorithm

```js
/** Validates a Saudi national ID or Iqama number (10 digits, modified Luhn) */
export function validSaudiId(id) {
  const s = String(id).trim();
  if (!/^[12]\d{9}$/.test(s)) return false;   // starts with 1 or 2, ten digits
  let sum = 0;
  for (let i = 0; i < 9; i++) {
    let d = +s[i];
    if (i % 2 === 0) {                        // double every other digit
      d *= 2;
      if (d > 9) d -= 9;
    }
    sum += d;
  }
  return (10 - (sum % 10)) % 10 === +s[9];
}
```

`validSaudiId('1084215761')` ← `true` · `validSaudiId('1084215762')` ← `false`