/* ── ORTEC XS Manual ─────────────────────────────────────────────
   A documentation layout on the Bolster tokens (bolster.css): sticky top
   bar with search, a sticky section index on the left, one reading column.
   Every colour comes from a Bolster token — no others. */

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

html {scroll-behavior:smooth; scroll-padding-top:84px;}

body {
    margin:0;
    font-family:Roboto, -apple-system, "Segoe UI", sans-serif;
    font-weight:300;
    font-size:15.5px;
    line-height:24px;
    letter-spacing:0.2px;
    background:var(--bol-color-background-primary);
    color:var(--bol-color-text-primary);
    -webkit-font-smoothing:antialiased;
}

a {color:var(--bol-color-primary); text-decoration-color:color-mix(in srgb, var(--bol-color-accent) 70%, transparent); text-decoration-thickness:1.5px; text-underline-offset:3px;}
a:hover {color:var(--bol-color-accent);}

strong {font-weight:500;}
code {
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:13px;
    background:var(--bol-color-background-tertiary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-small);
    padding:1px 5px;
}

:focus-visible {outline:none; box-shadow:0 0 0 3px var(--bol-color-focus-ring);}

/* ── Top bar ────────────────────────────────────────────────────────────── */

.topbar {
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bol-color-background-primary) 90%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--bol-color-border);
}

.topbar-inner {
    max-width:1320px; margin:0 auto; padding:0 20px;
    height:60px;
    display:flex; align-items:center; gap:22px;
}

.brand {display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--bol-color-text-primary); white-space:nowrap;}
.brand img {height:20px; display:block;}
.brand .divider {width:1px; height:20px; background:var(--bol-color-border);}
.brand .wordmark {font-size:15px; font-weight:500; letter-spacing:0.1px;}
.brand .wordmark em {font-style:normal; color:var(--bol-color-accent);}

.topnav {display:flex; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;}
.topnav::-webkit-scrollbar {display:none;}
.topnav a {
    color:var(--bol-color-text-secondary);
    text-decoration:none;
    font-size:13.5px; font-weight:500;
    padding:6px 10px;
    border-radius:var(--bol-rounding-pill);
    white-space:nowrap;
}
.topnav a:hover {background:var(--bol-color-hover); color:var(--bol-color-text-primary);}
.topnav a[aria-current="page"] {background:var(--bol-color-primary); color:var(--bol-color-on-primary);}

.menu-toggle {
    display:none;
    appearance:none; border:0; background:none; cursor:pointer;
    width:36px; height:36px; padding:8px;
    flex-direction:column; justify-content:space-between;
    border-radius:var(--bol-rounding-small);
}
.menu-toggle span {display:block; height:2px; background:var(--bol-color-text-primary); border-radius:2px;}

/* ── Search ─────────────────────────────────────────────────────────────── */

.search {position:relative; flex:0 0 260px;}

.search input {
    width:100%;
    font:inherit; font-size:13.5px; font-weight:400;
    color:var(--bol-color-text-primary);
    background:var(--bol-color-background-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-pill);
    padding:7px 38px 7px 14px;
}
.search input::placeholder {color:var(--bol-color-text-secondary);}
.search input:focus {border-color:var(--bol-color-primary);}
.search input::-webkit-search-cancel-button {-webkit-appearance:none;}

.search kbd {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-family:inherit; font-size:11px; font-weight:500;
    color:var(--bol-color-text-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-small);
    padding:0 5px; line-height:16px;
    pointer-events:none;
}
.search input:focus ~ kbd {display:none;}

.search-results {
    position:absolute; right:0; top:calc(100% + 8px);
    width:min(560px, calc(100vw - 40px));
    max-height:min(70vh, 620px); overflow-y:auto;
    background:var(--bol-color-background-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-medium);
    box-shadow:0 18px 50px -20px rgba(63,1,35,.35);
    padding:6px;
}

.search-results .hit {
    display:block; text-decoration:none; color:inherit;
    padding:10px 12px;
    border-radius:var(--bol-rounding-small);
}
.search-results .hit:hover, .search-results .hit[aria-selected="true"] {background:var(--bol-color-hover);}
.search-results .hit .where {display:flex; gap:8px; align-items:center; font-size:11px; color:var(--bol-color-text-secondary); margin-bottom:2px;}
.search-results .hit .title {font-size:14px; font-weight:500; line-height:20px;}
.search-results .hit .title.q::before {content:"Q"; display:inline-block; font-size:10px; font-weight:700; color:var(--bol-color-accent); border:1px solid var(--bol-color-accent); border-radius:3px; padding:0 4px; margin-right:7px; vertical-align:2px; line-height:14px;}
.search-results .hit .snippet {font-size:13px; line-height:19px; color:var(--bol-color-text-secondary); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.search-results mark {background:var(--bol-color-accent-lighter); color:inherit; border-radius:2px; padding:0 1px;}
.search-results .none, .search-results .hint {padding:14px 12px; font-size:13px; color:var(--bol-color-text-secondary);}

/* ── Page grid ──────────────────────────────────────────────────────────── */

.page {
    max-width:1320px; margin:0 auto; padding:0 20px;
    display:grid;
    grid-template-columns:270px minmax(0, 1fr);
    gap:0 48px;
}

.sidebar {position:relative;}
.sidebar-inner {
    position:sticky; top:60px;
    max-height:calc(100vh - 60px);
    overflow-y:auto;
    padding:28px 0 40px;
    border-right:1px solid var(--bol-color-border);
    scrollbar-width:thin;
}

.sidebar .side-title {
    display:flex; align-items:center; gap:10px;
    margin:0 0 14px;
    font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--bol-color-text-secondary);
}

.toc {list-style:none; margin:0; padding:0 16px 0 0;}
.toc li {margin:0;}
.toc a {
    display:block;
    text-decoration:none;
    color:var(--bol-color-text-secondary);
    font-size:13.5px; line-height:19px;
    padding:6px 10px;
    border-left:2px solid transparent;
    border-radius:0 var(--bol-rounding-small) var(--bol-rounding-small) 0;
}
.toc a:hover {color:var(--bol-color-text-primary); background:var(--bol-color-hover);}
.toc > li > a {font-weight:500;}
.toc > li.current > a {color:var(--bol-color-primary); border-left-color:var(--bol-color-accent);}
.toc ul {list-style:none; margin:0; padding:0 0 4px; display:none;}
.toc li.current > ul {display:block;}
.toc ul a {padding:4px 10px 4px 22px; font-size:12.5px; font-weight:300;}
.toc ul li.current > a {color:var(--bol-color-text-primary);}

.sidebar .side-links {margin:24px 16px 0 0; padding-top:18px; border-top:1px solid var(--bol-color-border); font-size:12.5px;}
.sidebar .side-links a {display:block; padding:4px 10px; color:var(--bol-color-text-secondary); text-decoration:none;}
.sidebar .side-links a:hover {color:var(--bol-color-primary);}
.sidebar .side-links .side-title {margin:16px 0 6px 10px;}
.sidebar .side-links a.ext {font-weight:500; color:var(--bol-color-text-primary);}

/* ── Reading column ─────────────────────────────────────────────────────── */

.content {max-width:800px; padding:36px 0 80px; min-width:0;}

.page-head {padding-bottom:24px; margin-bottom:8px; border-bottom:1px solid var(--bol-color-border);}
.page-head .eyebrow {display:flex; gap:10px; align-items:center; margin:0 0 14px;}
.page-head h1 {margin:0 0 10px; font-size:38px; line-height:44px; font-weight:700; letter-spacing:-0.5px;}
.page-head .tagline {margin:0; font-size:18px; line-height:27px; color:var(--bol-color-text-secondary); max-width:62ch;}
.page-head .facts {display:flex; flex-wrap:wrap; gap:8px 28px; margin:20px 0 0; padding:0; list-style:none; font-size:13px; color:var(--bol-color-text-secondary);}
.page-head .facts strong {color:var(--bol-color-text-primary); font-weight:500; margin-right:6px;}

.doc-section {padding:36px 0 8px; border-bottom:1px solid var(--bol-color-border);}
.doc-section:last-of-type {border-bottom:0;}

.doc-section h2 {
    position:relative;
    margin:0 0 10px;
    font-size:27px; line-height:34px; font-weight:500; letter-spacing:-0.3px;
}
.doc-section h2 .anchor {
    position:absolute; left:-26px; top:0;
    text-decoration:none; color:var(--bol-color-text-secondary);
    opacity:0; font-weight:300;
}
.doc-section h2:hover .anchor {opacity:.7;}

.doc-section h3 {margin:30px 0 8px; font-size:16.5px; line-height:24px; font-weight:500;}
.doc-section h3::before {
    content:""; display:inline-block; width:8px; height:8px; border-radius:2px;
    background:var(--bol-color-accent); margin-right:10px; vertical-align:1px;
}
.doc-section h4 {margin:22px 0 6px; font-size:15px; font-weight:500;}

.doc-section p {margin:0 0 14px; max-width:72ch;}
.doc-section .lede {font-size:17px; line-height:27px; color:var(--bol-color-text-secondary); margin-bottom:6px;}
.doc-section ul, .doc-section ol {margin:0 0 16px; padding-left:22px; max-width:72ch;}
.doc-section li {margin:4px 0;}
.doc-section li > ul, .doc-section li > ol {margin:4px 0 6px;}

.doc-section dl {margin:0 0 16px; display:grid; grid-template-columns:minmax(140px, 220px) 1fr; gap:10px 22px;}
.doc-section dt {font-weight:500; margin:0;}
.doc-section dd {margin:0; color:var(--bol-color-text-secondary);}

.table-wrap {overflow-x:auto; margin:8px 0 18px;}
.doc-section table {border-collapse:collapse; width:100%; font-size:14px; line-height:21px;}
.doc-section th, .doc-section td {text-align:left; vertical-align:top; padding:9px 12px 9px 0; border-bottom:1px solid var(--bol-color-border);}
.doc-section th {font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--bol-color-text-secondary);}
.doc-section td:first-child {font-weight:500; white-space:nowrap;}
.doc-section tbody tr:hover {background:var(--bol-color-hover);}

.note, .warn {
    margin:18px 0; padding:14px 18px;
    border-left:3px solid var(--bol-color-blue);
    background:var(--bol-color-background-tertiary);
    border-radius:0 var(--bol-rounding-medium) var(--bol-rounding-medium) 0;
}
.note p:last-child, .warn p:last-child {margin-bottom:0;}
.warn {border-left-color:var(--bol-color-warning);}

/* Questions customers ask */
.faq {
    margin:28px 0 24px; padding:20px 22px 12px;
    background:var(--bol-color-background-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-large);
}
.faq h3 {margin:0 0 10px; font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--bol-color-accent); font-weight:700;}
.faq h3::before {display:none;}
.faq details {border-top:1px solid var(--bol-color-border);}
.faq details:first-of-type {border-top:0;}
.faq summary {
    cursor:pointer; list-style:none;
    padding:11px 0 11px 26px; position:relative;
    font-weight:500; font-size:15px; line-height:22px;
}
.faq summary::-webkit-details-marker {display:none;}
.faq summary::before {
    content:"+"; position:absolute; left:2px; top:10px;
    width:16px; text-align:center;
    color:var(--bol-color-accent); font-weight:400; font-size:18px; line-height:22px;
}
.faq details[open] summary::before {content:"–";}
.faq summary:hover {color:var(--bol-color-primary);}
.faq details > *:not(summary) {padding-left:26px;}
.faq details p {color:var(--bol-color-text-secondary); margin-bottom:12px;}
.faq details p:last-child {margin-bottom:14px;}
.faq .from {font-size:12px; color:var(--bol-color-text-secondary);}
.faq .from a {color:inherit;}

/* Badges (one hue per product, same as the changelog) */
.badge {
    display:inline-block;
    font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
    padding:3px 9px;
    border-radius:var(--bol-rounding-pill);
    border:1px solid currentColor;
    white-space:nowrap;
    color:var(--bol-color-text-secondary);
}
.badge.controltower   {color:var(--bol-color-blue);}
.badge.customerservice{color:var(--bol-color-purple);}
.badge.wismoadhoc     {color:var(--bol-color-orange);}
.badge.wismoagent     {color:var(--bol-color-green);}
.badge.customerportal {color:var(--bol-color-accent);}
.badge.insights       {color:var(--bol-color-positive);}
.badge.platform       {color:var(--bol-color-primary);}

/* ── Home ───────────────────────────────────────────────────────────────── */

body.home .page {display:block;}
body.home .sidebar {display:none;}
body.home .content {max-width:none; padding-top:0;}

.hero {
    padding:64px 0 40px;
    background:radial-gradient(900px 300px at 5% -40%, var(--bol-color-accent-lighter), transparent 60%);
}
.hero h1 {margin:0 0 14px; font-size:42px; line-height:50px; font-weight:700; letter-spacing:-0.8px; max-width:28ch;}
.hero h1 em {font-style:normal; color:var(--bol-color-accent);}
.hero p {margin:0 0 10px; font-size:18px; line-height:28px; color:var(--bol-color-text-secondary); max-width:64ch;}
.hero .stamp {margin-top:18px; font-size:13px;}
.hero .stamp strong {font-weight:500; color:var(--bol-color-text-primary);}

.home-section {padding:36px 0 8px;}
.home-section h2 {margin:0 0 6px; font-size:26px; line-height:32px; font-weight:500; letter-spacing:-0.3px;}
.home-section > p {margin:0 0 22px; color:var(--bol-color-text-secondary); max-width:70ch;}

.cards {display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px;}
.card {
    display:flex; flex-direction:column; gap:10px;
    text-decoration:none; color:inherit;
    padding:22px 22px 18px;
    background:var(--bol-color-background-secondary);
    border:1px solid var(--bol-color-border);
    border-radius:var(--bol-rounding-large);
    transition:border-color .12s, transform .12s;
}
.card:hover {border-color:var(--bol-color-accent); transform:translateY(-2px); color:inherit;}
.card h3 {margin:0; font-size:19px; font-weight:500;}
.card .tagline {margin:0; color:var(--bol-color-text-secondary); font-size:14.5px; line-height:22px; flex:1 1 auto;}
.card .meta {font-size:12.5px; color:var(--bol-color-text-secondary); line-height:19px;}
.card .meta strong {font-weight:500; color:var(--bol-color-text-primary);}
.card .more {font-size:13.5px; font-weight:500; color:var(--bol-color-accent);}
.card.platform {background:var(--bol-color-background-tertiary);}

/* ── Manual chrome ──────────────────────────────────────────────────────── */

/* The two manuals of one product, side by side as a switch. */
.docswitch {display:inline-flex; gap:4px; padding:3px; margin:18px 0 0; border:1px solid var(--bol-color-border); border-radius:var(--bol-rounding-pill); background:var(--bol-color-background-secondary);}
.docswitch a {padding:5px 14px; border-radius:var(--bol-rounding-pill); font-size:13px; font-weight:500; text-decoration:none; color:var(--bol-color-text-secondary);}
.docswitch a:hover {background:var(--bol-color-hover); color:var(--bol-color-text-primary);}
.docswitch a[aria-current="page"] {background:var(--bol-color-primary); color:var(--bol-color-on-primary);}

.badge.super {color:var(--bol-color-primary); background:var(--bol-color-primary-lighter); border-color:transparent;}

/* Numbered steps: the backbone of a manual. */
.doc-section ol.steps {list-style:none; counter-reset:step; padding-left:0;}
.doc-section ol.steps > li {counter-increment:step; position:relative; padding:2px 0 2px 38px; margin:8px 0;}
.doc-section ol.steps > li::before {
    content:counter(step);
    position:absolute; left:0; top:2px;
    width:24px; height:24px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700;
    color:var(--bol-color-on-primary); background:var(--bol-color-primary);
}
.doc-section b {font-weight:500; padding:0 4px; border-radius:var(--bol-rounding-small); background:var(--bol-color-background-tertiary); border:1px solid var(--bol-color-border); white-space:nowrap;}
.doc-section th b, .doc-section summary b {background:none; border:0; padding:0;}
kbd {font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; padding:1px 6px; border:1px solid var(--bol-color-border); border-bottom-width:2px; border-radius:var(--bol-rounding-small); background:var(--bol-color-background-secondary);}

.tip {
    margin:18px 0; padding:14px 18px;
    border-left:3px solid var(--bol-color-positive);
    background:var(--bol-color-background-tertiary);
    border-radius:0 var(--bol-rounding-medium) var(--bol-rounding-medium) 0;
}
.tip p:last-child {margin-bottom:0;}

/* The gate: what shows instead of a manual when there is no session. */
.gate {padding:72px 0 40px; max-width:64ch;}
.gate h1 {font-size:34px; line-height:40px; font-weight:700; margin:0 0 14px; letter-spacing:-0.4px;}
.gate p {color:var(--bol-color-text-secondary); font-size:16.5px; line-height:26px; margin:0 0 12px;}
.gate ol {color:var(--bol-color-text-secondary); font-size:16px; line-height:26px; padding-left:22px;}
.loading {padding:80px 0; color:var(--bol-color-text-secondary);}
[hidden] {display:none !important;}

.chip {
    appearance:none; cursor:pointer;
    border:1px solid var(--bol-color-border);
    background:var(--bol-color-background-secondary);
    color:var(--bol-color-text-secondary);
    font:inherit; font-size:13px; font-weight:500;
    padding:6px 14px; border-radius:var(--bol-rounding-pill);
}
.chip:hover {background:var(--bol-color-hover); color:var(--bol-color-text-primary);}
.chip[aria-pressed="true"] {background:var(--bol-color-primary); border-color:var(--bol-color-primary); color:var(--bol-color-on-primary);}

/* ── Utility pages ──────────────────────────────────────────────────────── */

.plain {padding:80px 0; max-width:60ch;}
.plain h1 {font-size:34px; line-height:40px; font-weight:700; margin:0 0 12px;}
.plain p {color:var(--bol-color-text-secondary); font-size:16px;}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {border-top:1px solid var(--bol-color-border); font-size:13px; color:var(--bol-color-text-secondary);}
.footer-inner {max-width:1320px; margin:0 auto; padding:28px 20px 56px;}
.footer p {margin:0 0 6px; max-width:80ch;}
.footer strong {font-weight:500; color:var(--bol-color-text-primary);}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width:1080px) {
    .search {flex:0 0 220px;}
    .page {grid-template-columns:230px minmax(0,1fr); gap:0 32px;}
        }

@media (max-width:820px) {
    .topbar-inner {gap:12px;}
    .menu-toggle {display:flex;}
    .topnav {display:none;}
    .brand .divider, .brand .wordmark {display:none;}
    .search {flex:1 1 auto;}
    .page {grid-template-columns:1fr; gap:0;}
    .sidebar {display:none;}
    body.nav-open .sidebar {
        display:block; position:fixed; inset:60px 0 0 0; z-index:30;
        background:var(--bol-color-background-primary);
        padding:0 20px; overflow-y:auto;
    }
    body.nav-open .sidebar-inner {position:static; max-height:none; border-right:0;}
    body.nav-open .sidebar .topnav {display:flex; flex-wrap:wrap; margin-bottom:14px;}
    .content {padding-top:24px;}
    .page-head h1 {font-size:30px; line-height:36px;}
    .hero {padding:40px 0 24px;}
    .hero h1 {font-size:32px; line-height:38px;}
    .doc-section h2 .anchor {display:none;}
    .doc-section dl {grid-template-columns:1fr; gap:2px 0;}
    .doc-section dd {margin-bottom:10px;}
}

@media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto;}
    .card {transition:none;}
}

/* ── Print: everything open, nothing sticky ─────────────────────────────── */

@media print {
    .topbar, .sidebar, .footer, .search, .docswitch {display:none !important;}
    .page {display:block; padding:0;}
    .content {max-width:none; padding:0;}
    .faq details > *:not(summary) {display:block;}
    .doc-section b {border:0; background:none; padding:0;}
    .faq summary::before {content:"";}
    a {color:inherit; text-decoration:none;}
    .doc-section {break-inside:avoid-page;}
}