/* ==========================================================================
   TechneTools — Quiet Force
   base.css — إعادة الضبط، التايبوجرافي، الشبكة، والعناصر المشتركة
   كل المسافات الجانبية بخصائص منطقية (inline-start/end) عشان ملف واحد
   يخدم العربي RTL والإنجليزي LTR من غير أي تكرار.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-ar);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* الاتجاه بيتحدد من <html lang dir> — مش من CSS */
[lang="en"] { font-feature-settings: "kern"; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--sand); color: var(--ink); }

::placeholder { color: var(--ash-dim); opacity: 1; }



/* ==========================================================================
   التايبوجرافي
   ========================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lh-head);
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0; }
p + p { margin-top: var(--sp-4); }

/* العنوان اللاتيني الضخم — Anton ملوش عربي، فالعنصر ده بيتقفل على LTR */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  font-weight: 400;
  direction: ltr;
  text-align: start;
  text-transform: uppercase;
}
.display .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sand-dim);
}

/* اللايبل التقني — لاتيني بس.
   التباعد ده بيكسر الحروف العربية، فممنوع عليها (شوف .label-ar تحت). */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sand-dim);
  direction: ltr;
  display: inline-block;
}
.label--sand { color: var(--sand); }

/* نسخة عربية من اللايبل — من غير تباعد ولا uppercase */
.label-ar {
  font-family: var(--font-ar);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sand-dim);
}

.lede {
  color: var(--ash);
  max-width: 62ch;
}

.muted  { color: var(--ash); }
.dimmed { color: var(--ash-dim); }

/* الأرقام في الأعمدة والأسعار لازم تتراصّ */
.nums { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   الشبكة والأقسام
   ========================================================================== */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-pad); }
.section + .section { border-top: var(--bw) solid var(--rule-faint); }

/* ترويسة القسم: رقم الشكل جنب العنوان */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.section-head .lede { flex-basis: 100%; margin-top: var(--sp-2); }

/* خطوط شبكية رأسية رفيعة — بصمة الاتجاه، ديكور بحت */
.ruled { position: relative; }
.ruled::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px),
    linear-gradient(to right, var(--rule-faint) 1px, transparent 1px);
  background-position: 25% 0, 75% 0;
  background-size: 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}
.ruled > * { position: relative; }

/* أقواس الزوايا زي البوسترات */
.bracketed { position: relative; padding: var(--sp-6); }
.bracketed::before, .bracketed::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: var(--bw) solid var(--rule);
}
.bracketed::before { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; }
.bracketed::after  { inset-block-end: 0;   inset-inline-end: 0;   border-inline-start: 0; border-block-start: 0; }

hr.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--rule-faint);
}

/* ==========================================================================
   إتاحة الوصول
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* رابط التخطي — بيظهر لمستخدم الكيبورد بس */
.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: calc(var(--z-drawer) + 1);
  background: var(--sand);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: inset-block-start var(--t-fast);
}
.skip-link:focus { inset-block-start: var(--sp-4); }