@import url("/docs-base.css");

/* Lists should read as children of the section, not as a second heading rail. */
.doc-section > ul,
.doc-section > ol:not(.steps) {
  padding-inline-start: 2rem;
  padding-inline-end: 0;
}

.doc-section > ul > li,
.doc-section > ol:not(.steps) > li {
  padding-inline-start: 0.15rem;
}

.doc-section > ul ul,
.doc-section > ol:not(.steps) ol,
.doc-section > ol:not(.steps) ul,
.doc-section > ul ol {
  padding-inline-start: 1.75rem;
  padding-inline-end: 0;
}

/* One compact header replaces the separate caption and language toolbar. */
.code-figure > .code-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 7px 9px 7px 15px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.09);
  background: color-mix(in srgb, var(--docs-code-bg) 86%, white);
  color: #c9bda9;
  direction: rtl;
}

.code-heading-title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
}

.code-heading-language {
  color: #aa9d88;
  font-family: var(--docs-code-font);
  font-size: 0.69rem;
  font-weight: 400;
  white-space: nowrap;
}

.code-toolbar {
  display: none;
}

.copy-code {
  display: inline-grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 7px;
  color: #d9cebc;
}

.copy-code:hover,
.copy-code:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff7ea;
}

.copy-code.copied {
  border-color: color-mix(in srgb, var(--docs-ok) 65%, transparent);
  background: color-mix(in srgb, var(--docs-ok) 24%, transparent);
  color: #e9edbe;
}

.copy-code.failed {
  border-color: color-mix(in srgb, var(--docs-error) 70%, transparent);
  color: #f2b6aa;
}

.copy-code-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Force every Zaid source line to use an RTL base direction, even when its
   first visible character is a bracket or a digit. */
.code-block.language-zaid[dir="rtl"],
.code-block.language-arabic[dir="rtl"] {
  unicode-bidi: isolate;
}

.code-line {
  unicode-bidi: isolate;
}

/* Used only in the example that teaches indentation. The highlighted blank
   area is still made of the original spaces, so copying the program remains
   byte-for-byte correct. */
.indentation-focus {
  display: inline-block;
  min-width: 2ch;
  border-radius: 3px;
  background: color-mix(in srgb, var(--zd-syn-kw) 22%, transparent);
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--zd-syn-kw) 82%, white);
}

/* Frozen snapshots may still carry the old one-link examples group. Present
   that link as part of the preceding navigation instead of as an empty-looking
   section of its own. */
.nav-group:has(> ul > li:only-child > a[href$="/examples/"]) {
  margin-block-start: 2px;
  padding-block-start: 0;
  border-block-start: 0;
}

.nav-group:has(> ul > li:only-child > a[href$="/examples/"]) > h2 {
  display: none;
}

/* The logo is enough in the compact header. The build removes this text from
   generated pages; this rule also prevents a stale cached page from leaving a
   gap beside the mark. */
.site-header .brand {
  gap: 0;
}

.site-header .brand > span {
  display: none;
}

/* Documentation source blocks use the same night palette, source highlighter,
   font metrics, and token weights as the playground editor. */
.code-figure[data-theme="night"] {
  --docs-code-bg: var(--zd-surface);
  --docs-code-ink: var(--zd-syn-name);
  --zd-syn-kw: var(--zd-clay);
  --zd-syn-name: var(--zd-ink);
  --zd-syn-num: var(--zd-gold);
  --zd-syn-str: var(--zd-olive);
  --zd-syn-lit: var(--zd-madder);
  --zd-syn-comment: var(--zd-muted);
  --zd-syn-punct: var(--zd-muted);
  --zd-syn-edu: var(--zd-plum);
  --zd-syn-edu-bg: var(--zd-plum-tint);
  border-color: var(--zd-border);
  background: var(--zd-surface);
}

.code-figure[data-theme="night"] > .code-heading {
  border-block-end-color: var(--zd-border);
  background: color-mix(in srgb, var(--zd-surface) 55%, var(--zd-border));
  color: var(--zd-muted);
}

.code-figure[data-theme="night"] .code-heading-language {
  color: var(--zd-muted);
}

.code-figure[data-theme="night"] .copy-code {
  border-color: var(--zd-border);
  background: var(--zd-surface);
  color: var(--zd-muted);
}

.code-figure[data-theme="night"] .copy-code:hover,
.code-figure[data-theme="night"] .copy-code:focus-visible {
  border-color: var(--zd-muted);
  background: color-mix(in srgb, var(--zd-surface) 66%, var(--zd-border));
  color: var(--zd-clay);
}

.code-figure[data-theme="night"] .code-block {
  background: var(--zd-surface);
  color: var(--zd-syn-name);
  font-family: var(--zd-font-code);
  font-size: 13.5px;
  line-height: 2.2;
  word-spacing: normal;
}

/* Each rendered line keeps its own base direction. This lets Arabic results
   align right while Latin output remains LTR, and gives number-only lines the
   surrounding RTL panel as their fallback. */
.code-line {
  display: inline-block;
  min-width: 100%;
  unicode-bidi: isolate;
}

.code-line[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.code-line[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.code-line[dir="auto"] {
  text-align: start;
}

.code-block.language-text {
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
}

.code-block.language-text .code-line {
  text-align: start;
}

.code-figure .word,
.code-figure [data-highlight-kind="word"] {
  color: var(--zd-syn-name);
  font-weight: 400;
}

.code-figure .word.vocabulary,
.code-figure [data-highlight-kind="word"][data-vocabulary] {
  color: var(--zd-syn-kw);
  font-weight: 700;
}

.code-figure .literal,
.code-figure [data-highlight-kind="literal"] {
  color: var(--zd-syn-lit);
}

.code-figure .number,
.code-figure [data-highlight-kind="number"] {
  color: var(--zd-syn-num);
}

.code-figure .string,
.code-figure [data-highlight-kind="string"] {
  color: var(--zd-syn-str);
}

.code-figure .comment,
.code-figure [data-highlight-kind="comment"] {
  color: var(--zd-syn-comment);
}

.code-figure .educational-prefix,
.code-figure .educational-prose,
.code-figure [data-highlight-kind="educational-prefix"],
.code-figure [data-highlight-kind="educational-prose"] {
  color: var(--zd-syn-edu);
}

.code-figure .educational-prefix,
.code-figure [data-highlight-kind="educational-prefix"] {
  font-weight: 700;
}

.code-figure .delimiter,
.code-figure .operator,
.code-figure .punctuation,
.code-figure [data-highlight-kind="delimiter"],
.code-figure [data-highlight-kind="operator"],
.code-figure [data-highlight-kind="punctuation"] {
  color: var(--zd-syn-punct);
}

.code-figure .educational-line {
  padding-inline: 0.35rem;
  background: var(--zd-syn-edu-bg);
  color: var(--zd-syn-edu);
}

.code-figure .educational-line-start {
  border-start-start-radius: var(--zd-radius);
  border-start-end-radius: var(--zd-radius);
}

.code-figure .educational-line-end {
  border-end-start-radius: var(--zd-radius);
  border-end-end-radius: var(--zd-radius);
}

/* Tables present Arabic and Zaid forms from the right. Inline source remains
   isolated so punctuation and digits do not reorder neighbouring prose. */
.table-scroll,
.table-scroll table {
  direction: rtl;
}

.table-scroll th,
.table-scroll td {
  text-align: right;
}

.table-scroll .inline-code {
  unicode-bidi: isolate;
}

/* The richer example layouts override the base font size; bring those panes
   back to the playground's source metrics too. */
.method-example-pane .code-block,
.construct-example-pane .code-block {
  font-size: 13.5px;
  line-height: 2.2;
}

/* Inline punctuation belongs to the code fragment before it. Keeping the two
   inside one bidi-isolated inline run prevents an Arabic comma from jumping
   to the next item. The run stays inline rather than becoming an atomic flex
   box, so long method names can wrap without widening their card. */
.inline-code-run {
  display: inline;
  direction: rtl;
  unicode-bidi: isolate;
  vertical-align: baseline;
}

.inline-code-run > .inline-code {
  display: inline;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  unicode-bidi: isolate;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.inline-punctuation {
  font-family: var(--docs-font);
  white-space: nowrap;
}

/* Tables are reference material, not prose columns. Preserve every cell on one
   line and let the framed region scroll instead of compressing or wrapping it. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.table-scroll table {
  width: max-content;
  min-width: 100%;
}

.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}

.table-scroll th[dir="ltr"],
.table-scroll td[dir="ltr"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.table-scroll th[dir="ltr"] .inline-code,
.table-scroll td[dir="ltr"] .inline-code {
  direction: ltr;
  text-align: left;
}

.table-scroll:focus-visible {
  outline-offset: 2px;
}

/* Match the playground's circular theme reveal. The script animates the new
   root snapshot from the toggle to the farthest viewport corner. */
:root.theme-sweep::view-transition-old(root),
:root.theme-sweep::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

:root.theme-sweep::view-transition-old(root) {
  z-index: 0;
}

:root.theme-sweep::view-transition-new(root) {
  z-index: 1;
}

:root.theme-sweep .version-picker,
:root.theme-sweep .search-button,
:root.theme-sweep .playground-link,
:root.theme-sweep .icon-button {
  transition-duration: 0s;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Every reader-facing inline-code chip uses this one box model. The qualified
   selector deliberately outranks older context rules in callouts and generated
   reference sections, while dedicated components without `inline-code` keep
   their own presentation. Short tokens use their preferred width; a genuinely
   long token may wrap only when it is wider than its containing block. */
code.inline-code,
.doc-article code.inline-code {
  display: inline-block;
  box-sizing: border-box;
  place-items: normal;
  align-items: normal;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0.02em 0.28em;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--docs-primary) 14%, var(--docs-border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--docs-primary) 7%, var(--docs-surface));
  color: var(--docs-primary-deep);
  font-family: var(--docs-code-font);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  vertical-align: baseline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  word-spacing: 0.08em;
  unicode-bidi: isolate;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A code chip and the punctuation immediately following it form one isolated
   RTL text run. The wrapper is an ordinary inline formatting context—not flex,
   grid, or an inline block—so punctuation does not change the chip's dimensions
   or shrink-to-fit calculation. */
.inline-code-run {
  display: inline;
  direction: rtl;
  unicode-bidi: isolate;
  vertical-align: baseline;
  white-space: nowrap;
}

.inline-code-run > code.inline-code {
  display: inline-block;
}

.inline-punctuation {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: var(--docs-font);
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

/* Reference tables stay single-line and horizontally scrollable. */
.table-scroll code.inline-code {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Syntax forms contain real line breaks. Preserve them so conditions, loops,
   and functions read like the blocks learners will write. */
.syntax-list > code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: start;
  tab-size: 2;
}