:root {
  color-scheme: light;
  --ink: #102a3a;
  --ink-soft: #38515f;
  --night: #0b2533;
  --paper: #f7faf9;
  --white: #ffffff;
  --line: #d4dfe2;
  --aqua: #bce9e6;
  --cyan: #2aa8aa;
  --gold: #e9a947;
  --hold: #fff0bf;
  --danger: #f8d9d5;
  --max: 86rem;
  --radius: 1.1rem;
  font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: 100%;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); line-height: 1.9; direction: rtl; text-align: right; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .12em; }
:focus-visible { outline: .2rem solid #d57d00; outline-offset: .22rem; }

.skip-link { position: fixed; z-index: 20; right: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--white); border: 2px solid var(--night); }
.skip-link:focus { top: 1rem; }

.control-strip {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: .45rem 1rem;
  background: var(--night);
  color: #eaf6f5;
  font-size: .78rem;
  letter-spacing: .04em;
}
.control-strip strong { color: #ffd99b; font-weight: 650; }

.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.35rem 2rem 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.identity { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.identity-mark {
  display: inline-grid;
  place-items: center;
  width: 3.15rem;
  aspect-ratio: 1;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  background: var(--night);
  color: var(--aqua);
  font-weight: 750;
  letter-spacing: -.06em;
}
.identity > span:last-child { display: grid; line-height: 1.15; }
.identity strong { font-size: 1.02rem; }
.identity small { margin-top: .25rem; color: var(--ink-soft); font-size: .76rem; }
.global-tools { display: flex; align-items: center; gap: .65rem; font-size: .88rem; }
.global-tools > * { border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.verify-link, .private-access, .language-control summary { padding: .58rem .85rem; text-decoration: none; }
.verify-link, .private-access { display: inline-flex; gap: .45rem; align-items: baseline; }
.global-tools small { color: var(--ink-soft); font-size: .7rem; }
.private-access { color: var(--ink-soft); cursor: not-allowed; }
.language-control { position: relative; }
.language-control summary { list-style: none; cursor: pointer; }
.language-control summary::-webkit-details-marker { display: none; }
.language-control summary span { margin-left: .35rem; color: var(--cyan); font-weight: 750; }
.language-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + .5rem);
  right: 0;
  width: min(21rem, 88vw);
  padding: .55rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1rem 2.5rem rgb(11 37 51 / .14);
}
.language-menu > * { display: grid; padding: .7rem .8rem; border-radius: .65rem; text-decoration: none; }
.language-menu > * + * { border-top: 1px solid var(--line); }
.language-menu span[aria-disabled="true"] { color: var(--ink-soft); }

.primary-nav { border-block: 1px solid var(--line); background: rgb(255 255 255 / .7); }
.primary-nav > ul { max-width: var(--max); margin: 0 auto; padding: 0 2rem; display: flex; list-style: none; }
.primary-nav > ul > li { position: relative; }
.primary-nav a { display: block; padding: .8rem 1rem; text-decoration: none; font-size: .9rem; }
.primary-nav a[aria-current="page"] { color: #087a7d; font-weight: 700; box-shadow: inset 0 -.16rem #16979a; }
.primary-nav li ul {
  display: none;
  position: absolute;
  z-index: 8;
  right: 0;
  min-width: 18rem;
  margin: 0;
  padding: .45rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--white);
  box-shadow: 0 1rem 2rem rgb(11 37 51 / .12);
}
.primary-nav li:focus-within ul, .primary-nav li:hover ul { display: block; }

main { min-height: 64vh; }
.page-layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.4rem, 6vw, 6rem) 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.page-content { min-width: 0; }
.hero-copy { position: relative; padding: 0 0 clamp(2.5rem, 5vw, 5rem); }
.hero-copy::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  right: 0;
  width: 4.5rem;
  height: .24rem;
  background: var(--gold);
}
h1, h2, h3 { line-height: 1.12; text-wrap: balance; }
h1 { max-width: 18ch; margin: 0 0 1.6rem; font-size: clamp(2.7rem, 7vw, 6.4rem); letter-spacing: -.055em; font-weight: 620; }
h2 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 3vw, 3.2rem); letter-spacing: -.035em; }
h3 { margin: 2rem 0 .65rem; font-size: 1.18rem; }
p, li { font-size: 1.04rem; }
.hero-copy > p { max-width: 67ch; color: var(--ink-soft); font-size: clamp(1.08rem, 1.8vw, 1.34rem); }
.content-section { padding: clamp(2.2rem, 5vw, 4.5rem) 0; border-top: 1px solid var(--line); }
.content-section > p, .content-section > ul, .content-section > ol { max-width: 72ch; }
.content-section ul, .content-section ol { padding-right: 1.35rem; padding-left: 0; }
.content-section li + li { margin-top: .6rem; }
.action-note { max-width: 72ch; padding: 1rem 1.15rem; border: 1px solid var(--line); border-right: .28rem solid var(--cyan); border-radius: var(--radius); background: var(--white); }
.action-note strong { color: var(--ink); }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .85rem 1rem; text-align: right; vertical-align: top; border-bottom: 1px solid var(--line); }
th { color: var(--white); background: var(--night); }
code { padding: .1rem .3rem; border-radius: .35rem; background: #e7eeee; font-size: .9em; }

.page-rail { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.control-card, .release-note, .page-rail nav { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.control-card { display: grid; gap: .2rem; border-top: .28rem solid var(--gold); }
.control-card span, .page-rail nav p { color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.control-card strong { font-size: 1.65rem; }
.control-card small { color: var(--ink-soft); font-size: .72rem; overflow-wrap: anywhere; }
.page-rail nav { display: grid; gap: .45rem; }
.page-rail nav p { margin: 0 0 .3rem; }
.page-rail nav a { padding: .45rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.release-note { background: var(--hold); }
.release-note p { margin-bottom: 0; font-size: .86rem; }
.source-notes { margin-top: 3rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #eef4f4; }
.source-notes h2 { font-size: 1.2rem; }
.source-notes li { font-size: .8rem; overflow-wrap: anywhere; }

footer { padding: 2.4rem max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); display: flex; justify-content: space-between; gap: 3rem; color: #dce9e8; background: var(--night); }
footer p { max-width: 62ch; margin: .6rem 0 0; color: #a8c1c3; font-size: .84rem; }
footer dl { margin: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 1.5rem; }
footer dt { color: #8fb1b4; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
footer dd { margin: .2rem 0 0; font-size: .82rem; }

.system-page { min-height: 100vh; display: grid; place-items: center; background: var(--night); color: var(--white); }
.system-page main { min-height: 0; width: min(44rem, calc(100% - 2rem)); }
.system-page section { padding: clamp(2rem, 7vw, 5rem); border: 1px solid #36515d; border-radius: 1.5rem; background: #102f3d; }
.system-page h1 { margin-top: 2rem; font-size: clamp(2.2rem, 6vw, 4rem); }
.system-page p { color: #c2d6d6; }
.text-action { display: inline-block; margin-top: 1rem; color: var(--aqua); font-weight: 700; }
.system-code { font-size: 4rem; color: var(--gold); font-weight: 700; }

.editorial-visual, .concept-diagram { margin: 0 0 clamp(3rem, 6vw, 6rem); }
.editorial-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1rem, 2vw, 1.8rem);
  background: var(--night);
  box-shadow: 0 1.4rem 3.6rem rgb(11 37 51 / .16);
}
.editorial-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
body[data-page-id="PG-01"] .editorial-visual img { aspect-ratio: 16 / 9; object-position: center; }
.editorial-visual figcaption, .concept-diagram figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  color: #dce9e8;
  background: var(--night);
  font-size: .72rem;
  letter-spacing: .02em;
}
.editorial-visual figcaption span, .concept-diagram figcaption span { color: #a8c1c3; }

.concept-diagram { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.diagram-field {
  position: relative;
  min-height: clamp(15rem, 30vw, 24rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 25%, rgb(188 233 230 / .72), transparent 24%),
    radial-gradient(circle at 80% 70%, rgb(233 169 71 / .22), transparent 24%),
    linear-gradient(135deg, #f9fcfb, #eaf3f2);
}
.diagram-field::before { content: ""; position: absolute; inset: 12% 8%; border: 1px solid rgb(42 168 170 / .24); border-radius: 50%; transform: rotate(-7deg); }
.diagram-field ol { position: relative; z-index: 2; min-height: inherit; margin: 0; padding: clamp(1.4rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: clamp(.8rem, 2vw, 1.4rem); list-style: none; }
.diagram-field li { min-height: 6rem; padding: 1rem; display: grid; place-items: center; text-align: center; border: 1px solid rgb(16 42 58 / .16); border-radius: 1rem; background: rgb(255 255 255 / .82); box-shadow: 0 .8rem 2rem rgb(11 37 51 / .1); backdrop-filter: blur(.35rem); font-size: clamp(.86rem, 1.4vw, 1rem); font-weight: 700; }
.diagram-field li:nth-child(3n + 2) { border-color: rgb(42 168 170 / .42); transform: translateY(-.8rem); }
.diagram-field li:nth-child(3n) { border-color: rgb(233 169 71 / .48); }
.diagram-node { position: absolute; z-index: 2; width: clamp(3.4rem, 8vw, 6.2rem); aspect-ratio: 1; border: .5rem solid var(--white); border-radius: 50%; box-shadow: 0 .8rem 2rem rgb(11 37 51 / .16); }
.node-a { left: 12%; top: 42%; background: var(--night); }
.node-b { left: 46%; top: 18%; background: var(--cyan); }
.node-c { right: 12%; bottom: 17%; background: var(--gold); }
.diagram-path { position: absolute; z-index: 1; height: .18rem; border-radius: 99px; background: var(--cyan); transform-origin: left center; }
.path-a { width: 38%; left: 19%; top: 52%; transform: rotate(-22deg); }
.path-b { width: 36%; left: 54%; top: 31%; transform: rotate(29deg); background: var(--gold); }
.concept-diagram--states .diagram-node { border-radius: .7rem; }
.concept-diagram--rights .node-c, .concept-diagram--correction .node-c { border-radius: 50% 50% 12% 50%; }
.concept-diagram--governance .diagram-field::after, .concept-diagram--verify .diagram-field::after { content: ""; position: absolute; inset: 12%; border: 1px dashed var(--ink-soft); border-radius: 1rem; }
.concept-diagram--origin .node-a { background: var(--gold); }
.concept-diagram--origin .node-b, .concept-diagram--origin .node-c { background: var(--night); opacity: .72; }

.concept-diagram--signal .diagram-field::before {
  inset: 18%;
  border-color: rgb(42 168 170 / .38);
  box-shadow:
    0 0 0 2.8rem rgb(42 168 170 / .08),
    0 0 0 6rem rgb(233 169 71 / .06);
}
.concept-diagram--signal .diagram-field ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.concept-diagram--signal .diagram-field li {
  border-radius: 50% 50% 18% 50%;
  transition: transform 220ms ease, border-color 220ms ease;
}
.concept-diagram--signal .diagram-field li:nth-child(2) { transform: translateY(-1rem); }
.concept-diagram--signal .diagram-field li:nth-child(3) { transform: translateY(1rem); }
.concept-diagram--signal .diagram-field li:nth-child(4) { border-color: rgb(233 169 71 / .65); }

body[data-page-id="FA-PG-13M"] .hero-copy h1 { max-width: 22ch; }
body[data-page-id="FA-PG-13M"] .content-section > p { font-size: 1.12rem; }
body[data-page-id="FA-PG-13M"] .content-section:nth-of-type(odd) { position: relative; }
body[data-page-id="FA-PG-13M"] .content-section:nth-of-type(odd)::before {
  position: absolute;
  top: 2.4rem;
  right: -1.2rem;
  width: .42rem;
  height: 2.8rem;
  border-radius: 99px;
  background: linear-gradient(var(--cyan), var(--gold));
  content: "";
}

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

@media (max-width: 44rem) {
  .concept-diagram--signal .diagram-field ol { grid-template-columns: 1fr; }
  .concept-diagram--signal .diagram-field li:nth-child(2),
  .concept-diagram--signal .diagram-field li:nth-child(3) { transform: none; }
}

@media (max-width: 72rem) {
  .site-header { align-items: flex-start; }
  .global-tools { flex-wrap: wrap; justify-content: flex-end; }
  .primary-nav > ul { overflow-x: auto; }
  .primary-nav li ul { display: none !important; }
  .page-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; }
}

@media (max-width: 52rem) {
  .control-strip { flex-wrap: wrap; justify-content: center; gap: .2rem .85rem; white-space: normal; text-align: center; }
  .site-header { padding-inline: 1rem; display: grid; }
  .global-tools { justify-content: flex-start; }
  .primary-nav > ul { padding-inline: .5rem; }
  .primary-nav a { white-space: nowrap; }
  .page-layout { padding: 3rem 1rem; grid-template-columns: 1fr; }
  .page-rail { position: static; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .page-rail nav { display: none; }
  h1 { font-size: clamp(2.25rem, 11vw, 3.45rem); }
  footer { padding-inline: 1.2rem; display: grid; }
  footer dl { grid-template-columns: 1fr; }
  .editorial-visual figcaption, .concept-diagram figcaption { display: grid; }
  .diagram-field { min-height: 16rem; }
  .diagram-field ol { grid-template-columns: 1fr; }
  .diagram-field li { min-height: 4rem; }
  .diagram-field li:nth-child(3n + 2) { transform: none; }
}

@media (max-width: 32rem) {
  .global-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .language-control { grid-column: 1 / -1; }
  .page-rail { grid-template-columns: 1fr; }
}

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

@media (forced-colors: active) {
  .identity-mark, .control-card, .release-note, .page-rail nav, .source-notes { border: 1px solid CanvasText; }
  .hero-copy::before { background: CanvasText; }
}

@media print {
  .control-strip, .site-header, .primary-nav, .page-rail, footer { display: none; }
  .page-layout { display: block; max-width: none; padding: 0; }
  .content-section { break-inside: avoid; }
  a { text-decoration: none; }
}