/*
 * beautify.css — TownSuite Docs visual refresh
 * Loaded last; overrides styles.css + theme.css
 */

/* ── Google Fonts ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  --brand:        #005f9e;
  --brand-dark:   #004578;
  --brand-light:  #e8f2fb;
  --accent:       #0284c7;
  --accent-hover: #0369a1;

  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  --nav-width: 260px;
  --header-height: 62px;
}

/* ── Base ───────────────────────────────────────────────────────────── */
html {
  padding-top: var(--header-height);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gray-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Header ─────────────────────────────────────────────────────────── */
#page-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  height: var(--header-height);
  /* Full-width flex row — overrides styles.css float layout */
  display: flex !important;
  align-items: center;
  padding: 0;
}

#logo-bar {
  float: none !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0 16px 0 20px;
  margin: 0;
}

img.logo {
  height: 36px;
  border: none !important;
  border-radius: 0 !important;
}

/* Search — undo styles.css absolute positioning, become a flex child */
#page-search {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 520px;
  padding: 0;
  margin: 0;
  background: transparent !important;
  text-align: left;
}

#page-search > div {
  display: block;
  width: 100%;
  text-align: left;
}

#page-search form {
  max-width: 100%;
}

/* Search box refinement */
#page-search form > table {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Fix white-on-white search text — Google CSE input inherits no explicit color */
#page-search input,
#page-search input[type="text"],
#page-search .gsc-input input,
#page-search .gsc-input-box input {
  color: var(--gray-800) !important;
  background-color: #fff !important;
  -webkit-text-fill-color: var(--gray-800) !important;
}

/* Right-side group: buttons + avatar — pushed to the far right as a unit */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--header-height);
  gap: 4px;
  padding-right: 16px;
  flex-shrink: 0;
}

/* Nav buttons inside the group */
.nav-buttons {
  float: none !important;
  display: flex;
  align-items: center;
  height: var(--header-height);
  padding: 0;
  margin: 0;
  gap: 8px;
}

/* SSO avatar inside the group */
#sso_account {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 0 0 8px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  line-height: 1.4;
  margin: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  cursor: pointer;
  letter-spacing: 0.01em;
}

.btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(1px);
}

a.btn.support-btn {
  background: transparent;
  border-color: var(--gray-300);
  color: var(--gray-600);
  font-weight: 500;
}

a.btn.support-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--gray-700);
}

a.btn.portal-btn {
  font-weight: 500;
}

/* Print button */
#export-to-pdf-link {
  font-size: 12px;
  padding: 5px 12px;
  margin-top: 6px;
  margin-right: 16px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-weight: 500;
}

#export-to-pdf-link:hover {
  background: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--gray-300);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION — clean rewrite
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Nuke every theme.css sidebar rule that would conflict ────────── */
#page-nav .k-in,
#page-nav .k-in a,
#page-nav .k-group .k-group .k-in,
#page-nav .k-group .k-group .k-in a,
#page-nav .k-group .k-group .k-group .k-in,
#page-nav .k-group .k-group .k-group .k-in a,
#page-nav .k-group .k-group .k-group .k-group .k-in,
#page-nav .k-group .k-group .k-group .k-group .k-in a,
#page-nav .k-group .k-group .k-group .k-group .k-group .k-in,
#page-nav .k-group .k-group .k-group .k-group .k-group .k-in a {
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

#page-nav .k-state-selected,
#page-nav .k-state-selected a,
#page-nav .k-state-selected a:hover,
#page-nav .k-item .k-in.k-state-hover,
#page-nav .k-item .k-in.k-state-selected:hover,
#page-nav .current-topic > div .k-in a,
#page-nav #page-tree > .k-group > .current-topic > div .k-in a,
#page-nav .current-topic .k-state-selected,
#page-nav .current-topic .k-group .k-state-selected a,
#page-nav #page-tree > .k-group > .k-item[data-expanded="true"] > div > .k-in,
#page-nav #page-tree > .k-group > .k-item[data-expanded="true"] > div > .k-in a {
  background: transparent !important;
  color: inherit !important;
}

#page-nav .k-icon,
#page-nav .article,
#page-nav .k-plus,
#page-nav .k-minus,
#page-nav .k-state-selected .article,
#page-nav .k-group .k-group .k-plus,
#page-nav .k-group .k-group .k-minus,
#page-nav .current-topic > div .k-in .article,
#page-nav #page-tree .current-topic[data-expanded="true"] > .k-group > .k-item > div > .k-icon,
#page-nav .k-group .k-group .k-group .k-icon,
#page-nav .k-group .k-group .k-group .article,
#page-nav .k-group .k-group .k-group .k-group .k-icon,
#page-nav .k-group .k-group .k-group .k-group .article,
#page-nav .k-group .k-group .k-group .k-group .k-group .k-icon,
#page-nav .k-group .k-group .k-group .k-group .k-group .article,
#page-nav #page-tree > .k-group > .k-item > div > .k-icon,
#page-nav #page-tree > .k-group > .k-item > div > .k-in .article {
  position: static !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  transform: none !important;
  background-image: none !important;
  background: none !important;
}

#page-nav .current-topic > div > .k-icon,
#page-nav #page-tree .k-group .current-topic[data-expanded="true"] > .k-group > .k-item > div > .k-icon,
#page-nav #page-tree .k-group .k-group .current-topic[data-expanded="true"] > .k-group > .k-item > div > .k-icon,
#page-nav #page-tree .k-group .k-group .k-group .current-topic[data-expanded="true"] > .k-group > .k-item > div > .k-icon,
#page-nav #page-tree .k-group .k-group .k-group .k-group .current-topic[data-expanded="true"] > .k-group > .k-item > div > .k-icon {
  display: flex !important;
  position: static !important;
  left: auto !important;
}

/* ── 2. Container ────────────────────────────────────────────────────── */
#page-nav {
  top: var(--header-height);
  width: var(--nav-width);
  background: #fafbfc;
  border-right: 1px solid var(--gray-200);
}

#page-tree {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 8px 0 48px;
}

#page-tree .k-group { list-style: none; margin: 0; padding: 0; }
#page-nav .k-item    { position: relative; list-style: none; }

/* ── 3. Every row is a flex strip ───────────────────────────────────── */
#page-nav .k-item > div {
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 6px;
  margin: 1px 6px;
}

#page-nav .k-item > div:hover { background: var(--gray-100); }

/* ── 4. Chevron icon ─────────────────────────────────────────────────── */
#page-nav .k-icon {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}

#page-nav .k-icon::after {
  content: '';
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--gray-400);
  border-bottom: 1.5px solid var(--gray-400);
  transform: rotate(-45deg);
  transition: transform 0.18s ease, border-color 0.15s;
  display: block;
}

#page-nav .k-minus::after { transform: rotate(45deg); }

/* ── 5. File dot (leaf nodes) ────────────────────────────────────────── */
#page-nav .article {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}

#page-nav .article::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gray-300);
  display: block;
}

/* ── 6. Label text ───────────────────────────────────────────────────── */
#page-nav .k-in {
  flex: 1;
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.45;
}

#page-nav .k-in a {
  display: block;
  padding: 7px 0 7px 6px;
  color: var(--gray-600);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

#page-nav .k-item > div:hover .k-in a { color: var(--gray-900); }
#page-nav .k-item > div:hover .k-icon::after { border-color: var(--gray-600); }
#page-nav .k-item > div:hover .article::after { background: var(--gray-500); }

/* ── 7. Active / selected ────────────────────────────────────────────── */
#page-nav .k-in.k-state-selected { color: var(--brand); font-weight: 600; }
#page-nav .k-in.k-state-selected a { color: var(--brand); }

#page-nav .k-item > div:has(.k-in.k-state-selected) {
  background: var(--brand-light);
  box-shadow: inset 3px 0 0 var(--brand);  /* left accent bar — no positioning needed */
  border-radius: 0 6px 6px 0;
  margin-left: 0;  /* let the bar flush to sidebar edge */
}

#page-nav .k-item > div:has(.k-in.k-state-selected):hover {
  background: var(--brand-light);
}

#page-nav .k-item > div:has(.k-in.k-state-selected) .article::after {
  background: var(--brand);
}

/* ══ 8. LEVEL 1 — section headers ════════════════════════════════════ */

#page-nav #page-tree > .k-group > .k-item { margin-top: 8px; }

#page-nav #page-tree > .k-group > .k-item > div {
  padding: 0 12px;
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--gray-200);
}

#page-nav #page-tree > .k-group > .k-item > div:hover { background: var(--gray-50); }

/* Section label */
#page-nav #page-tree > .k-group > .k-item > div > .k-in a {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gray-600) !important;
  padding: 14px 0 14px 4px;
}

/* Section chevron on the right */
#page-nav #page-tree > .k-group > .k-item > div > .k-icon {
  order: 2;
  margin-left: auto;
  flex: 0 0 20px;
}

/* Active section */
#page-nav #page-tree > .k-group > .current-topic > div > .k-in a {
  color: var(--brand) !important;
}
#page-nav #page-tree > .k-group > .current-topic > div > .k-icon::after {
  border-color: var(--brand);
}

/* Expanded section gets white bg to distinguish children area */
#page-nav #page-tree > .k-group > .k-item[data-expanded="true"] {
  background: #fff;
}
#page-nav #page-tree > .k-group > .k-item[data-expanded="true"] > div {
  border-bottom: 1px solid var(--gray-100);
}

/* ══ 9. LEVEL 2 — direct children of sections ════════════════════════ */

#page-nav .k-group .k-group .k-item > div {
  padding-left: 16px;
}

/* ══ 10. LEVEL 3+ — deeper nesting ═══════════════════════════════════ */

#page-nav .k-group .k-group .k-group .k-item > div { padding-left: 28px; }
#page-nav .k-group .k-group .k-group .k-group .k-item > div { padding-left: 40px; }
#page-nav .k-group .k-group .k-group .k-group .k-group .k-item > div { padding-left: 52px; }

/* ══ 11. H2/H3 heading sub-items ════════════════════════════════════ */

#page-nav .k-group .k-group .k-group .k-item > div > .k-in a {
  font-size: 13px !important;
  color: var(--gray-500) !important;
  padding-top: 4px;
  padding-bottom: 4px;
}

#page-nav .k-group .k-group .k-group .k-group .k-item > div > .k-in a {
  font-size: 12.5px !important;
  color: var(--gray-500) !important; /* gray-400 fails WCAG AA contrast */
  padding-top: 3px;
  padding-bottom: 3px;
}

/* ══ 12. Bottom pages section ════════════════════════════════════════ */

.nav-pages-section {
  margin-top: auto;        /* push to bottom when nav uses flex */
  border-top: 2px solid var(--gray-200);
  padding-top: 4px;
  margin-top: 16px;
}

.nav-pages-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-600);
  padding: 14px 16px 6px;
  letter-spacing: normal;
}

/* items inside the pages section share the same row styles */
.nav-pages-list { list-style: none; margin: 0; padding: 0; }

/* ── Page article layout ────────────────────────────────────────────── */
#page-article {
  padding-left: var(--nav-width);
  padding-top: 40px;
  padding-right: 3em;
  font-family: 'Inter', system-ui, Helvetica, Arial, sans-serif;
  color: var(--gray-700);
  background: #fff;
}

#page-article article {
  max-width: 860px;
  margin: 0 auto 4em;
  padding: 0 16px;
}

#markdown-toc {
  left: var(--nav-width);
  border-bottom: 1px solid var(--gray-200);
  background: #fff;
}

/* ── Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: 'Inter', sans-serif;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 { font-size: 32px; font-weight: 700; margin-top: 8px; margin-bottom: 16px; }
h2 { font-size: 24px; font-weight: 600; margin-top: 48px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gray-200); }
h3 { font-size: 18px; font-weight: 600; margin-top: 32px; color: var(--gray-800); }
h4 { font-size: 15px; font-weight: 600; color: var(--gray-700); }
h5 { font-size: 14px; font-weight: 600; color: var(--gray-600); }
h6 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-500); }

h1 + p { font-size: 17px; color: var(--gray-500); line-height: 1.6; margin-top: 4px; font-weight: 400; }

p { margin: 14px 0; }

a, p a code, li a code {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.12s;
}

a:hover, p a:hover code, li a:hover code {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Inline code ────────────────────────────────────────────────────── */
p code, li code {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;
  font-size: 0.85em;
  font-weight: 500;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

/* ── Mermaid diagrams ───────────────────────────────────────────────── */
/* neutral theme uses dark text — give the wrapper a white background so
   all labels are legible in both light and dark mode */
.mermaid-wrapper {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 0 0 1px var(--gray-200);
}

/* ── Code blocks ────────────────────────────────────────────────────── */
.prettyprint,
pre {
  background: var(--gray-900);
  border: none;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  overflow-x: auto;
  position: relative;
}

.prettyprint code,
pre code {
  font-family: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #e2e8f0;
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 400;
}

/* Syntax highlights on dark bg */
pre .str, pre .atv { color: #86efac; }
pre .kwd           { color: #f0abfc; }
pre .com           { color: #94a3b8; font-style: italic; }
pre .typ           { color: #93c5fd; }
pre .lit           { color: #fbbf24; }
pre .pun           { color: #cbd5e1; }
pre .pln           { color: #e2e8f0; }
pre .tag           { color: #93c5fd; }
pre .atn           { color: #86efac; }
pre .dec           { color: #fbbf24; }
pre .nocode        { background: transparent; color: #e2e8f0; }

/* ── Tables ─────────────────────────────────────────────────────────── */
#page-article table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--gray-200);
  margin: 20px 0 28px;
  font-size: 13.5px;
}

#page-article table tr {
  border-bottom: 1px solid var(--gray-100);
}

#page-article table tr:last-child {
  border-bottom: none;
}

#page-article table tr:nth-child(even) td {
  background-color: var(--gray-50);
}

#page-article table th {
  background: var(--gray-100);
  color: var(--gray-700);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid var(--gray-200);
  text-align: left;
}

#page-article table td {
  background: #fff;
  border: none;
  border-right: 1px solid var(--gray-100);
  padding: 9px 14px;
  color: var(--gray-600);
  line-height: 1.5;
}

#page-article table td:last-child {
  border-right: none;
}

#page-article table tr:nth-child(even) td {
  background-color: var(--gray-50);
}

#page-article table tr:hover td {
  background-color: var(--brand-light);
  transition: background 0.1s;
}

/* ── Blockquotes / callouts ─────────────────────────────────────────── */
blockquote {
  background: var(--brand-light);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 24px 0;
  min-height: 0;
  color: var(--gray-700);
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child  { margin-bottom: 0; }

/* ── Images ─────────────────────────────────────────────────────────── */
#page-article img,
#page-article video,
video {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow);
  margin: 24px auto;
}

/* ── Status tags ────────────────────────────────────────────────────── */
.tag-neutral {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
}

.tag-success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
}

.tag-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
}

.tag-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
}

/* ── Search results panel ───────────────────────────────────────────── */
#search-results {
  background: #fff !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
  max-height: 70vh;
  overflow-y: auto;
}

/* Header row: count + close button */
.sr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 10px;
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.sr-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-400);
}

.sr-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  padding: 0;
}

.sr-close:hover { background: var(--gray-100); color: var(--gray-700); }
.sr-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Result list */
.sr-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.sr-item {
  margin: 0;
}

.sr-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 24px;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.sr-link:hover {
  background: var(--brand-light);
  border-left-color: var(--brand);
  text-decoration: none !important;
}

.sr-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--brand-light);
}

.sr-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.3;
}

.sr-link:hover .sr-title { color: var(--brand-dark); }

.sr-path {
  font-size: 11.5px;
  color: var(--gray-400);
  font-weight: 400;
  text-transform: capitalize;
}

/* State messages */
.search-hint,
.search-no-results,
.search-loading,
.search-error {
  font-size: 13px;
  color: var(--gray-500);
  padding: 16px 24px;
  margin: 0;
  display: block;
}

.search-error  { color: var(--danger); }
.search-loading { font-style: italic; }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  margin-top: 40px;
}

footer p {
  color: var(--gray-500); /* gray-400 fails WCAG AA contrast */
  font-size: 12px;
  padding: 18px 24px;
  margin: 0;
}

/* ── Scrollbar styling (Webkit) ─────────────────────────────────────── */
#page-nav::-webkit-scrollbar { width: 4px; }
#page-nav::-webkit-scrollbar-track { background: transparent; }
#page-nav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
#page-nav::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Mobile navbar ──────────────────────────────────────────────────── */
@media (max-width: 800px) {

  /* Header: flex row, hamburger · logo · [spacer] · search icon · avatar */
  #page-header {
    height: 56px;
    padding: 0;
  }

  /* ── Hamburger ── */
  .toggle-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    height: 56px;
    margin: 0 !important;
    cursor: pointer;
    position: relative;
    top: 0 !important;   /* reset styles.css: span.toggle-nav { top: 10px } */
  }

  /* Three-line hamburger drawn with CSS */
  .toggle-nav span,
  .toggle-nav span::before,
  .toggle-nav span::after {
    display: block !important;
    width: 20px;
    height: 2px;
    background: var(--gray-600);
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: '';
  }
  .toggle-nav span          { top: 50%; margin-top: -1px; }
  .toggle-nav span::before  { top: -6px; }
  .toggle-nav span::after   { bottom: -6px; top: auto; }

  /* ── Logo ── */
  #logo-bar {
    flex: 0 0 auto;
    padding: 0 8px;
    height: 56px;
  }

  img.logo { height: 30px; }

  /* ── Hide full search bar ── */
  #page-search {
    display: none !important;
    flex: 0 !important;
    width: 0 !important;
  }

  /* Search bar drops down below header when active */
  #page-search.search-visibility {
    display: block !important;
    position: fixed !important;   /* fixed so it stays put when results scroll */
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid var(--gray-200) !important;
    padding: 10px 16px !important;
    z-index: 300 !important;      /* above search-results (100) and sidebar (150) */
    box-shadow: var(--shadow) !important;
  }

  /* Push results below the fixed header + fixed search bar (56 + ~54 = ~110px) */
  #search-results {
    top: 110px !important;
    z-index: 250 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: none !important; /* override desktop 70vh — fill remaining screen */
    overflow-y: auto !important;
  }

  /* ── Search icon (replaces full bar) ── */
  .show-search {
    display: block !important;     /* block, not flex — prevents ::after becoming a sibling flex item */
    width: 44px;
    height: 56px;
    flex: 0 0 44px;
    margin-left: auto !important;
    position: relative !important; /* needed so ::before / ::after anchor to this element */
    top: auto !important;
    right: auto !important;
    background: none !important;
    background-image: none !important;
    cursor: pointer;
  }

  /* Circle part of magnifying glass — centred via absolute positioning */
  .show-search::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border: 2px solid var(--gray-500);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -60%);
  }

  /* Handle part — absolutely positioned, no flex involvement */
  .show-search::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 2px;
    background: var(--gray-500);
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(10%, 60%) rotate(45deg);
  }

  /* ── header-right: hide text buttons, keep avatar ── */
  .header-right {
    margin-left: 0 !important;
    padding-right: 8px;
    gap: 0;
  }

  .nav-buttons {
    display: none !important;
  }

  /* ── Sidebar: hidden by default, slides in on hamburger tap ── */
  #page-nav {
    display: none !important;
    top: 56px !important;
    z-index: 150;
    box-shadow: var(--shadow-lg);
  }

  #page-nav.nav-visibility {
    display: block !important;
  }

  /* ── Article: full width ── */
  html { padding-top: 56px; }

  #markdown-toc { left: 0 !important; }

  #page-article {
    padding-left: 0 !important;
    padding-right: 1em;
  }

  #page-article article {
    margin-left: 1em;
    margin-right: 1em;
    padding: 0;
  }
}

/* ── Vanilla tab strip (replaces kendoTabStrip) ─────────────────────── */
.ts-tabstrip {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 20px 0;
}

.ts-tab-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.ts-tab-item {
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border-right: 1px solid var(--gray-200);
  transition: background 0.12s, color 0.12s;
  user-select: none;
}

.ts-tab-item:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.ts-tab-item.ts-tab-active {
  background: #fff;
  color: var(--gray-900);
  font-weight: 600;
  border-bottom: 2px solid var(--brand);
  margin-bottom: -1px;
}

.ts-tab-panels {
  background: #fff;
}

.ts-tab-panel pre,
.ts-tab-panel .prettyprint {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ── Vanilla data grid (replaces kendoGrid) ─────────────────────────── */
.vgrid-toolbar {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 8px;
}

.vgrid-search {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  width: 260px;
  color: var(--gray-700);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vgrid-search:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,95,158,.1);
}

.vgrid-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--gray-200);
}

.vgrid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vgrid-table th {
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
  position: relative;
}

.vgrid-table th:hover { background: var(--gray-200); }

.vgrid-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-600);
  vertical-align: top;
}

.vgrid-table tr:last-child td { border-bottom: none; }
.vgrid-table tr:nth-child(even) td { background: var(--gray-50); }
.vgrid-table tr:hover td { background: var(--brand-light); }

.vgrid-pager {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}

.vgrid-pager-info {
  font-size: 12px;
  color: var(--gray-500); /* gray-400 fails WCAG AA contrast */
  margin-right: 8px;
}

.vgrid-pager-btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.vgrid-pager-btn:hover:not(:disabled) {
  background: var(--brand-light);
  border-color: var(--brand);
  color: var(--brand);
}

.vgrid-pager-btn.active,
.vgrid-pager-btn:disabled {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: default;
}

/* ── Reduced motion — respect OS preference ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── Skip to content ────────────────────────────────────────────────── */
.skip-to-content {
  position: fixed;
  top: -100px;
  left: 16px;
  background: var(--brand);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-to-content:focus {
  top: 8px;
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

/* ── Focus indicators (keyboard users) ─────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sidebar nav links */
#page-nav .k-in a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Mobile icon buttons */
.toggle-nav:focus-visible,
.show-search:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Grid pager */
.vgrid-pager-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Tab strip — inset so it doesn't bleed into adjacent tab */
.ts-tab-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ── Breadcrumb navigation ──────────────────────────────────────────── */
.breadcrumb-nav {
  margin-bottom: 20px;
}

.breadcrumb-nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  font-size: 13px;
  color: var(--gray-400);
}

.breadcrumb-nav ol li {
  display: flex;
  align-items: center;
}

.breadcrumb-nav ol li + li::before {
  content: '/';
  margin: 0 6px;
  color: var(--gray-300);
}

.breadcrumb-nav ol li a {
  color: var(--gray-500);
  text-decoration: none;
}

.breadcrumb-nav ol li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb-nav ol li[aria-current="page"] {
  color: var(--gray-600);
  font-weight: 500;
}

/* ── Nav skeleton loader ────────────────────────────────────────────── */
#nav-skeleton {
  padding: 16px 12px;
}

.nav-skeleton-item {
  height: 14px;
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  margin: 10px 0;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .nav-skeleton-item { animation: none; background: var(--gray-100); }
}

.nav-skeleton-item.short  { width: 55%; }
.nav-skeleton-item.medium { width: 75%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Back to top button ─────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  border: none;
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, background 0.15s;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--brand-dark);
  box-shadow: var(--shadow-lg);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* (search result rules are in the search results panel block above) */

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  #page-article {
    padding-left: 0;
  }
  body {
    font-size: 12px;
    color: #000;
  }
  h1, h2, h3, h4 {
    color: #000;
  }
  .back-to-top { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-light:  #1e3a5f;
    --gray-50:  #0f172a;
    --gray-100: #1e293b;
    --gray-200: #334155;
    --gray-300: #475569;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #f8fafc;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
    --shadow:    0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);
  }

  body     { background: #0f172a; color: var(--gray-700); }
  #page-header { background: #1e293b; border-bottom-color: var(--gray-200); }

  #page-nav {
    background: #131f2e;
    border-right-color: #2d3f55;
  }

  /* ── Nav item text — explicit overrides so the theme.css reset chain
        doesn't inherit stale light-mode colours ── */
  #page-nav .k-in a,
  #page-nav .k-in,
  #page-nav .k-group .k-group .k-in a,
  #page-nav .k-group .k-group .k-in {
    color: #b8cce0 !important;
  }

  /* Section (level-1) headers — slightly brighter */
  #page-nav #page-tree > .k-group > .k-item > div > .k-in a {
    color: #d4e4f4 !important;
  }

  /* Active section header */
  #page-nav #page-tree > .k-group > .current-topic > div > .k-in a {
    color: #7ec8f8 !important;
  }

  /* Hover row */
  #page-nav .k-item > div:hover { background: #1e3048; }
  #page-nav #page-tree > .k-group > .k-item > div:hover { background: #1a2e47; }

  /* Section divider */
  #page-nav #page-tree > .k-group > .k-item > div {
    border-top-color: #2d3f55;
  }

  /* Expanded section — keep it slightly distinct from sidebar bg */
  #page-nav #page-tree > .k-group > .k-item[data-expanded="true"] {
    background: #172030 !important;   /* !important beats the light-mode #fff rule */
  }
  #page-nav #page-tree > .k-group > .k-item[data-expanded="true"] > div {
    border-bottom-color: #2d3f55;
  }

  /* Selected / active row */
  #page-nav .k-in.k-state-selected,
  #page-nav .k-in.k-state-selected a { color: #7ec8f8 !important; }

  #page-nav .k-item > div:has(.k-in.k-state-selected) {
    background: #1e3a5f !important;
    box-shadow: inset 3px 0 0 #3b9edd !important;
  }

  /* Chevron + dot icons */
  #page-nav .k-icon::after {
    border-right-color: #5a7a9a;
    border-bottom-color: #5a7a9a;
  }
  #page-nav .k-item > div:hover .k-icon::after {
    border-right-color: #7ec8f8;
    border-bottom-color: #7ec8f8;
  }
  #page-nav .article::after { background: #4a6a8a; }
  #page-nav .k-item > div:hover .article::after { background: #7ec8f8; }

  /* Deep level text (level 3 / 4 heading sub-items) */
  #page-nav .k-group .k-group .k-group .k-item > div > .k-in a,
  #page-nav .k-group .k-group .k-group .k-group .k-item > div > .k-in a {
    color: #8aaccc !important;
  }

  /* Pages section label + divider */
  .nav-pages-label { color: #8aaccc; }
  .nav-pages-section { border-top-color: #2d3f55; }

  #page-article { background: #0f172a; }

  /* Search bar */
  #page-search input,
  #page-search input[type="text"],
  #page-search .gsc-input input,
  #page-search .gsc-input-box input {
    background-color: #1e293b !important;
    color: var(--gray-700) !important;
    -webkit-text-fill-color: var(--gray-700) !important;
    border-color: var(--gray-200) !important;
  }

  #page-search form > table {
    border-color: var(--gray-200);
    background: #1e293b;
  }

  /* Search results panel — use a noticeably lighter surface so the panel
     is distinct from the #0f172a page background; add a colored ring
     instead of a black shadow (black shadows vanish on dark backgrounds) */
  #search-results {
    background: #1e2d42 !important;
    border-bottom-color: #2d4a6b !important;
    box-shadow: 0 0 0 1px #2d4a6b, 0 8px 32px rgba(0,0,0,.6) !important;
    color: #c8ddef;
  }

  .sr-header {
    background: #182436;
    border-bottom-color: #2d4a6b;
  }

  .sr-count { color: #7a9ab8; }

  .sr-close { color: #7a9ab8; }
  .sr-close:hover { background: #253a52; color: #c8ddef; }

  .sr-link:hover,
  .sr-link:focus-visible {
    background: #253a52;
    border-left-color: #3b9edd;
  }

  .sr-title { color: #7ec8f8; }
  .sr-link:hover .sr-title,
  .sr-link:focus-visible .sr-title { color: #b8e0ff; }

  .sr-path { color: #6b8aa8; }

  /* State messages */
  .search-hint,
  .search-loading    { color: #7a9ab8; }
  .search-no-results { color: #9ab8d0; }
  .search-error      { color: #f87171; }

  /* Buttons */
  a.btn.support-btn {
    border-color: var(--gray-300);
    color: var(--gray-600);
  }
  a.btn.support-btn:hover {
    background: var(--gray-200);
    color: var(--gray-700);
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6,
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--gray-900); }
  h3 { color: var(--gray-800); }
  h1 + p { color: var(--gray-500); }

  /* Code blocks — keep the dark background (--gray-900 remaps to near-white,
     so we must hardcode the background and foreground here) */
  .prettyprint,
  pre {
    background: #0d1117 !important;
    border: 1px solid #2d3f55 !important;
  }

  .prettyprint code,
  pre code {
    color: #e2e8f0 !important;
    background: transparent !important;
  }

  /* Syntax highlight colours — boosted saturation for dark bg */
  pre .str, pre .atv { color: #86efac !important; }
  pre .kwd           { color: #c084fc !important; }
  pre .com           { color: #6b8099 !important; font-style: italic; }
  pre .typ           { color: #7dd3fc !important; }
  pre .lit           { color: #fcd34d !important; }
  pre .pun           { color: #94a3b8 !important; }
  pre .pln           { color: #e2e8f0 !important; }
  pre .tag           { color: #7dd3fc !important; }
  pre .atn           { color: #86efac !important; }
  pre .dec           { color: #fcd34d !important; }

  /* Inline code */
  p code, li code {
    background: #1e1b2e;
    border-color: #4c3575;
    color: #d8b4fe;
  }

  /* Blockquote */
  blockquote {
    background: #1e3a5f;
    border-left-color: var(--accent);
    color: var(--gray-700);
  }

  /* Tables */
  #page-article table { box-shadow: 0 0 0 1px var(--gray-200); }
  #page-article table th { background: #1e293b; color: var(--gray-700); border-bottom-color: var(--gray-200); }
  #page-article table td { background: #0f172a; color: var(--gray-600); border-right-color: var(--gray-200); border-bottom-color: var(--gray-200); }
  #page-article table tr:nth-child(even) td { background: #131f2e; }
  #page-article table tr:hover td { background: var(--brand-light); }

  /* Tab strip */
  .ts-tabstrip  { border-color: var(--gray-200); }
  .ts-tab-list  { background: #1e293b; border-bottom-color: var(--gray-200); }
  .ts-tab-item  { color: var(--gray-500); border-right-color: var(--gray-200); }
  .ts-tab-item:hover { background: var(--gray-200); color: var(--gray-700); }
  .ts-tab-item.ts-tab-active { background: #0f172a; color: var(--gray-900); border-bottom-color: var(--brand); }
  .ts-tab-panels { background: #0f172a; }

  /* Data grid */
  .vgrid-wrap { box-shadow: 0 0 0 1px var(--gray-200); }
  .vgrid-table th { background: #1e293b; color: var(--gray-700); border-bottom-color: var(--gray-200); }
  .vgrid-table td { border-bottom-color: var(--gray-200); color: var(--gray-600); }
  .vgrid-table tr:nth-child(even) td { background: #131f2e; }
  .vgrid-table tr:hover td { background: var(--brand-light); }
  .vgrid-search { background: #1e293b; border-color: var(--gray-200); color: var(--gray-700); }
  .vgrid-pager-btn { background: #1e293b; border-color: var(--gray-200); color: var(--gray-600); }

  /* Footer */
  footer { background: #131f2e; border-top-color: var(--gray-200); }

  /* Print button */
  #export-to-pdf-link { border-color: var(--gray-200); color: var(--gray-500); }
  #export-to-pdf-link:hover { background: var(--gray-100); color: var(--gray-700); }

  /* Nav skeleton */
  .nav-skeleton-item {
    background: linear-gradient(90deg, #1e293b 25%, #253047 50%, #1e293b 75%);
    background-size: 200% 100%;
  }

  /* Back to top */
  .back-to-top { background: var(--brand); }

  /* Mobile search bar */
  #page-search.search-visibility { background: #1e293b !important; }

  /* Mermaid wrapper — stronger border in dark mode */
  .mermaid-wrapper { box-shadow: 0 0 0 1px #2d3f55 !important; }
}