* { box-sizing: border-box; }
html { scroll-padding-block: var(--naf-space-6); }
body { margin: var(--naf-space-0); background: var(--naf-color-surface); color: var(--naf-color-text); font-family: var(--naf-font-body); font-size: var(--naf-font-size-16); line-height: var(--naf-line-height-body); }
a { color: var(--naf-color-text); text-underline-offset: var(--naf-space-1); overflow-wrap: anywhere; }
button { font: var(--naf-font-inherit); color: inherit; background: var(--naf-color-canvas); border: 1px solid var(--naf-color-border); border-radius: var(--naf-radius-control); padding: var(--naf-space-2) var(--naf-space-3); min-block-size: var(--naf-space-12); cursor: pointer; }
button:hover { background: var(--naf-color-surface-control); }
button[aria-pressed="true"] { background: var(--naf-color-text); color: var(--naf-color-canvas); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--naf-color-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--naf-color-canvas); }
.reader-skip { position: absolute; inset-block-start: var(--naf-space-2); inset-inline-start: var(--naf-space-4); transform: translateY(-200%); background: var(--naf-color-canvas); padding: var(--naf-space-3); z-index: var(--naf-z-skip-link); }
.reader-skip:focus { transform: none; }
.reader-header { display: flex; align-items: center; justify-content: space-between; gap: var(--naf-space-4); padding: var(--naf-space-4) var(--naf-space-6); border-block-end: 1px solid var(--naf-color-border); background: var(--naf-color-canvas); }
.reader-identity { display: flex; align-items: center; gap: var(--naf-space-5); text-decoration: none; font-size: var(--naf-font-size-14); }
.reader-identity img { width: auto; max-inline-size: var(--naf-space-12); height: var(--naf-space-10); object-fit: contain; }
.reader-language { display: flex; gap: var(--naf-space-2); flex-shrink: 0; }
.reader-shell { max-inline-size: calc(var(--naf-space-12) * 26); margin-inline: auto; padding: var(--naf-space-8) var(--naf-space-6); }
.reader-intro { border-block-end: 1px solid var(--naf-color-border); padding-block-end: var(--naf-space-8); margin-block-end: var(--naf-space-8); }
.reader-intro h1 { max-inline-size: calc(var(--naf-space-12) * 19); font-family: var(--naf-font-display); font-size: clamp(var(--naf-font-size-24), 4vw, var(--naf-font-size-44)); font-weight: var(--naf-font-weight-normal); line-height: var(--naf-line-height-tight); margin-block: var(--naf-space-4); overflow-wrap: anywhere; }
.reader-kicker, .reader-limit, #reader-source, #reader-feedback, #reader-back { font-size: var(--naf-font-size-13); }
.reader-kicker, .reader-limit { color: var(--naf-color-text-muted); }
#reader-summary { max-inline-size: calc(var(--naf-space-12) * 18); }
#reader-feedback { min-block-size: var(--naf-space-6); }
.reader-layout { display: grid; grid-template-columns: minmax(0, calc(var(--naf-space-12) * 5)) minmax(0, 1fr); gap: var(--naf-space-12); align-items: start; }
.reader-sidebar { font-size: var(--naf-font-size-13); }
.reader-sidebar summary { cursor: pointer; font-weight: var(--naf-font-weight-semibold); padding-block: var(--naf-space-3); }
.reader-sidebar nav { display: grid; gap: var(--naf-space-1); }
.reader-sidebar a { display: block; padding-block: var(--naf-space-2); }
.reader-sidebar a[aria-current="page"] { font-weight: var(--naf-font-weight-bold); }
.reader-sidebar a[data-depth="3"] { padding-inline-start: var(--naf-space-4); }
#reader-documents { border-block-start: 1px solid var(--naf-color-border); margin-block-start: var(--naf-space-6); padding-block-start: var(--naf-space-4); }
.reader-document { min-inline-size: 0; overflow-wrap: anywhere; font-family: var(--naf-font-body); }
.reader-document h2, .reader-document h3, .reader-document h4, .reader-document h5, .reader-document h6 { font-family: var(--naf-font-display); font-weight: var(--naf-font-weight-medium); line-height: var(--naf-line-height-compact); margin-block: var(--naf-space-8) var(--naf-space-4); scroll-margin-block-start: var(--naf-space-6); }
.reader-document h2 { font-size: var(--naf-font-size-24); border-block-start: 1px solid var(--naf-color-border); padding-block-start: var(--naf-space-6); }
.reader-document h3 { font-size: var(--naf-font-size-20); }
.reader-document h4, .reader-document h5, .reader-document h6 { font-size: var(--naf-font-size-18); }
.reader-document > :first-child { margin-block-start: var(--naf-space-0); }
.reader-document p, .reader-document ul, .reader-document ol { margin-block: var(--naf-space-4); }
.reader-document li { margin-block: var(--naf-space-2); }
.reader-document ul, .reader-document ol { padding-inline-start: var(--naf-space-6); }
.reader-document code { font-family: var(--naf-font-mono); font-size: var(--naf-font-size-14); }
.reader-document :not(pre) > code { background: var(--naf-color-surface-control); padding: var(--naf-space-0) var(--naf-space-1); }
.reader-code { margin-block: var(--naf-space-6); padding: var(--naf-space-4); border: 1px solid var(--naf-color-border); background: var(--naf-color-canvas); border-radius: var(--naf-radius-control); }
.reader-code-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--naf-space-3); font-size: var(--naf-font-size-12); }
.reader-code pre { overflow-x: auto; max-inline-size: 100%; margin-block-end: var(--naf-space-0); padding-block: var(--naf-space-2); white-space: pre; }
.reader-table { max-inline-size: 100%; overflow-x: auto; margin-block: var(--naf-space-6); border: 1px solid var(--naf-color-border); padding: var(--naf-space-1); background: var(--naf-color-canvas); }
.reader-table table { border-collapse: collapse; min-inline-size: calc(var(--naf-space-12) * 12); inline-size: 100%; font-size: var(--naf-font-size-14); }
.reader-table th, .reader-table td { padding: var(--naf-space-3); text-align: start; vertical-align: top; border-block-end: 1px solid var(--naf-color-border); overflow-wrap: anywhere; }
.reader-table th { background: var(--naf-color-surface-control); font-weight: var(--naf-font-weight-semibold); }
.reader-document blockquote { border-inline-start: 1px solid var(--naf-color-border); margin-inline: var(--naf-space-0); padding-inline-start: var(--naf-space-5); color: var(--naf-color-text-muted); }
.reader-document hr { border: none; border-block-start: 1px solid var(--naf-color-border); margin-block: var(--naf-space-8); }
.reader-metadata { margin-block-end: var(--naf-space-6); font-size: var(--naf-font-size-13); }
.reader-metadata pre { white-space: pre-wrap; overflow-wrap: anywhere; }
[lang="ar"]:not(.reader-document) { font-family: var(--naf-font-arabic); }
html[lang="ar"] body { font-family: var(--naf-font-arabic); }
html[lang="ar"] .reader-intro h1 { font-family: var(--naf-font-arabic); }
.reader-document [lang="ar"] { font-family: var(--naf-font-arabic); }
.reader-document[lang="ar"], .reader-document[lang="ar"] :is(h2, h3, h4, h5, h6) { font-family: var(--naf-font-arabic); }
.reader-document[lang="ar"] code { font-family: var(--naf-font-mono), var(--naf-font-arabic); }
.reader-document code { unicode-bidi: isolate; }
.reader-intro > a[download] { display: block; width: fit-content; margin-block: var(--naf-space-2); }
@media (max-width: 767px) {
  .reader-header { padding: var(--naf-space-3) var(--naf-space-4); }
  .reader-identity { gap: var(--naf-space-3); }
  .reader-identity span { max-inline-size: calc(var(--naf-space-12) * 2); }
  .reader-shell { padding: var(--naf-space-6) var(--naf-space-4); }
  .reader-layout { grid-template-columns: minmax(0, 1fr); gap: var(--naf-space-6); }
  .reader-sidebar { border-block-end: 1px solid var(--naf-color-border); padding-block-end: var(--naf-space-6); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .reader-header, .reader-sidebar, .reader-skip, .reader-code button, #reader-back, #reader-feedback { display: none; }
  .reader-layout { display: block; }
  .reader-shell { padding: var(--naf-space-0); }
  .reader-table, .reader-code pre { overflow: visible; }
  .reader-table table { min-inline-size: 0; }
  .reader-code pre { white-space: pre-wrap; }
}