/* ===========================================================================
     GENERATED FILE - DO NOT EDIT. Regenerated from source with each release.
     IO:GENERATED-BY tools/Publish-LiteGridSite.ps1 (provenance: deploy/litegrid-publish-manifest.json)
   =========================================================================== */
/* ============================================================================
   LiteGrid Turbo Object Model Reference — Shared Stylesheet
   Dark-first theme inspired by Microsoft Learn + LiteGrid Turbo brand colors
   ============================================================================ */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    /* Dark mode (default) */
    --bg:             #0f172a;
    --bg-alt:         #1e293b;
    --bg-card:        #111827;
    --bg-sidebar:     #0a0e1a;
    --text:           #e2e8f0;
    --text-secondary: #94a3b8;
    --text-dim:       #8392a6;
    --accent:         #3BAFDB;
    --accent-hover:   #5bc4eb;
    --accent-subtle:  rgba(59,175,219,0.12);
    --border:         rgba(255,255,255,0.08);
    --border-strong:  rgba(255,255,255,0.15);

    /* Callout boxes */
    --warning-bg:     rgba(245,158,11,0.08);
    --warning-border: #f59e0b;
    --warning-text:   #fbbf24;
    --danger-bg:      rgba(239,68,68,0.08);
    --danger-border:  #ef4444;
    --danger-text:    #f87171;
    --note-bg:        rgba(59,175,219,0.08);
    --note-border:    #3BAFDB;
    --note-text:      #7dd3fc;
    --tip-bg:         rgba(16,185,129,0.08);
    --tip-border:     #10b981;
    --tip-text:       #6ee7b7;

    /* Badges */
    --badge-method:   #3BAFDB;
    --badge-property: #10b981;
    --badge-event:    #a78bfa;
    --badge-rw:       #f59e0b;
    --badge-readonly: #64748b;
    --badge-flags:    #f472b6;

    /* Table */
    --table-header-bg:   rgba(255,255,255,0.04);
    --table-row-alt:     rgba(255,255,255,0.02);
    --table-row-hover:   rgba(59,175,219,0.06);
    --table-border:      rgba(255,255,255,0.06);

    /* Code */
    --code-bg:        #1a1f36;
    --code-border:    rgba(255,255,255,0.08);
    --code-keyword:   #7dd3fc;
    --code-string:    #86efac;
    --code-comment:   #8392a6;
    --code-type:      #c4b5fd;
    --code-number:    #fbbf24;
    --code-func:      #f9a8d4;

    /* Scrollbar */
    --scrollbar-track: rgba(255,255,255,0.02);
    --scrollbar-thumb: rgba(255,255,255,0.12);
    --scrollbar-hover: rgba(255,255,255,0.2);

    /* Layout */
    --sidebar-width:  280px;
    --header-height:  52px;
    --content-max:    960px;

    /* Transitions */
    --transition:     0.2s ease;
}

/* ── Light Mode ────────────────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg:             #ffffff;
    --bg-alt:         #f5f5f5;
    --bg-card:        #ffffff;
    --bg-sidebar:     #f9f9f9;
    --text:           #1b1b1b;
    --text-secondary: #616161;
    --text-dim:       #6b6b6b;
    --accent:         #004578;
    --accent-hover:   #00365c;
    --accent-subtle:  rgba(0,120,212,0.08);
    --border:         #e1e1e1;
    --border-strong:  #c8c8c8;

    --warning-bg:     #fff8e1;
    --warning-border: #f59e0b;
    --warning-text:   #92400e;
    --danger-bg:      #fef2f2;
    --danger-border:  #ef4444;
    --danger-text:    #991b1b;
    --note-bg:        #e7f3fe;
    --note-border:    #0078d4;
    --note-text:      #0c4a6e;
    --tip-bg:         #ecfdf5;
    --tip-border:     #10b981;
    --tip-text:       #065f46;

    --badge-method:   #0078d4;
    --badge-property: #0e7c5f;
    --badge-event:    #7c3aed;
    --badge-rw:       #d97706;
    --badge-readonly: #6b7280;
    --badge-flags:    #db2777;

    --table-header-bg:   #f5f5f5;
    --table-row-alt:     #fafafa;
    --table-row-hover:   rgba(0,120,212,0.04);
    --table-border:      #e5e7eb;

    --code-bg:        #f6f8fa;
    --code-border:    #d1d5db;
    --code-keyword:   #0550ae;
    --code-string:    #0a3069;
    --code-comment:   #68717a;
    --code-type:      #8250df;
    --code-number:    #953800;
    --code-func:      #8250df;

    --scrollbar-track: rgba(0,0,0,0.03);
    --scrollbar-thumb: rgba(0,0,0,0.15);
    --scrollbar-hover: rgba(0,0,0,0.25);
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ── Header ────────────────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.site-header .brand-icon {
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 32px;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all var(--transition);
}

.header-nav a:hover,
.header-nav a.active {
    color: var(--accent);
    background: var(--accent-subtle);
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Global Search ──────────────────────────────────────────────────────── */
.global-search {
    position: relative;
}

.global-search-input {
    width: 220px;
    padding: 7px 12px 7px 32px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), width var(--transition);
}

.global-search-input::placeholder { color: var(--text-dim); }
.global-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    width: 300px;
}

.global-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.4;
    pointer-events: none;
}

.global-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 420px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    z-index: 2000;
    padding: 6px;
}

.global-search-results.visible { display: block; }

.search-result {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: background var(--transition);
    cursor: pointer;
}

.search-result:hover,
.search-result.active {
    background: var(--accent-subtle);
}

.search-result-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--accent);
}

.search-result-name mark {
    background: rgba(99, 102, 241, 0.25);
    color: var(--accent);
    border-radius: 2px;
    padding: 0 1px;
}

.search-result-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.search-result-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

.search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}

.search-kbd {
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    font-family: inherit;
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 16px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.version-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */
.breadcrumb {
    padding: 12px 0;
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumb a:hover { color: var(--accent); }

.breadcrumb .sep { opacity: 0.4; }

.breadcrumb .current {
    color: var(--text);
    font-weight: 500;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.page-wrapper {
    display: flex;
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 16px 0;
    z-index: 900;
    transition: transform 0.3s ease;
}

.sidebar-search {
    padding: 4px 16px 14px;
    position: relative;
}

.sidebar-search::before {
    content: "\1F50D";
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-60%);
    font-size: 12px;
    opacity: 0.4;
    pointer-events: none;
}

.sidebar-search input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
    font-family: inherit;
    box-sizing: border-box;
}

.sidebar-search input::placeholder { color: var(--text-dim); }
.sidebar-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Sidebar nav groups */
.nav-group { margin-bottom: 4px; }

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition);
}

.nav-group-title:hover { color: var(--text-secondary); }

.nav-group-title .chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
    opacity: 0.5;
}

.nav-group.collapsed .chevron { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }

.nav-group-items { padding: 0 0 4px; }

.nav-link {
    display: block;
    padding: 5px 16px 5px 28px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all var(--transition);
    line-height: 1.4;
}

.nav-link:hover {
    color: var(--text);
    background: var(--accent-subtle);
}

.nav-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-subtle);
    font-weight: 500;
}

.nav-link .member-count {
    float: right;
    font-size: 11px;
    color: var(--text-dim);
    background: var(--bg-alt);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Page links in sidebar */
.sidebar .page-links {
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.sidebar .page-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: all var(--transition);
}

.sidebar .page-link:hover {
    background: var(--accent-subtle);
    color: var(--text);
}

.sidebar .page-link.current {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

.sidebar .page-link .icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
}

/* ── Main Content ──────────────────────────────────────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 0 40px 60px;
    max-width: calc(var(--content-max) + 80px + var(--sidebar-width));
    min-width: 0;
}

.main-content > .breadcrumb { margin-bottom: 8px; }

/* ── Typography ────────────────────────────────────────────────────────────── */
h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--text);
    line-height: 1.2;
}

h1 .subtitle {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 6px;
    letter-spacing: 0;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}

h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 28px 0 12px;
    color: var(--text);
}

h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--text-secondary);
}

p {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Collapsible Sections ──────────────────────────────────────────────────── */
.collapsible-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--transition);
}

.collapsible-section:hover { border-color: var(--border-strong); }

.collapsible-section.expanded { border-color: var(--accent); }

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-alt);
    transition: background var(--transition);
}

.section-header:hover { background: var(--accent-subtle); }

.section-header .expand-icon {
    font-size: 12px;
    transition: transform 0.2s ease;
    color: var(--text-dim);
    flex-shrink: 0;
}

.collapsible-section.expanded .expand-icon { transform: rotate(90deg); }

.section-header .section-title {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
}

.section-header .section-count {
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 10px;
}

.section-body {
    display: none;
    padding: 18px;
    border-top: 1px solid var(--border);
}

.collapsible-section.expanded .section-body { display: block; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 16px;
}

.api-table th {
    text-align: left;
    padding: 10px 14px;
    background: var(--table-header-bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--table-border);
    white-space: nowrap;
}

.api-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--table-border);
    vertical-align: top;
}

.api-table tr:nth-child(even) td { background: var(--table-row-alt); }
.api-table tr:hover td { background: var(--table-row-hover); }

.api-table .member-name {
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
}

.api-table .param-type {
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 12px;
    color: var(--code-type);
}

.api-table .desc { color: var(--text-secondary); }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
}

.badge-method   { background: rgba(59,175,219,0.15); color: var(--badge-method); }
.badge-property { background: rgba(16,185,129,0.15); color: var(--badge-property); }
.badge-event    { background: rgba(167,139,250,0.15); color: var(--badge-event); }
.badge-rw       { background: rgba(245,158,11,0.15); color: var(--badge-rw); }
.badge-ro       { background: rgba(100,116,139,0.15); color: var(--badge-readonly); }
.badge-flags    { background: rgba(244,114,182,0.15); color: var(--badge-flags); }
.badge-cancel   { background: rgba(239,68,68,0.15);  color: var(--danger-text); }

/* ── Callout Boxes ─────────────────────────────────────────────────────────── */
.callout {
    padding: 14px 18px;
    border-radius: 6px;
    border-left: 4px solid;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

.callout-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.callout-warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.callout-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

.callout-note {
    background: var(--note-bg);
    border-color: var(--note-border);
    color: var(--note-text);
}

.callout-tip {
    background: var(--tip-bg);
    border-color: var(--tip-border);
    color: var(--tip-text);
}

/* ── Code Blocks ───────────────────────────────────────────────────────────── */
code {
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 13px;
    background: var(--code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--code-border);
    color: var(--accent);
}

pre {
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 12px 0 16px;
    position: relative;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}

.code-source {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-style: italic;
}

/* Per-section remarks: behavioural notes that qualify the table above them. */
.remarks {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-dim);
    border-left: 3px solid var(--code-border);
    padding: 8px 0 8px 14px;
    margin: 14px 0;
}

.remarks strong { color: var(--text); }

/* VBA Syntax Highlighting */
.kw  { color: var(--code-keyword); font-weight: 600; }   /* Keywords */
.str { color: var(--code-string); }                        /* Strings */
.cmt { color: var(--code-comment); font-style: italic; }  /* Comments */
.typ { color: var(--code-type); }                          /* Types */
.num { color: var(--code-number); }                        /* Numbers */
.fn  { color: var(--code-func); }                          /* Function names */

/* Antipattern box */
pre.antipattern {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

pre.antipattern::before {
    content: "DON'T";
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    font-weight: 800;
    color: var(--danger-text);
    background: rgba(239,68,68,0.2);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    font-family: "Segoe UI", sans-serif;
}

/* ── Cards (index page) ───────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px;
    text-decoration: none;
    color: var(--text);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}

.card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    text-decoration: none;
}

.card .card-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.card .card-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 6px;
}

.card .card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

.card .card-count {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-dim);
}

/* ── Architecture Diagram ──────────────────────────────────────────────────── */
.arch-diagram {
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 10px;
    padding: 24px;
    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
    font-size: 14px;
    line-height: 1.8;
    overflow-x: auto;
    margin: 16px 0;
}

/* ── Comparison Table ──────────────────────────────────────────────────────── */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 16px;
    border: 1px solid var(--table-border);
    text-align: left;
}

.comparison-table th {
    background: var(--table-header-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.comparison-table td { font-size: 14px; }
.comparison-table tr:hover td { background: var(--table-row-hover); }

/* Yes/no cells in a comparison or capability table. Reuses the callout
   palette so both themes stay consistent. */
.comparison-table td.check,
.api-table td.check { color: var(--tip-text); font-weight: 600; }

.comparison-table td.cross,
.api-table td.cross { color: var(--danger-text); font-weight: 600; }

/* ── Back to Top ───────────────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 800;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

/* ── Hamburger Menu (Mobile) ───────────────────────────────────────────────── */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    margin-right: 8px;
}

/* ── Sidebar Overlay (Mobile) ──────────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 850;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.page-footer {
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-footer a { color: var(--text-secondary); }
.page-footer a:hover { color: var(--accent); }

/* ── "See Also" Links ──────────────────────────────────────────────────────── */
.see-also {
    margin-top: 12px;
    font-size: 13px;
}

.see-also span {
    color: var(--text-dim);
    margin-right: 6px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hamburger { display: block; }

    .sidebar {
        transform: translateX(-100%);
        z-index: 900;
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }

    .main-content {
        margin-left: 0;
        padding: 0 20px 40px;
    }

    .header-nav { display: none; }

    .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    .api-table { font-size: 13px; }
    .api-table th, .api-table td { padding: 8px 10px; }
    .site-header { padding: 0 12px; }
    .global-search-input { width: 140px; font-size: 12px; }
    .global-search-input:focus { width: 180px; }
    .global-search-results { width: calc(100vw - 24px); right: -8px; }
    .search-kbd { display: none; }
}

/* ── Wide tables (2026-09-26) ────────────────────────────────────────────────
   Long URLs and paths in table cells could not wrap, so some tables were wider than the page
   (one by 40 px even at 1280 px, by 600 px on a phone) and the whole page scrolled sideways.
   Wider screens: a long word may break. Phones: the table scrolls inside its own box. */
.main-content td { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .main-content table { display: block; max-width: 100%; overflow-x: auto; }
    .main-content td { overflow-wrap: normal; }
    .main-content h1, .main-content h2, .main-content h3, .main-content h4 { overflow-wrap: anywhere; }
}

/* ── Header on narrower screens (2026-09-26) ──────────────────────────────────
   The seven header links plus the search box did not fit below 1200 px and pushed the page
   sideways; the sidebar lists the same pages, so the header links step aside there. On phones
   the search box shrinks, and the version badge and (below 420 px) the brand name make room. */
@media (max-width: 1200px) {
    .header-nav { display: none; }
}
@media (max-width: 600px) {
    .version-badge { display: none; }
    .global-search-input { width: 96px; }
    .global-search-input:focus { width: 150px; }
}
@media (max-width: 420px) {
    .site-header .brand span { display: none; }
}

/* ── Below the shared Imranosoft header (2026-09-26) ─────────────────────────────────────────
   The publisher puts the site's shared header (.io-shell) and the product row (.io-ctx) above
   this docs header. The docs header used to be position:fixed at the top, so it covered the
   shared header (logo, Products, About, Support) at every width, and the fixed sidebar covered
   the left end of the product row. Now the docs header sits in the page below them and sticks
   to the top once they scroll away; js/litegrid-docs.js keeps the sidebar's top edge at the docs header's
   bottom edge (--sidebar-top). On these pages the shared header scrolls away instead of
   sticking, so no strip of it shows under the docs header, and it is lifted above the docs
   header while one of its menus is open, so the menu is not cut off. */
.site-header {
    position: sticky;
    left: auto;
    right: auto;
}
.page-wrapper { margin-top: 0; }
.sidebar {
    top: var(--sidebar-top, var(--header-height));
    height: calc(100vh - var(--sidebar-top, var(--header-height)));
}
body > .io-shell { position: relative; }
body > .io-shell.io-open { z-index: 1001; }
body > .io-shell:has(.io-menu[open]) { z-index: 1001; }

/* ── Menu button on smaller screens (2026-09-26) ────────────────────────────────────────────
   Up to 900 px the sidebar is hidden and this button opens it. The button holds three empty
   <span>s, but no rule ever drew them, so it was invisible and the page list could not be opened. */
.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    border-radius: 1px;
    background: currentColor;
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
    .sidebar, .site-header, .back-to-top, .hamburger,
    .sidebar-overlay, .theme-toggle { display: none !important; }
    .main-content { margin-left: 0; padding: 0; }
    .collapsible-section .section-body { display: block !important; }
    body { background: white; color: black; }
}