/* The base shared by the content pages: the page frame, the skip link and the signed-in header fold (FE-2).
   Every token comes from assets/tokens.css, which each page links first; the header, its menu and the footer
   are drawn by assets/menu.css, which each page with the header loads last. */
/* The hidden attribute must always win over author display rules. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
/* An in-page link (#cli, #webhooks) lands its heading below the sticky header (72 px), not under it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--font-display); font-weight: 600; }

/* The light theme's drifting colour fields: the dark UI is a flat near-black ground, so they stay out of sight
   (the markup goes as each page moves to the dark layout). */
.viewport-atmosphere { display: none; }

.container { width: min(100%, calc(var(--page-container) + (2 * var(--page-gutter)))); margin-inline: auto; padding-inline: var(--page-gutter); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* The header's menu button and panel are hidden until a fold shows them (assets/menu.css). */
.mobile-nav-toggle, .mobile-nav-panel { display: none; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: 2px; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
main { animation: page-in 360ms cubic-bezier(.16,1,.3,1) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* A11Y: the first stop for keyboard users: the reference's white pill. */
.skip-link { position: absolute; inset-inline-start: 12px; top: -64px; z-index: 1000; padding: 10px 16px; border-radius: var(--r-pill); background: var(--pill); color: var(--pill-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: top 120ms ease; }
.skip-link:focus { top: 12px; }

/* ===== I18N-1: Arabic and right-to-left. Logical properties mirror the layout; these cover the type, the
   flipped arrow glyphs and gradients that should run the other way. ===== */
html[lang="ar"] body { font-family: var(--font-arabic), var(--font-body); }
html[lang="ar"] :where(h1, h2, h3, .btn-primary, .btn-secondary, summary) { font-family: var(--font-arabic), var(--font-display); letter-spacing: 0; }
html[lang="ar"] :where(h1, h2, h3) { line-height: 1.3; }
[dir="rtl"] :where(.btn-primary svg, .btn-secondary svg, .mobile-nav-action span[aria-hidden]) { transform: scaleX(-1); }
[dir="rtl"] .headline-gradient { background-image: linear-gradient(256deg, var(--fg) 4%, color-mix(in oklch, var(--accent) 82%, var(--fg)) 76%, var(--accent)); }
[dir="rtl"] :where(code, pre, kbd, .item-ref) { direction: ltr; unicode-bidi: isolate; }

/* KIT-1: signed in, between the menu fold and a roomy desktop the row cannot hold the links, the usage chip,
   "+ New bot" and Account at once (measured with the real faces and a full allowance on the chip). Those three
   move into the menu button: the same panel a phone uses, here holding only them, small, under the button at
   the inline end. bidi-app.js marks the row; the rule below takes the three out of the row, assets/menu.css
   shows the button and its panel. */
@media (min-width: 1041px) and (max-width: 1279px) {
  .topnav-inner[data-crowded] .desktop-nav :is([data-bidi-nav], [data-bidi-usage], [data-bidi-newbot]) { display: none; }
}
html[dir="rtl"] body { font-family: var(--font-arabic), var(--font-body); }
html[dir="rtl"] :is(h1, h2, h3) { font-family: var(--font-arabic); letter-spacing: 0; }

/* The UAE dirham sign (U+20C3, the founder's copy sheet 2026-10-11) is too new for the fonts: pricing.js
   draws it from the Central Bank's own artwork (assets/dirham.svg) as a mask in the text colour, as tall
   as the digits and never under 12px, to the left of its number, as the bank's guideline asks. */
.dirham-amount { white-space: nowrap; unicode-bidi: isolate; }
.dirham-sign {
  display: inline-block; inline-size: max(.83em, 13.8px); block-size: max(.72em, 12px); vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url("dirham.svg") center / contain no-repeat; mask: url("dirham.svg") center / contain no-repeat;
}