/* ==========================================================================
   DNS Armor™ Documentation — theme
   Matches the Secure Domains website design system (v2, Sept 2026 redesign):
   tokens, type (Schibsted Grotesk / IBM Plex), shapes and chrome are taken
   from New-Secure-Domains-Website/src/styles/tailwind.css. Token NAMES below
   are the docs' own; their VALUES mirror the website's so both sites read as
   one product. Light + dark (blue-black, never pure black), RTL-aware.
   Fully self-hosted: fonts are vendored in /assets/fonts, no CDN.
   ========================================================================== */

/* ---------- fonts (same families + weights the website loads) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/schibsted-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin-700-normal.woff2) format("woff2"); }

/* ---------- tokens : light ---------- */
:root {
  color-scheme: light;
  --bg:            #f4f7fb;
  --bg-subtle:     #eaf0f8;
  --bg-sunken:     #eaf0f8;
  --surface:       #ffffff;
  --surface-hover: rgba(10, 24, 64, .045);
  --surface-raised:#ffffff;
  --border:        rgba(10, 24, 64, .1);
  --border-strong: rgba(10, 24, 64, .2);
  --text:          #0a1122;
  --text-muted:    #3f4c66;
  --text-faint:    #5f6b85;

  --brand:         #2436d9;
  --brand-hover:   #2436d9;
  --brand-contrast:#ffffff;
  --brand-subtle:  rgba(36, 54, 217, .08);
  --brand-ring:    rgba(36, 54, 217, .22);
  --accent:        #19d3ff;
  --grad:          linear-gradient(135deg, #3d5afe 0%, #0891b2 100%);
  --grad-btn:      linear-gradient(135deg, #3d5afe 0%, #3d5afe 40%, #19d3ff 150%);
  --glass:         rgba(244, 247, 251, .78);

  --ok:            #0a7049;
  --ok-subtle:     rgba(15, 154, 100, .1);
  --warn:          #8f5d12;
  --warn-bg:       rgba(183, 121, 31, .12);
  --warn-border:   rgba(183, 121, 31, .45);
  --purple:        #6d5cf6;
  --purple-subtle: rgba(109, 92, 246, .1);
  --teal:          #0891b2;
  --teal-subtle:   rgba(8, 145, 178, .1);

  /* category accents for the hub cards — the website's edge/outcome hues */
  --cat-blue:      #2436d9;  --cat-blue-bg:   rgba(36, 54, 217, .08);
  --cat-violet:    #5b4ae6;  --cat-violet-bg: rgba(109, 92, 246, .1);
  --cat-cyan:      #0a7a96;  --cat-cyan-bg:   rgba(8, 145, 178, .1);
  --cat-green:     #0a7049;  --cat-green-bg:  rgba(15, 154, 100, .1);
  --cat-amber:     #8f5d12;  --cat-amber-bg:  rgba(183, 121, 31, .12);
  --cat-rose:      #c0342a;  --cat-rose-bg:   rgba(217, 58, 48, .1);

  --code-bg:       #f7f9fd;
  --code-text:     #0a1122;

  /* flat surfaces: no resting shadow, one hover shadow (website rule) */
  --shadow-xs:     none;
  --shadow:        none;
  --shadow-md:     0 10px 28px -12px rgb(10 24 64 / .25);
  --shadow-lg:     0 24px 60px -20px rgb(10 24 64 / .35);

  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-btn: 10px;
  --radius:     14px;
  --radius-lg:  14px;

  --sidebar-w:  278px;
  --toc-w:      260px;
  --header-h:   64px;
  --content-max:848px;

  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Schibsted Grotesk", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, Consolas, monospace;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- tokens : dark ----------
   Declared once for the OS preference and once for the explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            #050a18;
    --bg-subtle:     #070e20;
    --bg-sunken:     #070e20;
    --surface:       #0a1226;
    --surface-hover: rgba(130, 160, 255, .07);
    --surface-raised:#0d1730;
    --border:        rgba(130, 160, 255, .12);
    --border-strong: rgba(130, 160, 255, .24);
    --text:          #eaf0ff;
    --text-muted:    #a5b3d1;
    --text-faint:    #8190b0;

    --brand:         #19d3ff;
    --brand-hover:   #19d3ff;
    --brand-contrast:#021019;
    --brand-subtle:  rgba(25, 211, 255, .1);
    --brand-ring:    rgba(25, 211, 255, .28);
    --grad:          linear-gradient(135deg, #3d5afe 0%, #19d3ff 100%);
    --glass:         rgba(5, 10, 24, .72);

    --ok:            #3be8a0;
    --ok-subtle:     rgba(59, 232, 160, .12);
    --warn:          #f2b85b;
    --warn-bg:       rgba(242, 184, 91, .12);
    --warn-border:   rgba(242, 184, 91, .4);
    --purple:        #9b8cff;
    --purple-subtle: rgba(155, 140, 255, .12);
    --teal:          #19d3ff;
    --teal-subtle:   rgba(25, 211, 255, .1);

    --cat-blue:      #8c9bff;  --cat-blue-bg:   rgba(61, 90, 254, .16);
    --cat-violet:    #9b8cff;  --cat-violet-bg: rgba(155, 140, 255, .12);
    --cat-cyan:      #19d3ff;  --cat-cyan-bg:   rgba(25, 211, 255, .1);
    --cat-green:     #3be8a0;  --cat-green-bg:  rgba(59, 232, 160, .12);
    --cat-amber:     #f2b85b;  --cat-amber-bg:  rgba(242, 184, 91, .12);
    --cat-rose:      #ff6b6b;  --cat-rose-bg:   rgba(255, 107, 107, .12);

    --code-bg:       #0d1730;
    --code-text:     #dce5f7;

    --shadow-md:     0 12px 32px -14px rgb(0 0 0 / .7);
    --shadow-lg:     0 24px 60px -20px rgb(0 0 0 / .8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #050a18;
  --bg-subtle:     #070e20;
  --bg-sunken:     #070e20;
  --surface:       #0a1226;
  --surface-hover: rgba(130, 160, 255, .07);
  --surface-raised:#0d1730;
  --border:        rgba(130, 160, 255, .12);
  --border-strong: rgba(130, 160, 255, .24);
  --text:          #eaf0ff;
  --text-muted:    #a5b3d1;
  --text-faint:    #8190b0;

  --brand:         #19d3ff;
  --brand-hover:   #19d3ff;
  --brand-contrast:#021019;
  --brand-subtle:  rgba(25, 211, 255, .1);
  --brand-ring:    rgba(25, 211, 255, .28);
  --grad:          linear-gradient(135deg, #3d5afe 0%, #19d3ff 100%);
  --glass:         rgba(5, 10, 24, .72);

  --ok:            #3be8a0;
  --ok-subtle:     rgba(59, 232, 160, .12);
  --warn:          #f2b85b;
  --warn-bg:       rgba(242, 184, 91, .12);
  --warn-border:   rgba(242, 184, 91, .4);
  --purple:        #9b8cff;
  --purple-subtle: rgba(155, 140, 255, .12);
  --teal:          #19d3ff;
  --teal-subtle:   rgba(25, 211, 255, .1);

  --cat-blue:      #8c9bff;  --cat-blue-bg:   rgba(61, 90, 254, .16);
  --cat-violet:    #9b8cff;  --cat-violet-bg: rgba(155, 140, 255, .12);
  --cat-cyan:      #19d3ff;  --cat-cyan-bg:   rgba(25, 211, 255, .1);
  --cat-green:     #3be8a0;  --cat-green-bg:  rgba(59, 232, 160, .12);
  --cat-amber:     #f2b85b;  --cat-amber-bg:  rgba(242, 184, 91, .12);
  --cat-rose:      #ff6b6b;  --cat-rose-bg:   rgba(255, 107, 107, .12);

  --code-bg:       #0d1730;
  --code-text:     #dce5f7;

  --shadow-md:     0 12px 32px -14px rgb(0 0 0 / .7);
  --shadow-lg:     0 24px 60px -20px rgb(0 0 0 / .8);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  font-feature-settings: "kern", "liga";
}
html[lang="ar"] body { font-family: var(--font-ar); font-size: 17px; line-height: 1.9; }
img, svg, video { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease-out); }
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--text); }

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 200;
  background: #3d5afe; color: #fff; padding: 8px 16px;
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: .75rem; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding-inline: 24px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.hdr-brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--text); white-space: nowrap;
  flex: 0 0 auto;              /* never shrink — shrinking squeezed the wordmark */
  min-width: 0;
}
.hdr-brand:hover { text-decoration: none; color: var(--text); }
.hdr-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
  aspect-ratio: 2187 / 566;    /* vector trace of the master logo — never squeezes */
  flex: 0 0 auto;
}
@media (max-width: 420px) { .hdr-logo { height: 26px; } }
.hdr-divider {
  width: 1px; height: 22px; background: var(--border-strong);
  flex: 0 0 1px; margin-inline: 2px;
}
@media (max-width: 600px) { .hdr-divider, .hdr-brand-text { display: none; } }
.hdr-brand-text {
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
html[lang="ar"] .hdr-brand-text { font-family: var(--font-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }

.hdr-spacer { flex: 1 1 auto; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  cursor: pointer; padding: 0; transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn-icon:hover { color: var(--text); border-color: var(--brand); }
.btn-icon svg { width: 16px; height: 16px; }

.btn-lang {
  display: inline-flex; align-items: center; height: 34px; padding-inline: 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn-lang:hover { color: var(--text); text-decoration: none; border-color: var(--brand); }
/* "Back to the website" link: the website's primary gradient button */
.btn-site {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px;
  border-radius: var(--radius-btn); border: 0;
  background-color: #3d5afe; background-image: var(--grad-btn); color: #fff;
  font: 600 13px/1 var(--font); white-space: nowrap;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.btn-site:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(61, 90, 254, .7); }
.btn-site svg { width: 14px; height: 14px; }
html[dir="rtl"] .btn-site svg { transform: scaleX(-1); }
@media (max-width: 1080px) { .btn-site { display: none; } }

.search-trigger {
  display: flex; align-items: center; gap: 9px;
  height: 34px; min-width: 190px; max-width: 340px; flex: 1 1 230px;
  padding-inline: 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
  background: var(--surface); color: var(--text-faint);
  font-size: 13.5px; font-family: inherit; cursor: pointer; text-align: start;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.search-trigger:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.search-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; }
.search-trigger .kbd {
  margin-inline-start: auto; font: 500 10.5px/1.4 var(--font-mono);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 1px 6px; color: var(--text-faint); background: var(--bg-subtle);
}
@media (max-width: 680px) {
  .search-trigger .kbd, .search-trigger .st-text { display: none; }
  .search-trigger { min-width: 0; flex: 0 0 34px; justify-content: center; padding: 0; border-radius: var(--radius-sm); }
}

.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}

/* ---------- layout ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  max-width: 1600px; margin: 0 auto; align-items: start;
}
@media (max-width: 1200px) { .layout { grid-template-columns: var(--sidebar-w) minmax(0,1fr); } .toc-col { display: none; } }
@media (max-width: 920px)  { .layout { grid-template-columns: minmax(0,1fr); } }

/* ---------- sidebar ---------- */
.sidebar {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 14px 48px;
  border-inline-end: 1px solid var(--border);
  background: var(--bg);
}
@media (max-width: 920px) { .sidebar { background: var(--surface); } }

.sb-title {
  font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px; padding-inline-start: 12px;
}
html[lang="ar"] .sb-title { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; }
.sb-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-group {
  margin: 20px 0 6px; padding-inline-start: 12px;
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
  user-select: none;
}
.sb-group:first-child { margin-top: 8px; }
html[lang="ar"] .sb-group { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.sb-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 14px; font-weight: 500; line-height: 1.4;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.sb-nav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.sb-nav a[aria-current="page"] {
  background: var(--brand-subtle); color: var(--brand); font-weight: 600;
}
.sb-nav a[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}
html[dir="rtl"] .sb-nav a[aria-current="page"]::before { border-radius: 3px 0 0 3px; }
.sb-nav svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .85; }

@media (max-width: 920px) {
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 90;
    width: min(86vw, var(--sidebar-w)); height: 100vh;
    transform: translateX(-102%); transition: transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-lg); padding-top: 18px;
  }
  html[dir="rtl"] .sidebar { transform: translateX(102%); }
  .sidebar.open, html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  .sb-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(5,10,24,.6); backdrop-filter: blur(3px); }
}
@media (min-width: 921px) { .sb-scrim, .btn-menu { display: none !important; } }

/* ---------- main ---------- */
.main { min-width: 0; padding: 40px 48px 100px; }
@media (max-width: 1200px) { .main { padding: 36px 40px 90px; } }
@media (max-width: 720px)  { .main { padding: 26px 20px 72px; } }
.content { max-width: var(--content-max); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); text-wrap: balance; }
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-ar); letter-spacing: 0 !important; }

.content > h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  line-height: 1.06; font-weight: 700; letter-spacing: -.03em;
  margin: 0 0 .45em; color: var(--text);
  max-width: 100%;
}
html[lang="ar"] .content > h1 { line-height: 1.3; }

.page-desc {
  font-size: 18px; color: var(--text-muted); line-height: 1.6; text-wrap: pretty;
  margin: 0 0 2.2em; padding-bottom: 1.6em; border-bottom: 1px solid var(--border);
}

.content h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; font-weight: 700; letter-spacing: -.025em;
  margin: 2.5em 0 .75em; padding-bottom: .34em; border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 16px); position: relative;
}
.content h3 {
  font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; margin: 2em 0 .6em;
  scroll-margin-top: calc(var(--header-h) + 16px); position: relative;
}
.content h4 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; margin: 1.7em 0 .5em; scroll-margin-top: calc(var(--header-h) + 16px); position: relative; }
.content h5, .content h6 { font-size: .95rem; font-weight: 600; color: var(--text-muted); margin: 1.5em 0 .45em; }
html[lang="ar"] .content h2, html[lang="ar"] .content h3 { line-height: 1.35; }
.content p, .content li { color: var(--text-muted); }

.content p { margin: 0 0 1.1em; }
.content ul, .content ol { margin: 0 0 1.2em; padding-inline-start: 1.45em; }
.content li { margin-bottom: .45em; }
.content li::marker { color: var(--text-faint); }
.content li > ul, .content li > ol { margin-top: .45em; }
.content strong { font-weight: 600; color: var(--text); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 2.6em 0; }
.content blockquote {
  margin: 1.4em 0; padding: .9em 1.2em;
  border-inline-start: 3px solid var(--brand);
  background: var(--bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
}
html[dir="rtl"] .content blockquote { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

.anchor-link {
  opacity: 0; margin-inline-start: .45em; font-weight: 400;
  color: var(--text-faint); text-decoration: none; font-size: .78em;
  transition: opacity .15s ease;
}
h2:hover .anchor-link, h3:hover .anchor-link, h4:hover .anchor-link, .anchor-link:focus { opacity: 1; }
.anchor-link:hover { color: var(--brand); text-decoration: none; }

/* tables */
.table-wrap {
  overflow-x: auto; margin: 0 0 1.5em;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.content table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0; }
.content th, .content td { padding: 11px 12px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
.content thead th {
  background: var(--code-bg); font-weight: 600; font-size: 13px;
  letter-spacing: .01em; color: var(--text);
}
html[lang="ar"] .content thead th { letter-spacing: 0; }
.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr { transition: background .12s ease; }
.content tbody tr:hover { background: var(--surface-hover); }

/* code */
.content code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--code-bg); color: var(--code-text);
  padding: .14em .42em; border-radius: 6px; border: 1px solid var(--border);
  direction: ltr; unicode-bidi: embed;
}
.content pre {
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; overflow-x: auto; margin: 0 0 1.5em;
  font-size: 13.5px; line-height: 1.62; direction: ltr; text-align: left;
}
.content pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* generic card lift for the hub page's inline-styled cards */
.content a[style*="border-radius"]:hover { text-decoration: none; }

/* ---------- TOC ---------- */
.toc-col {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 40px 22px 64px;
}
.toc-title {
  font: 500 11px/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 12px;
}
html[lang="ar"] .toc-title { font-family: var(--font-ar); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.toc-list { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border); }
.toc-list a {
  display: block; padding: 6px 0 6px 14px; margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  transition: color .14s ease, border-color .14s ease;
}
html[dir="rtl"] .toc-list a { padding: 6px 14px 6px 0; }
.toc-list a:hover { color: var(--text); text-decoration: none; }
.toc-list a.active { color: var(--brand); border-inline-start-color: var(--brand); font-weight: 600; }
.toc-list .lvl-3 a { padding-inline-start: 27px; font-size: 12.5px; color: var(--text-faint); }
.toc-list .lvl-3 a.active { color: var(--brand); }

/* ---------- search modal ---------- */
.search-modal { position: fixed; inset: 0; z-index: 120; display: none; }
.search-modal.open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(5,10,24,.6); backdrop-filter: blur(4px); }
.search-panel {
  position: relative; z-index: 1;
  width: min(700px, calc(100vw - 28px));
  margin: clamp(40px, 9vh, 112px) auto 0;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: min(76vh, 690px);
  overflow: hidden;
}
.search-inputbar { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.search-inputbar svg { width: 19px; height: 19px; color: var(--brand); flex: 0 0 19px; }
#search-input { flex: 1; border: 0; background: none; color: var(--text); font-size: 16px; font-family: inherit; outline: none; min-width: 0; }
#search-input::placeholder { color: var(--text-faint); }
.search-results { overflow-y: auto; padding: 7px; }
.search-meta { padding: 9px 18px 11px; font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--border); }
.sr-item { display: block; padding: 11px 13px; border-radius: var(--radius-sm); color: var(--text); }
.sr-item:hover, .sr-item.sel { background: var(--brand-subtle); text-decoration: none; }
.sr-crumb { font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-faint); margin-bottom: 3px; }
html[lang="ar"] .sr-crumb { font-family: var(--font-ar); letter-spacing: 0; }
.sr-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.sr-snip { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-snip mark, .sr-title mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.sr-empty { padding: 30px 16px; text-align: center; color: var(--text-faint); font-size: 14px; }

/* ---------- footer ---------- */
.ftr {
  border-top: 1px solid var(--border); margin-top: 64px; padding: 20px 0 0;
  font-size: 13px; color: var(--text-faint);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.ftr-logo { height: 22px; width: auto; max-width: none; aspect-ratio: 2187 / 566; margin-inline-end: 6px; }
.ftr a { color: var(--text-faint); }
.ftr a:hover { color: var(--text); text-decoration: none; }


/* ---------- wide screens ----------
   The "On this page" column was fixed at 260px, so entries wrapped onto two
   lines while large displays had room to spare. Scale it up with the viewport
   and widen the overall grid so the extra width is not taken from the prose.
   The text measure itself grows only slightly — long lines hurt readability. */
@media (min-width: 1500px) {
  :root { --toc-w: 340px; --sidebar-w: 300px; --content-max: 880px; }
  .layout { max-width: 1760px; }
}
@media (min-width: 1920px) {
  :root { --toc-w: 480px; --sidebar-w: 320px; --content-max: 940px; }
  .layout { max-width: 2100px; }
  .toc-col { padding-inline: 30px; }
  .toc-list a { font-size: 13.5px; }
  .toc-list .lvl-3 a { font-size: 13px; }
}
@media (min-width: 2560px) {
  :root { --toc-w: 520px; --content-max: 1000px; }
  .layout { max-width: 2400px; }
}



/* ---------- balance the article column ----------
   The middle grid track is wider than the text measure, so the article was
   pinned left and every spare pixel collected on the right, against the TOC.
   Centring it splits that slack evenly; the measure grows only modestly,
   because line length — not available width — is what governs readability. */
@media (min-width: 1200px) {
  .layout:not(.hub) .content { margin-inline: auto; }
}
@media (min-width: 1920px) {
  :root { --content-max: 1000px; }
}
@media (min-width: 2560px) {
  :root { --content-max: 1060px; }
}



/* ---------- hub card grid ----------
   The source grid was `auto-fit, minmax(280px, 1fr)`, so the column count drifted
   with the viewport — four across on a wide screen left two orphans on the second
   row. Pin it to three so the six guides form two even rows, and pin each card's
   footer to the bottom so every "Read guide" row lines up regardless of how much
   copy the card carries. Inline styles win over stylesheets, hence !important. */
.layout.hub .content div[style*="minmax(280px"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
}
@media (max-width: 1249px) {
  .layout.hub .content div[style*="minmax(280px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 860px) {
  .layout.hub .content div[style*="minmax(280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* every card fills its grid cell, and its footer sits on the baseline */
.layout.hub .content a[style*="flex-direction:column"] { height: 100%; }
.layout.hub .content a[style*="flex-direction:column"] > div:last-child { margin-top: auto !important; }

/* ---------- print ---------- */
@media print {
  .hdr, .sidebar, .toc-col, .search-modal, .sb-scrim, .ftr { display: none !important; }
  .layout { grid-template-columns: 1fr; } .main { padding: 0; } body { font-size: 11pt; }
  .content > h1 { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- source SVG icons ----------
   The hub cards carry category-coded icons with hardcoded stroke colours
   (blue / purple / green). Rather than flatten them to one brand colour,
   lift them in dark mode so they keep their hue but gain contrast. */
/* (icon colours are theme tokens now — no blanket filter needed) */

/* Hub cards: modern hover lift. The cards are inline-styled in the source, so
   target them structurally rather than by class. */
.content a[style*="border-radius"][style*="border"] {
  box-shadow: none !important;
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.content a[style*="flex-direction:column"][style*="border-radius"] { border-radius: var(--radius) !important; }
.content a[style*="border-radius"][style*="border"]:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--brand) !important;
}
.content a[style*="border-radius"] strong { font-family: var(--font-display); letter-spacing: -.01em; }
html[lang="ar"] .content a[style*="border-radius"] strong { font-family: var(--font-ar); letter-spacing: 0; }


/* ---------- scrollbars ----------
   `color-scheme` above makes the browser paint native scrollbars to match the
   theme (Firefox, Safari, and Chrome's default bars). These rules additionally
   style WebKit's bars so every scroll container — page, sidebar, on-this-page
   TOC, search results, wide tables and code blocks — matches in both themes
   and both directions. */
html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }

.sidebar, .toc-col, .search-results,
.table-wrap, .content pre {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar,
.toc-col::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.content pre::-webkit-scrollbar { width: 10px; height: 10px; }

.sidebar::-webkit-scrollbar-track,
.toc-col::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.content pre::-webkit-scrollbar-track { background: transparent; }

.sidebar::-webkit-scrollbar-thumb,
.toc-col::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.content pre::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}

.sidebar:hover::-webkit-scrollbar-thumb,
.toc-col:hover::-webkit-scrollbar-thumb,
.search-results:hover::-webkit-scrollbar-thumb,
.table-wrap:hover::-webkit-scrollbar-thumb,
.content pre:hover::-webkit-scrollbar-thumb { background: var(--border-strong); background-clip: content-box; }

.sidebar::-webkit-scrollbar-corner,
.toc-col::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner { background: transparent; }


/* ---------- documentation hub ----------
   The hub is a landing page, not a document: its table of contents held only
   two entries, and a prose measure cramped the card grid while leaving space
   unused beside it. Give it the full column and centre the block instead. */
.layout.hub { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.layout.hub .toc-col { display: none; }

.layout.hub .content {
  max-width: 1180px;
  margin-inline: auto;        /* centred in the reclaimed space */
}
@media (min-width: 1920px) { .layout.hub .content { max-width: 1360px; } }
@media (min-width: 2560px) { .layout.hub .content { max-width: 1500px; } }

/* Centre the page header so it reads as a landing page and matches the
   centred hero banner that follows it. */
.layout.hub .content > h1,
.layout.hub .content > .page-desc {
  text-align: center;
  margin-inline: auto;
}
.layout.hub .content > h1 { width: auto; }
.layout.hub .content > .page-desc { max-width: 760px; }

@media (max-width: 920px) {
  .layout.hub .content > h1,
  .layout.hub .content > .page-desc { text-align: start; margin-inline: 0; }

  /* Below 920px the sidebar leaves the grid and slides in over the page, so no
     column may be reserved for it. `.layout.hub` above outranks the unqualified
     `.layout` collapse rule, which left the hub holding a 278px phantom column
     and pushed the content off the right edge of a phone screen. */
  .layout.hub { grid-template-columns: minmax(0, 1fr); }
  .layout.hub .content { max-width: 100%; }
}

/* The hub's hero and cards are inline-styled in the source, so their desktop
   padding survives onto phones unless overridden here. */
@media (max-width: 560px) {
  .layout.hub .content div[style*="linear-gradient(135deg"] {
    padding: 2rem 1.25rem 1.75rem !important;
  }
  .layout.hub .content div[style*="linear-gradient(135deg"] h1 {
    font-size: 1.65rem !important;
  }
  .layout.hub .content a[style*="flex-direction:column"] { padding: 1.25rem !important; }
}


/* ---------- hub banners → website "stage" sections ----------
   The hero and support banners are inline-styled blue gradients in the source
   (kept Wiki.js-paste compatible, so the source is not edited). Restyle them as
   the website's stage: always dark in both themes, blue-black with the brand
   glows, a hairline border, and the website's primary / ghost buttons. */
.layout.hub .content div[style*="linear-gradient(135deg"] {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 80% at 80% 0%, rgba(61, 90, 254, .32), transparent 70%),
    radial-gradient(45% 70% at 100% 100%, rgba(25, 211, 255, .16), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(61, 90, 254, .14), transparent 70%),
    #050a18 !important;
  border: 1px solid rgba(130, 160, 255, .18);
  border-radius: var(--radius) !important;
  color: #eaf0ff;
}
html[dir="rtl"] .layout.hub .content div[style*="linear-gradient(135deg"] {
  background:
    radial-gradient(55% 80% at 20% 0%, rgba(61, 90, 254, .32), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, rgba(25, 211, 255, .16), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(61, 90, 254, .14), transparent 70%),
    #050a18 !important;
}
/* faint grid, as on the website's stage backdrops */
.layout.hub .content div[style*="linear-gradient(135deg"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 160, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 160, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(70% 90% at 50% 0%, #000 30%, transparent 80%);
}
.layout.hub .content div[style*="linear-gradient(135deg"] :is(h1, h2) {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em;
  color: #eaf0ff !important;
}
html[lang="ar"] .layout.hub .content div[style*="linear-gradient(135deg"] :is(h1, h2) { font-family: var(--font-ar); letter-spacing: 0; }
.layout.hub .content div[style*="linear-gradient(135deg"] p { color: #a5b3d1 !important; }
.layout.hub .content div[style*="linear-gradient(135deg"] div[style*="font-weight:700"] {
  font-family: var(--font-display); letter-spacing: -.015em; color: #eaf0ff !important;
}
html[lang="ar"] .layout.hub .content div[style*="linear-gradient(135deg"] div[style*="font-weight:700"] { font-family: var(--font-ar); letter-spacing: 0; }
.layout.hub .content div[style*="linear-gradient(135deg"] div[style*="rgba(255,255,255,.7)"] { color: #a5b3d1 !important; }

/* banner buttons: first = website .btn-primary, second = .btn-ghost on stage */
.layout.hub .content div[style*="linear-gradient(135deg"] a[style*="inline-flex"] {
  border-radius: var(--radius-btn) !important;
  font: 600 14px/1 var(--font) !important;
  padding: 11px 16px !important;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), border-color .15s var(--ease-out);
}
.layout.hub .content div[style*="linear-gradient(135deg"] a[style*="inline-flex"]:first-child {
  background-color: #3d5afe !important;
  background-image: linear-gradient(135deg, #3d5afe 0%, #3d5afe 40%, #19d3ff 150%) !important;
  color: #fff !important; border: 0 !important;
}
.layout.hub .content div[style*="linear-gradient(135deg"] a[style*="inline-flex"]:first-child:hover {
  transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(61, 90, 254, .7);
}
.layout.hub .content div[style*="linear-gradient(135deg"] a[style*="inline-flex"]:not(:first-child) {
  background: transparent !important; color: #19d3ff !important;
  border: 1px solid rgba(130, 160, 255, .24) !important;
}
.layout.hub .content div[style*="linear-gradient(135deg"] a[style*="inline-flex"]:not(:first-child):hover { border-color: #19d3ff !important; }
.layout.hub .content div[style*="linear-gradient(135deg"] a:hover { text-decoration: none; }

/* section eyebrows on the hub ("Documentation", "Quick links"): website .eyebrow */
.layout.hub .content p[style*="font-size:.72rem;font-weight:700"] {
  font: 600 12px/1 var(--font-mono) !important; letter-spacing: .1em !important;
  color: var(--brand) !important; margin-bottom: .7rem !important;
}
html[lang="ar"] .layout.hub .content p[style*="font-size:.72rem;font-weight:700"] { font-family: var(--font-ar) !important; font-size: 13px !important; letter-spacing: 0 !important; }
/* quick-link tiles: website card radius */
.layout.hub .content a[style*="border-radius:9px"] { border-radius: 10px !important; background: var(--surface) !important; }

/* category badges on the hub cards: website .chip — a pill that hugs its label
   (the card is a flex column, so without align-self it stretched full width) */
.layout.hub .content span[style^="display:inline-block;font-size:"][style*="border-radius:6px"] {
  align-self: flex-start;
  border-radius: 999px !important;
  padding: .3rem .7rem !important;
  font: 600 11px/1.2 var(--font-mono) !important;
  letter-spacing: .08em !important;
}
html[lang="ar"] .layout.hub .content span[style^="display:inline-block;font-size:"][style*="border-radius:6px"] { font-family: var(--font-ar) !important; font-size: 12px !important; letter-spacing: 0 !important; }

/* long hostnames in table cells (e.g. firewall-rule destinations) carry <wbr>
   after each dot/hyphen, so they wrap only at label boundaries; footnotes under
   tables read as small print */
.content td code:has(wbr) { display: inline-block; white-space: normal; font-size: .76em; }
.content .table-footnote { margin: -.9em 0 1.5em; font-size: 13px; color: var(--text-faint); }