/* ============================================================
   Kepri prototype — shared base: reset, type, primitives.
   Logical properties only; no [dir=rtl] overrides (RTL rule).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Zain', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--f-large);   /* 16px — brand floor for body copy (p.53, audit F3);
                                  compact UI labels opt down to --f-normal/--f-small */
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}
html[lang="ar"] body { line-height: 1.6; }  /* Arabic needs more room */

/* Zain roles (brand p.14): Regular 400 — headings & wordmark. Bold stays for
   compact UI labels/buttons only (no Medium cut exists — audit F5/C3). */
h1, h2, h3 { font-weight: 400; }

img, svg, video { display: block; max-width: 100%; }
img[width][height] { height: auto; }

button, input, select, textarea {
  font: inherit; color: inherit; background: none; border: none;
}
button { cursor: pointer; }
a { color: var(--link); }

/* brand teal focus ring on every interactive element (p.53, audit F4) */
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* numbers + Latin units are their own bidi run — isolate them */
.num, .unit { direction: ltr; unicode-bidi: isolate; display: inline-block; }
bdi { unicode-bidi: isolate; }

/* ---------- buttons ---------- */
/* White label on Teal 500 is the brand book's own drawn component (p.21/42/45)
   although its contrast table rates the pair Fail (p.52). Ratified as the
   recorded brand exception — audit F15/C1; every non-book-drawn pair is AA. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-4); width: 100%;
  border-radius: var(--r-btn);
  background: var(--action); color: var(--action-ink);
  font-size: var(--f-large); font-weight: 700;
  transition: background .15s;
}
.btn:hover { background: var(--action-hover); }
.btn { transition: background .15s, transform .08s; }
.btn:active:not(:disabled) { background: var(--c-teal-700); transform: scale(.97); }
.btn:disabled { background: var(--action-disabled); color: #fff; cursor: default; }
.btn--outline {
  background: var(--card); color: var(--brand-deep);
  border: 1px solid var(--c-teal-600);   /* "Secondary — outline": teal rule, teal label */
}
.btn--outline:hover { background: var(--action-tint); border-color: var(--action); }
.btn--outline:active:not(:disabled) { background: var(--action-tint); }
.btn--outline:disabled { background: var(--card); color: var(--action-disabled); border-color: var(--action-disabled); }
.btn--danger { background: var(--error); }
.btn--danger:hover { background: #A93C33; }
.btn--danger:active:not(:disabled) { background: #8F3129; }
.btn--ghost { background: none; color: var(--brand-deep); min-height: 44px; width: auto; }
.btn--ghost:hover { background: var(--action-tint); }
.btn--ghost:active:not(:disabled) { background: var(--action-tint); }
.btn--sm { min-height: 44px; font-size: var(--f-normal); width: auto; padding: 0 var(--s-4); }
.btn--loading { pointer-events: none; opacity: .7; }
.btn .spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-block-start-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- inputs ---------- */
.field { display: grid; gap: 6px; }
.field > label { font-size: var(--f-normal); font-weight: 400; }  /* Zain Regular labels (p.43) */
.input {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-3);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
.input:focus-within { border-color: var(--action); border-width: 1.5px; }
.input input, .input select { flex: 1; min-width: 0; outline: none; background: none; }
.input select { align-self: stretch; min-height: 44px; }
.input input::placeholder, textarea::placeholder { color: var(--muted); }
.input--error { border-color: var(--error) !important; }
.field .err { font-size: var(--f-small); color: var(--error-text); display: flex; gap: 4px; align-items: center; }
.field .hint { font-size: var(--f-small); color: var(--muted); }
textarea.input { padding: var(--s-3); min-height: 110px; resize: none; display: block; width: 100%; outline: none; }
.input select { appearance: none; }

/* ---------- cards & tiles ---------- */
.card {
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.tile {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--card); border-radius: var(--r-tile);
  padding: var(--s-3); width: 100%; text-align: start;
  box-shadow: var(--shadow-card);
}
.tile__ic {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--action-tint); color: var(--brand-deep);
}
.tile__tx { flex: 1; min-width: 0; }
.tile__tx > b { font-size: var(--f-normal); display: block; }
.tile__tx > span:not(.badge):not(.chatrow__ppl) { font-size: var(--f-small); color: var(--muted); display: block; }
.tile__chev {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--faint); color: var(--muted);
}

/* ---------- chips / badges ---------- */
/* chips: Light Tint fill by default, Teal 500 when selected (chipTheme).
   Selected white-on-teal is the tracked brand-contrast delta (§10.1). */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 2px 14px; border-radius: 999px;
  background: var(--action-tint); border: 1px solid transparent;
  color: var(--brand-deep);
  font-size: var(--f-normal); font-weight: 700; white-space: nowrap;
}
.chip.on { background: var(--action); border-color: var(--action); color: var(--action-ink); }
/* 44px hit area for interactive chips without inflating the 34px visual (p.53, F9) */
button.chip { position: relative; }
button.chip::after { content: ""; position: absolute; inset: -5px 0; }
.chip--pill { background: var(--action-tint); border: none; color: var(--brand-deep); min-height: 30px; }
.chip--pill .x { font-weight: 800; opacity: .7; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 7px;
  font-size: var(--f-small); font-weight: 700; line-height: 1.5;
}
.badge--success { background: var(--success-tint); color: var(--success-ink); }
.badge--error   { background: var(--error-tint);   color: var(--error-ink); }
.badge--warn    { background: var(--warn-tint);    color: var(--warn-ink); }
.badge--info    { background: var(--info-tint);    color: var(--info-ink); }
.badge--teal    { background: var(--c-teal-800); color: #fff; }
:root[data-theme="dark"] .badge--teal { background: var(--c-teal-700); }
.badge--premium { background: var(--premium); color: var(--premium-hi); }
.badge--plain   { background: var(--faint); color: var(--muted); }

/* ---------- empty / error states ---------- */
.empty {
  display: grid; justify-items: center; text-align: center;
  gap: var(--s-2); padding: var(--s-6) var(--s-5);
}
.empty__ic {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--action-tint); color: var(--brand-deep);
}
.empty b { font-size: var(--f-larger); font-weight: 400; color: var(--brand-deep); }  /* "No Data Found" teal, as the app */
.empty p { font-size: var(--f-large); color: var(--muted); max-width: 30ch; }  /* body copy ≥16px (p.53) */
.empty .btn { width: auto; min-width: 180px; margin-block-start: var(--s-2); }

/* ---------- toast ---------- */
.a-toast {
  position: absolute; inset-inline: var(--s-4); inset-block-end: 86px;
  z-index: 60; display: none; pointer-events: none;
}
.a-toast.show { display: block; animation: toast-in .25s ease-out; }
.a-toast > div {
  display: flex; gap: var(--s-2); align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-tile);
  color: #fff; font-weight: 700; box-shadow: var(--shadow-float);
}
/* toast grounds use the deep status inks — the 500s fail AA under white text
   (success 3.4:1, warn 2.7:1 — audit F15). Fixed hexes: dark enough on any theme. */
.a-toast .t-success { background: #1F7A50; }
.a-toast .t-error   { background: #8A312A; }
.a-toast .t-warn    { background: #755311; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------- skeleton shimmer ---------- */
/* shimmer sits in the brand tint family so loading states still read as Kepri */
.sk {
  background: var(--shimmer-base); border-radius: 8px; overflow: hidden; position: relative;
}
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--shimmer-hi) 50%, transparent 70%);
  animation: sk 1.4s infinite;
}
@keyframes sk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html[dir="rtl"] .sk::after { animation-name: sk-r; }
@keyframes sk-r { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ---------- placeholder (unconfirmed content) flagging ---------- */
[data-ph] { position: relative; }
body.show-ph [data-ph] {
  outline: 1.5px dashed var(--warn); outline-offset: 3px; border-radius: 3px;
}
body.show-ph [data-ph]::after {
  content: "?"; position: absolute; inset-block-start: -7px; inset-inline-end: -7px;
  width: 15px; height: 15px; border-radius: 50%; z-index: 5;
  background: var(--warn); color: #fff;
  font: 700 10px/15px sans-serif; text-align: center;
}

/* ---------- misc ---------- */
.row { display: flex; align-items: center; gap: var(--s-2); }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-block: var(--s-4) var(--s-3);
}
.sec-h b { font-size: var(--f-larger); font-weight: 400; }  /* section headings in Zain Regular (p.14) */
.sec-h a, .sec-h button.link {
  font-size: var(--f-normal); color: var(--link); font-weight: 700;
  text-decoration: underline;   /* links are underlined (p.21, audit F10) */
  min-height: 44px; display: inline-flex; align-items: center;
}
button.link {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--link); font-weight: 700; padding-inline: 2px;
  text-decoration: underline;
}
.divider { height: 1px; background: var(--border); border: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* long-form copy uses Zain Light (300) — the brand body weight */
.detail__desc, .empty p, .donecard > p, .ob__sheet p, .sheet__b,
.admsub, .hub-card p, .balcard p, .auth__alt, .admdesc,
.dlg > p, .note, .admgolive p, .hub-head p {
  font-weight: 300;
}