/* Reset, typography, RTL rules, app shell. */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.011em; line-height: 1.3; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-3); }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

::selection { background: var(--brand-100); }

/* Inline icons sit on the text baseline by default; flex/grid contexts ignore
   this, so sized icon containers are unaffected. */
svg { vertical-align: -0.14em; }

/* --- numerals -------------------------------------------------------------
   Western digits throughout, and every money/date value is bidi-isolated so an
   RTL paragraph cannot reorder "1,250.500 ر.ع." into nonsense. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.num--display { font-variant-numeric: normal; }   /* hero + tile values */

.money { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.money__sym { color: var(--muted); font-size: 0.82em; margin-inline-start: 3px; }

/* --- shell --------------------------------------------------------------- */
.shell { display: flex; min-height: 100%; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-inline-start: 1px solid var(--hairline);
  padding: var(--s-5) var(--s-4);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--s-5);
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.brand__sub  { font-size: var(--fs-xs); color: var(--muted); margin-top: -2px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__group-label {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 600;
  padding: var(--s-4) var(--s-3) var(--s-1);
  letter-spacing: .02em;
}
.nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3); border-radius: var(--r);
  color: var(--ink-2); font-weight: 550; font-size: var(--fs-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav__item:hover { background: var(--surface-2); color: var(--ink); }
.nav__item.is-active { background: var(--brand-050); color: var(--brand-700); font-weight: 650; }
.nav__item.is-active svg { color: var(--brand); }
.nav__item svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
.nav__badge {
  margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700;
  background: var(--critical-wash); color: var(--critical-ink);
  padding: 1px 7px; border-radius: 99px; direction: ltr;
}

.sidebar__foot { margin-top: auto; font-size: var(--fs-xs); color: var(--muted); padding: 0 var(--s-3); }

.main { flex: 1 1 auto; min-width: 0; padding: var(--s-6) var(--s-7); max-width: 1500px; }

.page-head { margin-bottom: var(--s-6); }
.page-head__row { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.page-head__row > .spacer { flex: 1 1 auto; }
.page-head h1 { font-size: var(--fs-3xl); }
.page-head .sub { color: var(--ink-2); margin-top: var(--s-1); max-width: 62ch; }

/* --- route transition (Standing preference 5) ---------------------------- */
#view { animation: view-in var(--t-med) both; }
#view.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--t-fast), transform var(--t-fast); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- scroll reveal -------------------------------------------------------
   Visible by DEFAULT. The hidden state is applied by JS (`.is-armed`) only once
   it has actually committed to revealing the element again. Content must never
   depend on an observer firing in order to be seen: if IntersectionObserver is
   unavailable, throttled, or the script fails, the page is still readable —
   it just doesn't animate. */
.reveal { opacity: 1; transform: none; }
.reveal.is-armed { opacity: 0; transform: translateY(12px); }
.reveal.is-armed.is-in {
  opacity: 1; transform: none;
  transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  #view { animation: none; }
  .reveal, .reveal.is-armed, .reveal.is-armed.is-in {
    opacity: 1; transform: none; transition: none;
  }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) { .main { padding: var(--s-5) var(--s-5); } }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    border-inline-start: 0; border-bottom: 1px solid var(--hairline);
    flex-direction: row; align-items: center; gap: var(--s-4);
    padding: var(--s-3) var(--s-4); overflow-x: auto;
  }
  .sidebar__foot, .nav__group-label { display: none; }
  .nav { flex-direction: row; gap: var(--s-1); }
  .nav__item { white-space: nowrap; padding: 8px 12px; }
  .main { padding: var(--s-5) var(--s-4); }
  .page-head h1 { font-size: var(--fs-2xl); }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}