/* Layout of the standalone manual pages (top bar, navigation, table of contents). The article itself: article.css. */
:root {
  --km-brand: #2e2585;
  --km-bg: #f7f7fb;
  --km-surface: #ffffff;
  --km-text: #1d1b2e;
  --km-muted: #5d5a73;
  --km-border: #e3e1ee;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --km-brand: #a9a2ff;
    --km-bg: #12111b;
    --km-surface: #1b1a27;
    --km-text: #ecebf5;
    --km-muted: #a6a3bb;
    --km-border: #2f2d40;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --km-brand: #a9a2ff; --km-bg: #12111b; --km-surface: #1b1a27; --km-text: #ecebf5; --km-muted: #a6a3bb;
  --km-border: #2f2d40; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--km-bg); color: var(--km-text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
}
a { color: var(--km-brand); }
.km-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.km-topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem;
  padding: 0.6rem 1rem; background: var(--km-surface); border-bottom: 1px solid var(--km-border);
}
.km-brand { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--km-text); text-decoration: none; white-space: nowrap; }
.km-brand span:last-child { font-weight: 400; color: var(--km-muted); }
.km-logo {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 6px;
  background: var(--km-brand); color: var(--km-surface); font-weight: 800;
}
.km-search { position: relative; flex: 1; max-width: 28rem; margin-inline-start: auto; }
.km-search input, .km-lang select {
  width: 100%; font: inherit; color: inherit; background: var(--km-bg);
  border: 1px solid var(--km-border); border-radius: 8px; padding: 0.4rem 0.7rem;
}
.km-results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem; list-style: none;
  background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); max-height: 60vh; overflow: auto;
}
.km-results a { display: block; padding: 0.45rem 0.6rem; border-radius: 6px; color: var(--km-text); text-decoration: none; }
.km-results a:hover, .km-results a:focus { background: var(--km-bg); outline: none; }
.km-results small { display: block; color: var(--km-muted); }
.km-results li.km-empty { padding: 0.45rem 0.6rem; color: var(--km-muted); }
.km-menu-btn {
  display: none; font: inherit; color: inherit; background: none; border: 1px solid var(--km-border);
  border-radius: 8px; padding: 0.3rem 0.7rem;
}

.km-layout {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem; gap: 2rem;
  max-width: 82rem; margin: 0 auto; padding: 1.5rem 1rem 4rem;
}
.km-layout-wide { grid-template-columns: 16rem minmax(0, 1fr); }
.km-nav { position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; font-size: 0.93rem; }
.km-nav-group { margin: 1rem 0 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--km-muted); }
.km-nav ul { list-style: none; margin: 0; padding: 0; }
.km-nav a { display: block; padding: 0.25rem 0.6rem; border-radius: 6px; color: var(--km-text); text-decoration: none; }
.km-nav a:hover { background: var(--km-surface); }
.km-nav a[aria-current="page"] { background: var(--km-surface); color: var(--km-brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--km-brand); }
[dir="rtl"] .km-nav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--km-brand); }
.km-main { min-width: 0; background: var(--km-surface); border: 1px solid var(--km-border); border-radius: 12px; padding: 2rem 2.25rem; }
.km-toc { position: sticky; top: 4.5rem; align-self: start; font-size: 0.88rem; }
.km-toc p { font-weight: 700; margin: 0 0 0.4rem; }
.km-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--km-border); }
.km-toc a { display: block; padding: 0.2rem 0.75rem; color: var(--km-muted); text-decoration: none; }
.km-toc a.km-active { color: var(--km-brand); font-weight: 600; }
.km-open { margin-top: 2rem; }
.km-btn { display: inline-block; padding: 0.55rem 1.1rem; border-radius: 8px; background: var(--km-brand); color: var(--km-surface); text-decoration: none; font-weight: 600; }

.km-group h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.km-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.km-cards li {
  position: relative; height: 100%; padding: 0.9rem 1rem; border: 1px solid var(--km-border); border-radius: 10px;
  background: var(--km-bg);
}
.km-cards li:hover, .km-cards li:focus-within { border-color: var(--km-brand); }
.km-cards a { font-weight: 600; color: var(--km-text); text-decoration: none; }
.km-cards a::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.km-cards p { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--km-muted); }

@media (max-width: 1100px) {
  .km-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .km-toc { display: none; }
}
@media (max-width: 760px) {
  .km-layout, .km-layout-wide { grid-template-columns: minmax(0, 1fr); padding: 1rem 16px 3rem; gap: 1rem; }
  .km-menu-btn { display: inline-block; }
  .km-brand span:last-child { display: none; }
  .km-topbar { flex-wrap: wrap; gap: 0.5rem; }
  .km-search { order: 3; flex-basis: 100%; max-width: none; }
  .km-lang { margin-inline-start: auto; }
  .km-nav { display: none; position: static; max-height: none; }
  .km-nav.km-open-nav { display: block; }
  .km-main { padding: 1.25rem 1rem; }
}