/* The public user manual. Plain CSS, no external fonts or scripts (the page's content policy allows only this site). Uses logical
   properties throughout, so the Urdu pages (right to left) mirror themselves with no extra rules. */
:root { --bg: #f5faf6; --card: #ffffff; --ink: #17251c; --sub: #5a6d61; --line: #dfe9e1; --brand: #0f6a38; --brand-ink: #ffffff; --soft: #e9f3ec; --warn: #fff4d6; --warn-line: #e6c25a; --code: #eef3ef; }
@media (prefers-color-scheme: dark) { :root { --bg: #111713; --card: #19211b; --ink: #e8efe9; --sub: #a3b5a9; --line: #2a362d; --brand: #3ec277; --brand-ink: #0b1a10; --soft: #1e2b22; --warn: #2d2812; --warn-line: #8a7326; --code: #202b23; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.docs { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; }
body.lang-ur { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 2.1; }
body.lang-hi { font-family: "Noto Sans Devanagari", "Nirmala UI", "Segoe UI", system-ui, sans-serif; }
body.lang-bn { font-family: "Noto Sans Bengali", "Nirmala UI", "Segoe UI", system-ui, sans-serif; line-height: 1.8; }
a { color: var(--brand); }
a:hover { text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--brand); color: var(--brand-ink); padding: 8px 12px; z-index: 50; }
.skip:focus { inset-inline-start: 8px; }

.btn { display: inline-block; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 10px; padding: 9px 16px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.4; }
.btn.alt { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.btn:hover { filter: brightness(1.06); }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.top .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.top .grow { flex: 1; }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 15px; }
.langs summary::-webkit-details-marker { display: none; }
.langs ul { position: absolute; inset-inline-end: 0; top: 110%; margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.langs li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.langs li a:hover, .langs li a[aria-current] { background: var(--soft); }
.top .btn.app { display: none; }
@media (min-width: 700px) { .top .btn.app { display: inline-block; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 18px; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .wrap { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } .side { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; } }
.side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.side .search input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; }
.side .results { list-style: none; margin: 8px 0 0; padding: 0; }
.side .results li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.side .results li a:hover { background: var(--soft); }
.side .results .snip { display: block; color: var(--sub); font-size: 13px; line-height: 1.5; }
.side .results .none { padding: 8px 10px; color: var(--sub); font-size: 14px; }
.side .topics summary { cursor: pointer; font-weight: 700; margin: 10px 0 6px; }
.side ol { margin: 0; padding-inline-start: 22px; }
.side ol li { margin: 2px 0; }
.side ol a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1.5; }
.side ol a:hover { background: var(--soft); }
.side ol a[aria-current] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }

main { min-width: 0; }
.article, .hero, .cards { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.hero { margin-bottom: 18px; }
.cards { background: transparent; border: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--brand); }
.card strong { display: block; margin-bottom: 4px; color: var(--brand); }
.card span { display: block; color: var(--sub); font-size: 15px; line-height: 1.5; }
.article h1, .hero h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.25; }
.lead { color: var(--sub); font-size: 18px; margin: 0 0 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.body h2 { margin: 34px 0 10px; font-size: 23px; line-height: 1.3; padding-top: 6px; border-top: 1px solid var(--line); }
.body h3 { margin: 24px 0 8px; font-size: 19px; line-height: 1.35; }
.body .anchor { color: var(--line); text-decoration: none; margin-inline-end: 8px; font-weight: 400; }
.body h2:hover .anchor, .body h3:hover .anchor { color: var(--brand); }
.body p { margin: 0 0 14px; }
.body ul, .body ol { margin: 0 0 16px; padding-inline-start: 26px; }
.body li { margin: 5px 0; }
.body blockquote { margin: 16px 0; padding: 12px 16px; background: var(--warn); border-inline-start: 4px solid var(--warn-line); border-radius: 10px; }
.body blockquote p:last-child { margin-bottom: 0; }
.body code { background: var(--code); padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.body table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 15px; display: block; overflow-x: auto; }
.body th, .body td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }
.body th { background: var(--soft); }
.toc { background: var(--soft); border-radius: 12px; padding: 12px 16px; margin: 0 0 20px; }
.toc ul { margin: 6px 0 0; padding-inline-start: 22px; }
.toc li { margin: 3px 0; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.pager a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.pager a:hover { border-color: var(--brand); }
.pager .dir { display: block; font-size: 13px; color: var(--sub); }
.pager .t { font-weight: 600; color: var(--brand); }
.pager .next { text-align: end; }
.foot { max-width: 1120px; margin: 10px auto 40px; padding: 18px; color: var(--sub); font-size: 15px; display: grid; gap: 6px; }
.foot .small { font-size: 14px; }

/* the language chooser at /docs */
body.landing { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.choose { text-align: center; max-width: 560px; width: 100%; }
.choose h1 { margin: 8px 0 0; font-size: 34px; }
.lang-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lang-list a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; color: var(--ink); text-decoration: none; }
.lang-list a:hover { border-color: var(--brand); }
.lang-list strong { display: block; font-size: 22px; color: var(--brand); }
.lang-list span { color: var(--sub); font-size: 15px; }

@media print {
  body.docs { background: #fff; color: #000; font-size: 12pt; }
  .top, .side, .pager, .foot, .noprint, .toc, .body .anchor { display: none !important; }
  .wrap { display: block; padding: 0; max-width: none; }
  .article { border: 0; padding: 0; }
  .body a { color: #000; text-decoration: none; }
  .body h2 { break-after: avoid; }
}
.body img { display: block; max-width: 100%; height: auto; margin: 18px auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.body img[src*="/a-"] { max-width: min(100%, 340px); }