/* Reset, type defaults, direction rules, the bidi register and the alignment pins. Nothing here
   names a raw value: everything is a token. */

/* IBM Plex Sans Arabic and IBM Plex Mono, vendored under wwwroot/fonts/ rather than linked from
   Google Fonts (OW-9: no CDN reached at runtime). --font-body and --font-mono in tokens.css name
   these families; this is where the bytes are declared. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-canvas); color: var(--color-text-body);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; color: var(--color-text-heading); font-family: var(--font-heading); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
h2 { font-size: var(--text-lg); line-height: var(--leading-lg); }
h3 { font-size: var(--text-md); line-height: var(--leading-md); }
p { margin: 0; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: inline-block; vertical-align: middle; }
img { max-width: 100%; height: auto; }

/* Arabic letters join: tracking severs the joins. Nothing may letter-space under rtl. Latin-only
   elements opt back in with .tracking under ltr. */
html[dir="rtl"] * { letter-spacing: normal; }
html[dir="ltr"] .tracking { letter-spacing: 0.04em; }
html[dir="ltr"] .uppercase { text-transform: uppercase; }

/* Focus is a requirement. Mouse clicks keep it off via :focus-visible. */
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Machine text inside Arabic: isolate it so punctuation is not reordered around it. */
.numeric, [data-numeric] { font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; display: inline-block; }
.mono { font-family: var(--font-mono); }

/* The bidi register (the console's own): prose resolves its own direction; layout slots keep the
   document's. Cells and labels are layout slots — alignment is pinned per document direction. */
:where(p, li, dd, td, caption, blockquote) { unicode-bidi: plaintext; }
:where(.app-sidebar, .app-topbar, .card-head, .form-row, .table, .pager, .menu-panel, .toolbar) { unicode-bidi: normal; }
.form-label, .facts dt { unicode-bidi: plaintext; }
[dir="rtl"] :is(.table th, .table td, .form-label, .stat-label, .muted, .facts dd) { text-align: right; }
[dir="ltr"] :is(.table th, .table td, .form-label, .stat-label, .muted, .facts dd) { text-align: left; }
[dir="rtl"] :is(.table th, .table td).cell-num, [dir="ltr"] :is(.table th, .table td).cell-num { text-align: end; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-text-muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.cluster { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cluster-end { margin-inline-start: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .btn, .form-control, .pill, .card { border: 1px solid CanvasText; } }