/*
 * صفحةُ himico.app الثابتة (docs/deploy/meta-review.md §⑤) — رموزُ app/tokens.css وحدَها:
 * لا لونَ ولا حجمَ ولا ظلَّ ولا استدارةَ مكتوبةً هنا. tokens.css يُنسخ بجانبها عند البناء.
 */

/* اللغةُ المختارة وحدَها تظهر — `data-lang` على <html> يكتبه سطرُ الرأس من `?lang=` قبل الرسم */
html[data-lang="ar"] [data-l]:not([data-l="ar"]),
html[data-lang="fr"] [data-l]:not([data-l="fr"]),
html[data-lang="en"] [data-l]:not([data-l="en"]) {
  display: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  /* Inter للأرقام واللاتينيّة · IBM Plex Sans Arabic للعربيّة (CLAUDE.md) */
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-field);
}

.wrap {
  width: 100%;
  max-width: calc(var(--space-800) * 30);
  margin-inline: auto;
  padding-inline: var(--space-400);
  padding-block: var(--space-500) var(--space-800);
  min-width: 0;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
}

.brand {
  font-size: var(--type-heading-lg-size);
  line-height: var(--type-heading-lg-lh);
  font-weight: var(--type-heading-lg-weight);
  color: var(--text);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
}
.langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-300);
  border-radius: var(--r-pill);
  color: var(--text-secondary);
}
.langs a[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
}

.hero {
  margin-top: var(--space-800);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.badge {
  align-self: flex-start;
  padding: var(--space-100) var(--space-300);
  border-radius: var(--r-pill);
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: var(--type-caption-weight);
}

h1 {
  margin: 0;
  font-size: var(--type-money-xl-size);
  line-height: var(--type-money-xl-lh);
  font-weight: var(--type-money-xl-weight);
}

h2 {
  margin: 0;
  font-size: var(--type-heading-md-size);
  line-height: var(--type-heading-md-lh);
  font-weight: var(--type-heading-md-weight);
}

h3 {
  margin: 0;
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-lh);
  font-weight: var(--type-heading-sm-weight);
}

p {
  margin: 0;
}

.lead {
  color: var(--text-secondary);
  font-size: var(--type-mobile-body-size);
  line-height: var(--type-mobile-body-lh);
}

.muted {
  color: var(--text-secondary);
}

.small {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  margin-top: var(--space-200);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-500);
  border-radius: var(--r-field);
  font-weight: var(--type-heading-sm-weight);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-button);
}
.btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.btn-primary {
  background: var(--action-primary);
  color: var(--text-on-fill);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--action-primary-hover);
  color: var(--text-on-fill);
}

.block {
  margin-top: var(--space-800);
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-800) * 8)), 1fr));
  gap: var(--space-300);
}

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal ul {
  margin: 0;
  padding-inline-start: var(--space-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  color: var(--text-secondary);
}
.legal li::marker {
  color: var(--text-muted);
}
.legal b {
  color: var(--text);
}
.legal section {
  scroll-margin-top: var(--space-400);
}

.toc ol {
  margin: 0;
  padding-inline-start: var(--space-500);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-800) * 7)), 1fr));
  gap: var(--space-100) var(--space-600);
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.foot {
  margin-top: var(--space-800);
  padding-top: var(--space-500);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200) var(--space-500);
  color: var(--text-secondary);
  font-size: var(--type-body-sm-size);
}
.foot a,
.foot span {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}