/* ==========================================================================
   Amana Design System: base (fonts, reset, typography, utilities, wireframe mode)
   ========================================================================== */

/* ---------- Fonts (self-hosted; Readex Pro variable 160 to 700, Noto Sans Ethiopic for Amharic and Tigrinya) ---------- */
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Ethiopic";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/noto-sans-ethiopic.woff2") format("woff2");
  unicode-range: U+1200-139F, U+2D80-2DDF, U+AB00-AB2F;
}

/* Arabic glyphs inside code samples: Latin stays monospace, Arabic falls to Readex Pro. */
@font-face {
  font-family: "Code Arabic";
  font-weight: 160 700;
  font-display: swap;
  src: url("../fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"], ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--text-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--text-link-hover); }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
[hidden] { display: none !important; }

/* ---------- Document ---------- */
html {
  font-family: var(--font-sans);
  font-size: 100%;
  background: var(--bg);
  color: var(--text);
}
body {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
}
:lang(am), :lang(ti) { font-family: var(--font-ethiopic); }
::selection { background: var(--highlight); color: var(--text); }

/* Never track Arabic. Headings balance their lines. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
p, li { text-wrap: pretty; }

/* ---------- Focus (keyboard only) ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ---------- Typography scale ---------- */
.t-display { font-size: var(--fs-6xl); line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.t-h1 { font-size: var(--fs-5xl); line-height: 1.25; font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.t-h2 { font-size: var(--fs-4xl); line-height: 1.3; font-weight: var(--fw-bold); }
.t-h3 { font-size: var(--fs-2xl); line-height: 1.35; font-weight: var(--fw-semibold); }
.t-h4 { font-size: var(--fs-xl); line-height: 1.4; font-weight: var(--fw-semibold); }
.t-h5 { font-size: var(--fs-lg); line-height: 1.45; font-weight: var(--fw-semibold); }
.t-h6 { font-size: var(--fs-base); line-height: 1.5; font-weight: var(--fw-semibold); }
.t-body-lg { font-size: var(--fs-lg); line-height: var(--lh-loose); }
.t-body { font-size: var(--fs-base); line-height: var(--lh-base); }
.t-body-sm, .t-md { font-size: var(--fs-md); line-height: var(--lh-base); }
.t-label { font-size: var(--fs-sm); line-height: 1.4; font-weight: var(--fw-medium); }
.t-caption { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-3); }
.t-overline { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-2); }
.t-muted { color: var(--text-3); }
.t-secondary { color: var(--text-2); }
.t-brand { color: var(--brand); }
.t-strong { font-weight: var(--fw-semibold); }
.t-prose { max-width: var(--measure); }
.t-center { text-align: center; }
.t-start { text-align: start; }
.t-end { text-align: end; }

/* Figures. Western digits are the default in Egypt for money, phones and dates. Tabular in columns. */
.num { font-variant-numeric: tabular-nums lining-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
bdi, .bidi { unicode-bidi: isolate; }
.money { font-variant-numeric: tabular-nums lining-nums; font-weight: var(--fw-semibold); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.92em; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Icons ---------- */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.icon--sm { --icon-size: 16px; }
.icon--md { --icon-size: 20px; }
.icon--lg { --icon-size: 24px; }
.icon--xl { --icon-size: 32px; }
.icon--2xl { --icon-size: 48px; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
.logo { display: block; height: 100%; width: auto; }
.logo--mark { aspect-ratio: 1; }

/* ---------- Layout utilities ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-4)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--space-3)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-2)); }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.start { align-items: flex-start; }
.end { justify-content: flex-end; }
.grow { flex: 1 1 0; min-width: 0; }
.shrink-0 { flex: none; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap, var(--space-4)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr)); }
.gap-1 { --gap: var(--space-1); } .gap-2 { --gap: var(--space-2); } .gap-3 { --gap: var(--space-3); }
.gap-4 { --gap: var(--space-4); } .gap-5 { --gap: var(--space-5); } .gap-6 { --gap: var(--space-6); }
.gap-8 { --gap: var(--space-8); } .gap-10 { --gap: var(--space-10); }
.mt-1 { margin-block-start: var(--space-1); } .mt-2 { margin-block-start: var(--space-2); } .mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); } .mt-8 { margin-block-start: var(--space-8); }
.mb-2 { margin-block-end: var(--space-2); } .mb-4 { margin-block-end: var(--space-4); } .mb-6 { margin-block-end: var(--space-6); }
.ms-auto { margin-inline-start: auto; } .me-auto { margin-inline-end: auto; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.divider--v { width: 1px; height: auto; align-self: stretch; background: var(--border); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: -4rem; z-index: var(--z-tooltip);
  background: var(--brand); color: var(--on-brand); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--space-4); }

/* Responsive helpers (breakpoints: 600 / 840 / 1200) */
@media (max-width: 599px) { .hide-sm { display: none !important; } }
@media (min-width: 600px) { .show-sm-only { display: none !important; } }
@media (max-width: 839px) { .hide-md { display: none !important; } }
@media (min-width: 840px) { .show-md-only { display: none !important; } }
@media (max-width: 1199px) { .hide-lg { display: none !important; } }

/* ---------- Scrollbars (quiet, native behaviour preserved) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ---------- Forced colors and print ---------- */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
  .btn, .chip, .badge, .card, .input, .select { border: 1px solid ButtonText; }
}
@media print {
  body { background: #fff; color: #000; }
  .no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Wireframe mode. <html data-fidelity="wire"> turns every screen into a
   greyscale structural wireframe using the same markup; <html data-annotations="on">
   shows numbered annotation pins (.anno) in either fidelity.
   ========================================================================== */
[data-fidelity="wire"] {
  --bg: #f3f3f3; --surface: #ffffff; --surface-2: #ffffff; --surface-sunken: #ececec; --surface-inverse: #2b2b2b;
  --border: #d4d4d4; --border-strong: #8a8a8a; --border-focus: #333333;
  --text: #1f1f1f; --text-2: #4a4a4a; --text-3: #6b6b6b; --text-inverse: #ffffff; --text-link: #1f1f1f; --text-link-hover: #000000;
  --brand: #333333; --brand-hover: #1f1f1f; --brand-active: #000000; --on-brand: #ffffff;
  --brand-subtle: #ececec; --brand-subtle-2: #e0e0e0; --brand-subtle-fg: #1f1f1f; --brand-border: #bdbdbd;
  --accent: #bdbdbd; --accent-hover: #adadad; --accent-active: #9d9d9d; --on-accent: #1f1f1f; --accent-subtle: #f0f0f0; --accent-subtle-fg: #1f1f1f; --accent-border: #cfcfcf;
  --success-bg: #f0f0f0; --success-border: #cfcfcf; --success-fg: #2b2b2b; --success-solid: #4a4a4a; --on-success-solid: #fff;
  --warning-bg: #f0f0f0; --warning-border: #cfcfcf; --warning-fg: #2b2b2b; --warning-solid: #6b6b6b; --on-warning-solid: #fff;
  --danger-bg: #f0f0f0; --danger-border: #cfcfcf; --danger-fg: #2b2b2b; --danger-solid: #333333; --danger-solid-hover: #1f1f1f; --on-danger-solid: #fff;
  --info-bg: #f0f0f0; --info-border: #cfcfcf; --info-fg: #2b2b2b; --info-solid: #555555; --on-info-solid: #fff;
  --tier-0-fg: #6b6b6b; --tier-0-bg: #ececec; --tier-1-fg: #333; --tier-1-bg: #e4e4e4; --tier-2-fg: #fff; --tier-2-bg: #4a4a4a; --tier-3-fg: #fff; --tier-3-bg: #1f1f1f;
  --viz-1: #3a3a3a; --viz-2: #7a7a7a; --viz-3: #a5a5a5; --viz-4: #5a5a5a; --viz-5: #919191; --viz-6: #c0c0c0;
  --viz-seq-1: #ececec; --viz-seq-2: #d4d4d4; --viz-seq-3: #b4b4b4; --viz-seq-4: #8f8f8f; --viz-seq-5: #5f5f5f; --viz-seq-6: #2b2b2b;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --surface-brand: #3a3a3a; --surface-brand-deep: #1f1f1f; --on-surface-brand: #ffffff; --on-surface-brand-2: #e0e0e0; --accent-on-brand: #cfcfcf; --border-on-brand: #8a8a8a;
  --highlight: #e6e6e6;
  color-scheme: light;
}
[data-fidelity="wire"] .ph,
[data-fidelity="wire"] .avatar img,
[data-fidelity="wire"] .photo {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), #b5b5b5 calc(50% - 0.5px), #b5b5b5 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), #b5b5b5 calc(50% - 0.5px), #b5b5b5 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    #f7f7f7;
}
[data-fidelity="wire"] .btn--primary, [data-fidelity="wire"] .btn--accent { border: 1px solid #1f1f1f; }
[data-fidelity="wire"] * { font-family: "Readex Pro", sans-serif; }

/* Annotation pins: numbered markers anchored to an element. Hidden unless annotations are on. */
.anno { display: none; }
[data-annotations="on"] .anno, [data-fidelity="wire"] .anno {
  display: inline-grid; place-items: center;
  position: absolute; z-index: var(--z-tooltip);
  inset-block-start: -10px; inset-inline-end: -10px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill);
  background: #d4351c; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #fff; pointer-events: none;
}
[data-annotations="on"] .annotated, [data-fidelity="wire"] .annotated { position: relative; }