/* The documentation pages' own layout: /documentation/ and the
 * per-integration guides under it (/documentation/zoom/). Moved out of an
 * inline <style> in documentation/index.html on 2026-10-04 so the guides
 * share one copy rather than drifting from a pasted one. These pages load
 * app-tokens.css and app-public.css but not styles.css, deliberately: this
 * file opens with its own reset (see CLAUDE.md, Cache busters). */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --navy: var(--bl-navy);
    --navy-dark: var(--bl-navy-925);
    --navy-light: var(--bl-navy-700);
    --blue-accent: var(--bl-blue-500);
    --blue-light: var(--bl-blue-100);
    --gray-50: var(--bl-gray-50);
    --gray-100: var(--bl-gray-100);
    --gray-200: var(--bl-gray-200);
    --gray-300: var(--bl-border-input);
    --gray-400: var(--bl-gray-400);
    --gray-500: var(--bl-gray-500);
    --gray-600: var(--bl-gray-600);
    --gray-700: var(--bl-gray-700);
    --gray-800: var(--bl-gray-800);
    --gray-900: var(--bl-gray-900);
    --sidebar-width: 260px;
    --header-height: 60px;
}

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

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gray-800);
    background: var(--bl-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    text-decoration: underline;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bl-white);
    border-bottom: 1px solid var(--gray-200);
    z-index: 100;
    display: flex;
    align-items: center;
}

.header-inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.header-logo:hover {
    text-decoration: none;
}

.header-logo__mark {
    height: 22px;
    width: auto;
    display: block;
    /* logo.svg is white-on-transparent; this filter chain repaints
       the white paths as brand navy (--bl-navy) so the wordmark reads on the
       docs page's light header bg. */
    filter: brightness(0) saturate(100%) invert(11%) sepia(67%)
            saturate(2380%) hue-rotate(212deg) brightness(95%)
            contrast(95%);
}

.header-divider {
    width: 1px;
    height: 20px;
    background: var(--gray-300);
}

.header-docs-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-500);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-search {
    position: relative;
    width: 240px;
}

.header-search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--gray-700);
    background: var(--gray-50);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.header-search input::placeholder {
    color: var(--gray-400);
}

.header-search input:focus {
    border-color: var(--blue-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--bl-white);
}

.header-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
}

.header-back-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.header-back-link:hover {
    color: var(--navy);
    text-decoration: none;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--gray-600);
}

.mobile-menu-btn svg {
    display: block;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 49;
}

.sidebar-overlay.active {
    display: block;
}

.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--gray-50);
    border-right: 1px solid var(--gray-200);
    overflow-y: auto;
    padding: 24px 0;
    z-index: 50;
}

.sidebar-section {
    margin-bottom: 8px;
}

.sidebar-section-title {
    padding: 6px 24px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
}

.sidebar-link {
    display: block;
    padding: 7px 24px 7px 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-600);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.1s, background 0.1s, border-color 0.1s;
}

.sidebar-link:hover {
    color: var(--gray-900);
    background: var(--gray-100);
    text-decoration: none;
}

.sidebar-link.active {
    color: var(--blue-accent);
    background: var(--blue-light);
    border-left-color: var(--blue-accent);
    font-weight: 500;
}

.sidebar-sublink {
    padding-left: 40px;
    font-size: 13px;
}

/* Sublinks are collapsed unless their section is the one being read.
   All 37 of them expanded at once makes a 1300px sidebar on a 260px
   rail, which buries the eight top-level entries the nav exists to
   show. They stay in the DOM either way, so every anchor is
   linkable and findable by search; only the display is conditional.

   Height rather than display, so the reveal has somewhere to
   animate from and a keyboard user tabbing into a hidden link is
   not landing on something invisible: overflow clips it and the
   parent expands to fit on focus-within. */
.sidebar-sublinks {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.18s ease;
}

.sidebar-section-group.expanded > .sidebar-sublinks,
.sidebar-sublinks:focus-within {
    /* Generous, not exact: max-height cannot animate to `auto`, and
       the largest group here has 8 rows at ~29px. Overshooting costs
       nothing because overflow is hidden and the content sets the
       real height. */
    max-height: 420px;
}

.sidebar-sublink.active {
    /* The parent link keeps its own active treatment, so a sublink
       marks itself with weight rather than a second filled bar,
       which would read as two separate current pages. */
    background: transparent;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-sublinks { transition: none; }
}

.content-wrapper {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    max-width: 820px;
    padding: 40px 48px 80px;
}

.content-section {
    padding-top: 8px;
    margin-bottom: 64px;
}

.content-section h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.content-section .section-desc {
    font-size: 16px;
    color: var(--gray-500);
    margin-bottom: 32px;
}

.content-section h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--gray-900);
    margin-top: 40px;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

/* A section's title. Each guide section opened with its own h1 until
   2026-10-07, which gave one page up to nine h1s (site audit, c_h1_single);
   the page keeps one h1 and these are h2s that look exactly as before. */
.content-section h2.section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.5px;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.2;
    padding-bottom: 0;
    border-bottom: none;
}

.content-section h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--gray-800);
    margin-top: 28px;
    margin-bottom: 12px;
}

.content-section p {
    margin-bottom: 16px;
    color: var(--gray-700);
    font-size: 15px;
    line-height: 1.7;
}

.content-section ul,
.content-section ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.content-section li {
    margin-bottom: 8px;
    color: var(--gray-700);
    font-size: 15px;
    line-height: 1.6;
}

.content-section li strong {
    color: var(--gray-900);
}

.content-section a {
    color: var(--blue-accent);
}

.callout {
    background: var(--blue-light);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    color: var(--navy);
}

.callout strong {
    font-weight: 600;
}

.step-list {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
}

.step-list li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 40px;
    margin-bottom: 16px;
}

.step-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 1px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--bl-white);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-item {
    margin-bottom: 24px;
}

.faq-item h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin-top: 0;
    margin-bottom: 8px;
}

.faq-item p {
    font-size: 14px;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.support-card {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.support-card h3 {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 4px;
}

.support-card p {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 0;
}

.doc-footer {
    border-top: 1px solid var(--gray-200);
    padding: 24px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.doc-footer-brand {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-400);
}

.doc-footer-links {
    display: flex;
    gap: 16px;
}

.doc-footer-links a {
    font-size: 13px;
    color: var(--gray-400);
}

.doc-footer-links a:hover {
    color: var(--gray-600);
}

@media (max-width: 1024px) {
    .content {
        padding: 32px 32px 64px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        background: var(--bl-white);
        z-index: 51;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .content-wrapper {
        margin-left: 0;
    }

    .content {
        padding: 24px 20px 64px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .header-search {
        display: none;
    }

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

    .doc-footer {
        flex-direction: column;
        gap: 8px;
        padding: 20px;
        text-align: center;
    }

    .content-section h1 {
        font-size: 26px;
    }

    .content-section h2 {
        font-size: 20px;
    }

    .content-section h2.section-title {
        font-size: 26px;
    }
}
/* Screenshots of the app, embedded in the guides.
   The app is dark and this page is light-only, so these are framed
   deliberately rather than left to float: a border, a radius and a
   soft shadow make the dark block read as "a picture of the
   product" instead of a rendering fault. */
.doc-shot {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 20px 0 8px;
    border: 1px solid var(--gray-200, var(--bl-gray-200));
    border-radius: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 8px 24px rgb(0 0 0 / 0.06);
}
.doc-shot-caption {
    margin: 0 0 24px;
    font-size: 0.875rem;
    color: var(--gray-500, var(--bl-gray-500));
    max-width: 820px;
}

/* ---------------------------------------------------------------------------
   Support chat launcher. A copy of the .support-bubble rules in styles.css,
   which these pages deliberately do not load (CLAUDE.md, cache busters), so
   without it support-chat.js put an unstyled button at the foot of the page.
   Change both together.
   --------------------------------------------------------------------------- */

.support-bubble {
    position: fixed;
    right: 2rem;
    bottom: calc(2rem + 72px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bl-primary);
    color: var(--bl-white);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.support-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.support-bubble:focus-visible {
    outline: 3px solid var(--bl-white);
    outline-offset: 2px;
}

.support-bubble[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .support-bubble {
        right: 1rem;
        bottom: calc(1rem + 62px);
        width: 50px;
        height: 50px;
    }
}

/* Phones (2026-10-07). The header ran "Docs" into the back link with no
   gap, and on the zoom page at 360px "All documentation" pushed the menu
   button off the screen. "Back to BaseLock" goes on a phone, since the
   logo is the same link; "All documentation" is the zoom page's only way
   back to the index, so it stays and the "Docs" label makes room for it.
   The menu button and the sidebar's links were 35px to 38px tall. */
@media (max-width: 768px) {
    .header-inner {
        gap: 12px;
    }

    .header-back-link[href="https://getbaselock.com"] {
        display: none;
    }

    .header-inner:has(.header-back-link[href="/documentation/"]) .header-divider,
    .header-inner:has(.header-back-link[href="/documentation/"]) .header-docs-label {
        display: none;
    }

    .mobile-menu-btn {
        padding: 11px;
    }

    .header-back-link {
        min-height: 44px;
    }

    .sidebar-link {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}