/* Edvera LMS documentation (index.html, licenses.html).
   Design system "Rahnama": charcoal ink bands, lime used sparingly (the main call to action, the
   current contents item, focus on dark grounds), paper ground, hairline rules, near-square corners
   (4 and 8 px), the pixel mark built from squares only. No gradients, no shadows on cards.
   Colours, spacing and radii follow demo/design-system/tokens.json. Logical properties throughout.
   Fonts are self-hosted: Open Sans and Vazirmatn, SIL Open Font License (fonts/<family>/OFL.txt). */

/* ---------- Fonts ---------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/open-sans/OpenSans-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/open-sans/OpenSans-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/vazirmatn/Vazirmatn-Regular-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/vazirmatn/Vazirmatn-Bold-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
/* Metric-matched fallback, so the text does not jump when Open Sans arrives. */
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.4%; ascent-override: 101%; descent-override: 27.7%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --color-bg: #f7f7f4;
  --color-surface: #ffffff;
  --color-surface-2: #ecede6;
  --color-border: #dcded4;
  --color-border-strong: #85887a;
  --color-text: #151515;
  --color-text-muted: #5d6056;
  --color-rule: #151515;
  --color-label: #4e7a1c;
  --color-accent: #c9ec8c;
  --color-accent-hover: #b6de6c;
  --color-on-accent: #151515;
  --color-sage: #bdc6a4;
  --color-ink: #151515;
  --color-ink-line: #383a31;
  --color-on-ink: #ffffff;
  --color-on-ink-muted: #a3a698;
  --color-warning: #a15c00;
  --color-warn-soft: #faf3e7;
  --color-warn-line: #e5d2ae;
  --color-code-bg: #ecede6;
  --color-pre-bg: #151515;
  --color-pre-line: #151515;
  --color-pre-text: #ecede6;
  --color-marker-ring: #151515;
  --color-focus: #151515;
  --color-chip: #151515;
  --color-on-chip: #ffffff;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 4px; --radius-btn: 8px; --radius-card: 8px;
  --font-sans: "Open Sans", "Vazirmatn", "Open Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --header-h: 56px;
  --side-w: 288px;
  --prose: 660px;
}
/* Dark: the page turns charcoal, the ink bands go one step deeper so they still read as bands. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1b1c19; --color-surface: #222420; --color-surface-2: #2b2c27; --color-border: #383a31; --color-border-strong: #85887a;
  --color-text: #ecede6; --color-text-muted: #a8ab9e; --color-rule: #85887a; --color-label: #c9ec8c;
  --color-ink: #111210;
  --color-warning: #e3a44c; --color-warn-soft: #29241a; --color-warn-line: #4f4229;
  --color-code-bg: #2f312a; --color-pre-bg: #111210; --color-pre-line: #383a31;
  --color-marker-ring: transparent; --color-focus: #c9ec8c; --color-chip: #383a31; --color-on-chip: #ecede6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #1b1c19; --color-surface: #222420; --color-surface-2: #2b2c27; --color-border: #383a31; --color-border-strong: #85887a;
    --color-text: #ecede6; --color-text-muted: #a8ab9e; --color-rule: #85887a; --color-label: #c9ec8c;
    --color-ink: #111210;
    --color-warning: #e3a44c; --color-warn-soft: #29241a; --color-warn-line: #4f4229;
    --color-code-bg: #2f312a; --color-pre-bg: #111210; --color-pre-line: #383a31;
    --color-marker-ring: transparent; --color-focus: #c9ec8c; --color-chip: #383a31; --color-on-chip: #ecede6;
  }
}
@media (min-width: 1024px) { :root { --header-h: 64px; } }
@media (min-width: 1280px) { :root { --side-w: 304px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 16px; line-height: 28px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
:lang(ar), :lang(fa) { letter-spacing: 0 !important; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
img, svg { max-width: 100%; }
img { height: auto; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dx-bar :focus-visible, .dx-hero :focus-visible, .dx-foot :focus-visible, .dx-code :focus-visible, .dx-totop:focus-visible { outline-color: var(--color-accent); }
main:focus { outline: 0; }
.sr, .dx-offscreen { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.dx-ic--sm { width: 16px; height: 16px; }
.skip { position: absolute; z-index: 100; inset-inline-start: var(--space-4); top: -100px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-btn); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; line-height: 1.3; text-decoration: none; }
.skip:focus { top: var(--space-2); outline-color: var(--color-on-accent); }

/* ---------- Top bar (ink) ---------- */
.dx-bar { position: sticky; top: 0; z-index: 50; background: var(--color-ink); color: var(--color-on-ink); border-bottom: 1px solid var(--color-ink-line); }
.dx-bar__in { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding-inline: var(--space-4); }
.dx-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--color-on-ink); text-decoration: none; white-space: nowrap; }
.dx-mark { width: 24px; height: 24px; flex: none; display: block; }
.dx-mark .c { fill: var(--color-sage); }
.dx-mark .l { fill: var(--color-accent); }
.dx-brand__word { font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.dx-brand__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dx-ver { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; line-height: 1; color: var(--color-on-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-quick { display: none; }
.dx-bar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.dx-iconbtn, .dx-tocbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-btn); background: transparent; color: var(--color-on-ink); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.dx-iconbtn { padding: 0; color: var(--color-on-ink-muted); }
.dx-iconbtn:hover, .dx-tocbtn:hover { border-color: var(--color-on-ink-muted); color: var(--color-on-ink); }
.dx-tocbtn[aria-expanded="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.dx-iconbtn[hidden], .dx-tocbtn[hidden] { display: none; }
.dx-theme .i-sun { display: none; }
.dx-theme[aria-pressed="true"] .i-sun { display: block; }
.dx-theme[aria-pressed="true"] .i-moon { display: none; }
@media (min-width: 640px) {
  .dx-bar__in { padding-inline: var(--space-6); gap: var(--space-4); }
  .dx-brand__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; padding-inline-start: 12px; border-inline-start: 1px solid var(--color-ink-line); font-size: 15px; line-height: 20px; color: var(--color-on-ink-muted); }
}
@media (min-width: 1024px) {
  .dx-tocbtn { display: none; }
  .dx-quick { display: block; margin-inline-start: auto; }
  .dx-quick ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .dx-quick a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--radius-btn); color: var(--color-on-ink-muted); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: color .15s ease-out; }
  .dx-quick a:hover { color: var(--color-on-ink); }
  .dx-bar__end { margin-inline-start: var(--space-2); }
}
@media (min-width: 1024px) and (max-width: 1199px) { .dx-quick a { padding: 0 7px; font-size: 13px; } .dx-bar__in { gap: var(--space-3); } .dx-brand__label { font-size: 14px; } }

/* ---------- Page head (ink band) ---------- */
.dx-hero { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-on-ink); border-bottom: 1px solid var(--color-ink-line); }
.dx-hero__in { position: relative; padding: 40px var(--space-4) 44px; }
.dx-kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: 13px; line-height: 20px; font-weight: 700; color: var(--color-on-ink-muted); }
.dx-sq { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--color-accent); }
.dx-hero h1 { margin: 0; max-width: 18em; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.015em; }
.dx-hero .meta { margin: var(--space-3) 0 0; max-width: 40em; font-size: 16px; line-height: 28px; color: var(--color-on-ink-muted); }
.dx-hero .meta a { color: var(--color-on-ink); text-underline-offset: 4px; }
.dx-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; }
.dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-btn); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background-color .15s ease-out, border-color .15s ease-out; }
.dx-btn .dx-ic { transition: transform .2s ease-out; }
.dx-btn:hover .dx-ic { transform: translateX(3px); }
.dx-btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.dx-btn--accent:hover { background: var(--color-accent-hover); }
.dx-btn--line { border-color: var(--color-ink-line); color: var(--color-on-ink); }
.dx-btn--line:hover { border-color: var(--color-on-ink-muted); }
.dx-pix { position: absolute; display: none; width: 112px; height: 112px; inset-inline-end: var(--space-6); top: 50%; translate: 0 -50%; }
.dx-pix rect { fill: var(--color-ink-line); }
.dx-pix .s { fill: var(--color-sage); }
.dx-pix .l { fill: var(--color-accent); }
@media (min-width: 640px) { .dx-hero__in { padding-inline: var(--space-6); } }
@media (min-width: 768px) { .dx-pix { display: block; } .dx-hero__in > :not(.dx-pix) { margin-inline-end: 152px; } }
@media (min-width: 1024px) {
  .dx-hero__in { padding: 64px var(--space-8) 64px; }
  .dx-hero h1 { font-size: 40px; line-height: 48px; }
  .dx-pix { width: 152px; height: 152px; inset-inline-end: 64px; }
  .dx-hero__in > :not(.dx-pix) { margin-inline-end: 216px; }
}

/* ---------- Layout ---------- */
.dx-layout { position: relative; }
main { display: block; min-width: 0; padding: var(--space-8) var(--space-4) 80px; }
@media (min-width: 640px) { main { padding-inline: var(--space-6); } }
@media (min-width: 1024px) {
  .dx-layout { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  main { padding: var(--space-12) var(--space-12) 112px 56px; }
  .dx-layout--single { display: block; }
  .dx-layout--single main { max-width: 1104px; padding-inline: var(--space-8); }
}

/* ---------- Sidebar: contents ---------- */
.dx-side { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.dx-side__in { padding: 0 var(--space-4) var(--space-8); }
.dx-search { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-6) var(--space-4) var(--space-3); background: var(--color-bg); }
.dx-search[hidden] { display: none; }
.dx-search__field { position: relative; }
.dx-search__field .dx-ic { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; color: var(--color-text-muted); pointer-events: none; }
.dx-search input { width: 100%; height: 44px; margin: 0; padding-block: 0; padding-inline: 38px 40px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-btn); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 14px; line-height: 1.3; -webkit-appearance: none; appearance: none; }
.dx-search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.dx-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dx-search input:focus-visible { outline-offset: 1px; }
.dx-search kbd { position: absolute; inset-inline-end: 10px; top: 50%; translate: 0 -50%; min-width: 22px; text-align: center; pointer-events: none; }
.dx-search input:focus + kbd, .dx-search input:not(:placeholder-shown) + kbd { display: none; }
.dx-search__status { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.dx-search__status:empty { display: none; }
.dx-side ol { margin: 0; padding: 0; list-style: none; }
.dx-side li { margin: 0; }
.dx-side li[hidden], .dx-side .toc-h[hidden], .dx-side ol[hidden] { display: none; }
.dx-side .toc-h { margin: var(--space-6) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.dx-side nav > .toc-h:first-of-type { margin-top: var(--space-2); }
.dx-side ol a { position: relative; display: block; padding-block: 6px; padding-inline: 22px var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transition: background-color .15s ease-out; }
.dx-side ol ol { margin: 2px 0 var(--space-2); }
.dx-side ol ol a { padding-inline-start: 34px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--color-text-muted); }
.dx-side ol a:hover { background: var(--color-surface-2); color: var(--color-text); }
.dx-side ol a[aria-current] { background: var(--color-surface-2); color: var(--color-text); font-weight: 700; }
.dx-side ol a[aria-current]::before { content: ""; position: absolute; inset-inline-start: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--color-accent); box-shadow: 0 0 0 1px var(--color-marker-ring); }
.dx-side ol ol a[aria-current]::before { inset-inline-start: 19px; }
.dx-side .is-trail > a { font-weight: 700; }
.dx-side__more { margin: var(--space-6) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 13px; line-height: 20px; }
.dx-side__more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 1024px) {
  .dx-side { position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; border-inline-end: 1px solid var(--color-border); scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
  .dx-side__in { padding-block: 0 var(--space-8); padding-inline: var(--space-6) var(--space-4); }
  .dx-search { margin-inline: calc(-1 * var(--space-6)) calc(-1 * var(--space-4)); padding-inline: var(--space-6) var(--space-4); }
}
/* Phones and tablets with scripts: the contents open as a panel under the top bar. */
@media (max-width: 1023px) {
  .js .dx-side { display: none; position: fixed; z-index: 45; top: var(--header-h); inset-inline: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; }
  .js .dx-side.is-open { display: block; }
  .js.toc-open { overflow: hidden; }
  .dx-side__in { max-width: 640px; margin-inline: auto; }
}

/* ---------- Sections and headings ---------- */
.dx-sec { position: relative; max-width: 1000px; margin-top: 88px; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
main > .dx-sec:first-child, main > .dx-intro + .dx-sec { margin-top: 0; }
.dx-sec > * { max-width: var(--prose); }
.dx-sec > :is(.tw, .dx-code, figure, ol.start-map, ol.steps, dl.glossary, .dx-idx) { max-width: none; }
.dx-idx { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-8); font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.dx-idx__n { color: var(--color-text); }
.dx-idx__sq { width: 6px; height: 6px; flex: none; background: var(--color-text); }
h1, h2, h3, h4 { overflow-wrap: break-word; }
main h2 { margin: 0 0 var(--space-4); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.012em; scroll-margin-top: 48px; }
main h3 { margin: 56px 0 var(--space-3); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.006em; }
main h4 { margin: 36px 0 var(--space-2); font-size: 17px; line-height: 26px; font-weight: 700; }
main h2 + h3, main .purpose + h3 { margin-top: var(--space-8); }
@media (min-width: 1024px) { main h2 { font-size: 28px; line-height: 36px; } .dx-sec { margin-top: 112px; } }
main p, main ul, main ol, main dl { margin: 0 0 var(--space-4); }
main li { margin: 6px 0; }
main li > p { margin-bottom: var(--space-2); }
main ul { padding-inline-start: 1.25em; list-style: square; }
main ol { padding-inline-start: 1.5em; }
main li::marker { color: var(--color-text-muted); font-weight: 700; }
main strong { font-weight: 700; }
main a { color: var(--color-text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; transition: text-decoration-color .15s ease-out; }
main a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.lead { font-size: 18px; line-height: 30px; }
.purpose { margin: 0 0 var(--space-6) !important; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); font-size: 15px; line-height: 26px; color: var(--color-text-muted); }
.purpose strong { color: var(--color-label); }

/* ---------- Inline code, keys and menu paths ---------- */
code, kbd, pre { font-family: var(--font-mono); }
code { padding: .12em .38em; border-radius: var(--radius-sm); background: var(--color-code-bg); font-size: .875em; overflow-wrap: anywhere; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--color-border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.path { padding: .1em .4em; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-surface); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.purpose .path, figcaption .path { background: transparent; }

/* ---------- Code blocks ---------- */
pre { margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-6); overflow-x: auto; border: 1px solid var(--color-pre-line); border-radius: var(--radius-card); background: var(--color-pre-bg); color: var(--color-pre-text); font-size: 13.5px; line-height: 1.7; tab-size: 4; scrollbar-width: thin; scrollbar-color: #5d6056 transparent; }
pre code { padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
.dx-code { position: relative; margin: var(--space-6) 0; border: 1px solid var(--color-pre-line); border-radius: var(--radius-card); background: var(--color-pre-bg); }
.dx-code pre { margin: 0; padding-top: 0; border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.dx-code__bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); min-height: 44px; padding-block: 6px 2px; padding-inline: var(--space-6) 6px; }
.dx-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-sm); background: transparent; color: var(--color-on-ink); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.dx-copy:hover { border-color: var(--color-on-ink-muted); }
.dx-copy.is-done { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.dx-copy__hint { margin-inline-end: auto; font-size: 12px; line-height: 1.4; color: var(--color-on-ink-muted); }

/* ---------- Tables ---------- */
.tw { margin: var(--space-6) 0; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.tw:focus-visible { outline-offset: 3px; }
table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 22px; }
th, td { padding: 11px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--color-border); }
th + th, td + td, th + td, td + th { border-inline-start: 1px solid var(--color-border); }
thead th { background: var(--color-surface); font-size: 13px; font-weight: 700; line-height: 20px; border-bottom-color: var(--color-rule); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th[colspan] { padding-top: var(--space-4); padding-bottom: var(--space-2); background: var(--color-bg); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
td code { font-size: .9em; }
.tw td code { overflow-wrap: normal; }
@media (max-width: 700px) { .tw table.wide { min-width: 640px; } .tw table.xwide { min-width: 860px; } }
/* Scripts mark each table: when it fits, its header sticks under the top bar; when it is wider
   than the column and tall, it becomes a scroll box of its own with a sticky header. */
.js .tw.is-fit { overflow: visible; }
.js .tw.is-fit thead th { position: sticky; top: var(--header-h); z-index: 1; }
.js .tw.is-fit thead th:first-child { border-start-start-radius: 7px; }
.js .tw.is-fit thead th:last-child { border-start-end-radius: 7px; }
.js .tw.is-boxed { max-height: 72vh; overflow: auto; }
.js .tw.is-boxed thead th { position: sticky; top: 0; z-index: 1; }

/* ---------- Figures: framed screenshots ---------- */
figure { width: fit-content; max-width: 100%; margin: var(--space-6) 0 var(--space-8); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
figure img { display: block; max-width: 100%; height: auto; background: #ffffff; }
figcaption { position: relative; padding-block: 10px 11px; padding-inline: 32px 14px; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 20px; color: var(--color-text-muted); }
figcaption::before { content: ""; position: absolute; inset-inline-start: 14px; top: 17px; width: 6px; height: 6px; background: var(--color-text-muted); }

/* ---------- Callouts ---------- */
.note, .warn { position: relative; margin: var(--space-6) 0; padding-block: var(--space-4); padding-inline: 44px var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.note::before, .warn::before { content: ""; position: absolute; inset-inline-start: 20px; top: calc(var(--space-4) + 10px); width: 8px; height: 8px; background: var(--color-text); }
.warn { border-color: var(--color-warn-line); background: var(--color-warn-soft); }
.warn::before { background: var(--color-warning); }
.note > :last-child, .warn > :last-child { margin-bottom: 0; }
.dev { position: relative; padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); font-size: 15px; line-height: 26px; }
.dev-tag { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: var(--space-2); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-chip); color: var(--color-on-chip); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.dev-tag::before { content: ""; width: 6px; height: 6px; background: var(--color-accent); }

/* ---------- Lists with a role ---------- */
ol.steps { margin: var(--space-6) 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps > li { position: relative; counter-increment: step; margin: 0; padding-block: var(--space-6); padding-inline: 64px 0; border-top: 1px solid var(--color-border); }
ol.steps > li:last-child { border-bottom: 1px solid var(--color-border); }
ol.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: var(--space-6); font-size: 28px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--color-text); }
ol.steps > li > :not(figure, .tw, .dx-code) { max-width: var(--prose); }
ol.steps > li > :last-child { margin-bottom: 0; }
ol.steps figure { margin: var(--space-4) 0 var(--space-2); }
@media (max-width: 639px) {
  ol.steps > li { padding-inline-start: 0; }
  ol.steps > li::before { position: static; display: block; margin-bottom: var(--space-3); font-size: 24px; line-height: 24px; }
}
ol.start-map { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--space-6) 0 var(--space-8); padding: 0; list-style: none; counter-reset: map; border-top: 1px solid var(--color-border); border-inline-start: 1px solid var(--color-border); }
ol.start-map li { counter-increment: map; margin: 0; border-inline-end: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
ol.start-map a { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); height: 100%; min-height: 96px; padding: var(--space-4); font-size: 15px; line-height: 22px; font-weight: 700; text-decoration: none; transition: background-color .15s ease-out, color .15s ease-out; }
ol.start-map a::before { content: counter(map, decimal-leading-zero); font-size: 13px; line-height: 16px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
ol.start-map a:hover { background: var(--color-ink); color: var(--color-on-ink); }
ol.start-map a:hover::before { color: var(--color-accent); }
@media (min-width: 560px) { ol.start-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { ol.start-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
main dl > dt { margin-top: var(--space-6); font-weight: 700; }
main dl > dd { margin: 4px 0 var(--space-2); }
main dl > dd > :last-child { margin-bottom: 0; }
dl.glossary { margin: var(--space-6) 0; border-top: 1px solid var(--color-border); }
dl.glossary > dt { margin: 0; padding: var(--space-4) 0 0; }
dl.glossary > dd { margin: 4px 0 0; padding: 0 0 var(--space-4); border-bottom: 1px solid var(--color-border); max-width: var(--prose); }
@media (min-width: 768px) {
  dl.glossary { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); column-gap: var(--space-8); }
  dl.glossary > dt { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
  dl.glossary > dd { margin: 0; padding: var(--space-4) 0; }
}
/* Example conversations (Connect AI assistants): who speaks, then what is said or done. */
dl.mcp-chat { margin: var(--space-4) 0 var(--space-6); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--color-border); }
dl.mcp-chat > dt { margin-top: var(--space-4); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-label); }
dl.mcp-chat > dt:first-child { margin-top: 0; }
dl.mcp-chat > dt:nth-of-type(odd) + dd { font-style: italic; }
/* Troubleshooting entries and the upload fixes: the message as a heading line with a square. */
dl.fixes > dt, #troubleshooting ~ dl > dt { position: relative; margin-top: var(--space-6); padding-top: var(--space-4); padding-inline-start: 22px; border-top: 1px solid var(--color-border); line-height: 26px; }
dl.fixes > dt::before, #troubleshooting ~ dl > dt::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(var(--space-4) + 9px); width: 8px; height: 8px; background: var(--color-text); }
dl.fixes > dt::before { background: var(--color-warning); }
dl.fixes > dd, #troubleshooting ~ dl > dd { margin: var(--space-2) 0 0; padding-inline-start: 22px; }
.purpose + dl > dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.purpose + dl > dt:first-child::before { top: 9px; }

/* ---------- Licences page ---------- */
.onpage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 var(--space-8); padding: var(--space-4) 0; border-block: 1px solid var(--color-border); font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.onpage strong { margin-inline-end: var(--space-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.onpage a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-surface); color: var(--color-text); font-weight: 700; text-decoration: none; }
.onpage a:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.dx-intro { max-width: 1000px; margin-bottom: 72px; }
.dx-intro > * { max-width: var(--prose); }
.dx-intro > .onpage { max-width: none; }
pre.license-text { white-space: pre-wrap; }

/* ---------- Footer (ink) ---------- */
.dx-foot { background: var(--color-ink); color: var(--color-on-ink-muted); border-top: 1px solid var(--color-ink-line); }
.dx-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-8) var(--space-4); font-size: 14px; line-height: 22px; }
.dx-foot p { margin: 0; }
.dx-foot a { color: var(--color-on-ink); text-underline-offset: 4px; }
.dx-foot .dx-brand { min-height: 0; }
.dx-foot__top { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 700; }
@media (min-width: 640px) { .dx-foot__in { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .dx-foot__in { padding: 40px var(--space-8); } }

/* ---------- Back to top (scripts show it after the first screens) ---------- */
.dx-totop { position: fixed; z-index: 40; inset-inline-end: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-ink-line); border-radius: var(--radius-btn); background: var(--color-ink); color: var(--color-on-ink); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
.dx-totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dx-totop:hover { border-color: var(--color-on-ink-muted); }
.toc-open .dx-totop { visibility: hidden; }
@media (min-width: 1024px) { .dx-totop { inset-inline-end: var(--space-8); bottom: var(--space-8); } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Print: no bars, no sidebar, clean black on white ---------- */
@media print {
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    color-scheme: light;
    --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-2: #f2f2ef; --color-border: #c9cbc1; --color-border-strong: #85887a;
    --color-text: #000000; --color-text-muted: #3f413a; --color-rule: #000000; --color-label: #000000;
    --color-warning: #7a4600; --color-warn-soft: #ffffff; --color-warn-line: #c9cbc1;
    --color-code-bg: #f2f2ef; --color-pre-bg: #ffffff; --color-pre-text: #000000; --color-pre-line: #c9cbc1;
    --color-marker-ring: #000000; --color-chip: #000000; --color-on-chip: #ffffff; --color-ink: #000000;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.55; overflow: visible; }
  .dx-bar, .dx-side, .skip, .dx-hero__ctas, .dx-pix, .dx-code__bar, .dx-totop, .dx-foot__top { display: none !important; }
  .dx-hero { background: none; color: #000; border-bottom: 1pt solid #000; }
  .dx-hero__in { padding: 0 0 10pt; }
  .dx-hero h1 { font-size: 22pt; line-height: 1.2; padding: 0; }
  .dx-hero .meta, .dx-hero .meta a, .dx-kicker { color: #000; padding: 0; }
  .dx-layout { display: block; }
  main { padding: 0; max-width: none; }
  .dx-sec { max-width: none; margin-top: 18pt; }
  .dx-sec > *, .dx-intro > * { max-width: none; }
  main h2 { font-size: 16pt; line-height: 1.25; }
  main h3 { font-size: 13pt; margin-top: 14pt; }
  main h4 { font-size: 11pt; }
  h2, h3, h4, .dx-idx, dt { break-after: avoid; page-break-after: avoid; }
  figure, tr, pre, .note, .warn, .dev, ol.steps > li { break-inside: avoid; page-break-inside: avoid; }
  pre { white-space: pre-wrap; overflow: visible; }
  .dx-code { border: 1pt solid #c9cbc1; background: #fff; }
  .dev-tag { border: 1pt solid #000; }
  .tw, .js .tw.is-boxed { overflow: visible; max-height: none; border: 0; }
  thead { display: table-header-group; }
  thead th, .js .tw.is-fit thead th { position: static; }
  figure { border-color: #c9cbc1; }
  img { max-height: 120mm; width: auto; }
  a { color: inherit; }
  .dx-foot { background: none; color: #000; border-top: 1pt solid #000; }
  .dx-foot__in { padding: 8pt 0 0; }
  .dx-foot a { color: #000; }
  .dx-foot .dx-mark .c { fill: #000; }
}