/* SmartConnect API documentation viewer styles. Bundled in the extension; no external fonts/assets. */

/* Establish a height chain so the flex layout (and its overflow-y panes) get real height.
   Without html/body height the 100% chain collapses to 0 and the control renders blank. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Content is rendered into the framework-provided #controlAddIn container (with #sciDocRoot as a
   fallback). Give it a real height so the flex layout below doesn't collapse. A column so the
   footer bar can pin to the bottom, full width, below the sidebar|content|rail row. */
#controlAddIn, #sciDocRoot {
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", "Segoe WP", system-ui, -apple-system, sans-serif;
    color: #201f1e;
    font-size: 14px;
    line-height: 1.55;
}

#controlAddIn *, #sciDocRoot * {
    box-sizing: border-box;
}

.sci-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* Footer bar — a flex item after .sci-layout, spanning the full width and pinned to the bottom. */
.sci-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    padding: 9px 24px;
    border-top: 1px solid #edebe9;
    background: #faf9f8;
    font-size: 12px;
    color: #8a8886;
}

/* Pushed to the far right of the footer bar. The footer is a plain flex row with a gap (no
   space-between), so an auto left margin on the last item is what opens the gap before it. */
.sci-footer-right {
    margin-left: auto;
}

.sci-footer a {
    color: #0f6cbd;
    text-decoration: none;
}

.sci-footer a:hover {
    text-decoration: underline;
}

/* ---- Sidebar ---- */
.sci-sidebar {
    flex: 0 0 270px;
    background: #faf9f8;
    border-right: 1px solid #edebe9;
    overflow-y: auto;
    padding: 0 0 20px;   /* no top padding: the sticky .sci-sidebarhead owns the top so nav can't bleed above it */
}

/* Pinned sidebar head (brand + search): sticks to the top of the scrolling sidebar so the filter/
   search box is always reachable. background:inherit matches the sidebar's own background in every
   context (light / dark / branded site / in-app), so no per-theme background duplication is needed. */
.sci-sidebarhead {
    position: sticky;
    top: 0;
    z-index: 6;
    background: #faf9f8;   /* opaque, matches the sidebar; site brand/dark override in build.js */
    padding-top: 20px;     /* .sci-sidebar has no top padding, so the head owns the top spacing */
    padding-bottom: 8px;
    border-bottom: 1px solid #edebe9;
}

.sci-brand {
    padding: 0 22px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #0f6cbd;
    border-bottom: 1px solid #edebe9;
    margin-bottom: 12px;
}

.sci-navgroup {
    padding: 14px 22px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a8886;
}

.sci-sidebar a {
    display: block;
    padding: 7px 22px;
    color: #323130;
    text-decoration: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.sci-sidebar a:hover {
    background: #f3f2f1;
    padding-left: 27px;
}

.sci-sidebar a:active {
    background: #e1dfdd;
}

.sci-sidebar a.active {
    background: #eff6fc;
    border-left-color: #0f6cbd;
    color: #0f6cbd;
    font-weight: 600;
}

/* ---- Nested sub-navigation: a topic's collection sub-pages (salesOrders > salesOrderLines) ---- */
.sci-navitem {
    position: relative;
}

/* Child sub-pages sit in an indented container. Visible by default so a no-JS visitor still sees
   them; docviewer collapses them (below) once it sets .sci-js, then expands the active branch. */
.sci-subnav {
    padding-left: 14px;
}

.sci-navchild {
    font-size: 13px;
}

/* Expand/collapse caret for a parent that has sub-pages. Lives in the left gutter of the link and is
   only meaningful with JS, so it stays hidden until docviewer adds .sci-js. */
.sci-navcaret {
    display: none;
}

.sci-js .sci-navcaret {
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
    width: 17px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a8886;
    cursor: pointer;
    z-index: 1;
}

.sci-navcaret::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); /* pointing right = collapsed */
    transition: transform 0.15s ease;
}

.sci-navcaret[aria-expanded="true"]::before {
    transform: rotate(45deg); /* pointing down = expanded */
}

.sci-navcaret:hover {
    color: #323130;
}

/* With JS, sub-pages are collapsed until their parent branch is expanded (toggle or active branch). */
.sci-js .sci-subnav {
    display: none;
}

.sci-js .sci-subnav.sci-expanded {
    display: block;
}

/* Realtime-enabled nav links carry the lightning-bolt icon on the right. Flex (higher specificity than
   the block rule above) puts the label left, icon right. */
.sci-sidebar a.sci-navlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Lightning-bolt glyph (inline SVG, tinted via currentColor). Brand blue so it reads as a status
   marker regardless of the link's active/hover state; nudges on hover to echo the link motion. */
.sci-webhook {
    flex: 0 0 auto;
    color: #0f6cbd;
    vertical-align: middle;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Sidebar marker — kept to the glyph's natural size so the lightning bolt sits quietly beside the
   link text rather than crowding it. CSS dimensions override the SVG's own width/height attributes. */
.sci-sidebar a.sci-navlink .sci-webhook {
    width: 13px;
    height: 13px;
    opacity: 0.8;
}

.sci-sidebar a.sci-navlink:hover .sci-webhook,
.sci-sidebar a.sci-navlink.active .sci-webhook {
    opacity: 1;
    transform: scale(1.12);
}

/* "Realtime-enabled" pill shown inline with the endpoint name (inside the <h1>). Sized independently
   of the heading so it reads as a tag beside the title, not part of it. */
.sci-hookbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcecfa;
    color: #0f4a82;
    border-radius: 11px;
    padding: 2px 10px 2px 8px;
    margin-left: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    position: relative;
    top: -3px;
}

.sci-hookbadge .sci-webhook {
    color: #0f4a82;
    opacity: 1;
}

/* ---- Content ---- */
.sci-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 0 44px 80px;   /* no top padding: sticky headers pin flush at top:0 with no bleed band above */
}

/* Pages with no field rail are two panes: nav and content. The content pane takes the whole width.
   It used to be capped at 1100px, which on a wide viewport left a ~500px empty band on the right —
   the same width as the rail, so it read as a third pane that was not there. Centring the capped
   column only moved that wasted space to both sides of it. */
.sci-norail .sci-content {
    max-width: none;
}

/* ...but keep a readable measure for PROSE. Tables, diagrams and code blocks get the full width,
   which is the point on pages like the endpoint catalog; running text does not, because 1600px
   lines are unreadable. Centring the whole column instead just moved the wasted space to both
   sides of it. */
.sci-norail .sci-content > p,
.sci-norail .sci-content > ul,
.sci-norail .sci-content > ol,
.sci-norail .sci-content > .sci-note,
.sci-norail .sci-content > .sci-info,
.sci-norail .sci-content > .sci-tip,
.sci-norail .sci-content > .sci-warn,
.sci-norail .sci-content > .sci-danger {
    max-width: 1100px;
}

/* ---- Field reference rail (right column) ---- */
/* Only rendered on endpoint topics that have a field list (FieldsFor returns non-empty); concept
   pages get the sci-norail layout and no rail at all. Default width 500px; the user can drag it
   (docviewer.js remembers the chosen width, double-click the handle to reset to this default). */
.sci-fields {
    flex: 0 0 500px;
    overflow: auto;
    background: #faf9f8;
    border-left: 1px solid #edebe9;
    padding: 0 20px 80px;   /* no top padding: the sticky field header + column header pin flush at the top */
}

/* Drag handle between the content and the field rail. Drag left to widen the rail. */
.sci-resizer {
    flex: 0 0 6px;
    cursor: col-resize;
    background: #edebe9;
    position: relative;
    transition: background 0.15s ease;
}

.sci-resizer:hover,
body.sci-resizing .sci-resizer {
    background: #0f6cbd;
}

.sci-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: #fff;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sci-resizer:hover::after {
    opacity: 0.85;
}

/* While dragging, suppress text selection and keep the resize cursor everywhere. */
body.sci-resizing {
    user-select: none;
    cursor: col-resize;
}

.sci-fieldhead {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f6cbd;
    position: sticky;
    top: 0;
    z-index: 3;
    background: #faf9f8;
    padding: 16px 0 8px;
    margin: 0;
    height: 44px;   /* fixed so the column-header th can pin flush directly beneath it (th top = this) */
    box-sizing: border-box;
}

.sci-fieldhint {
    font-size: 12px;
    color: #8a8886;
    margin: 0 0 6px;
}

/* Collapsible field legend — collapsed by default so it doesn't clutter the
   field list; the pill glossary sits one-per-line when expanded for easy scanning. */
.sci-legend {
    font-size: 12px;
    color: #8a8886;
    margin: 0 0 12px;
}

.sci-legend > summary {
    cursor: pointer;
    list-style: none;
    color: #0f6cbd;
}

.sci-legend > summary::-webkit-details-marker {
    display: none;
}

.sci-legend > summary::before {
    content: '\25B8'; /* right-pointing triangle */
    display: inline-block;
    margin-right: 4px;
    color: #a19f9d;
    transition: transform 0.1s ease;
}

.sci-legend[open] > summary::before {
    transform: rotate(90deg);
}

.sci-legend-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 16px;
}

.sci-legend-list li {
    margin: 0 0 5px;
    line-height: 1.5;
}

.sci-legend-list .sci-pill {
    margin-right: 6px;
}

/* Rail modifier: narrower type and tighter padding than a prose table, and a sticky header. */
.sci-fieldtable {
    font-size: 12px;
    display: table;   /* the rail scrolls as a pane; the table itself must not be a scroll container */
    margin: 0;
}

.sci-fieldtable th {
    padding: 4px 6px;
    position: sticky;
    top: 44px;   /* pins flush beneath the 44px-tall sticky .sci-fieldhead */
    z-index: 2;
    background: #faf9f8;
}

.sci-fieldtable td {
    padding: 5px 6px;
    color: #323130;
}

.sci-fieldtable td code {
    font-size: 11px;
    background: #eff6fc;
    color: #0f6cbd;
    padding: 1px 4px;
    border-radius: 3px;
}

.sci-fieldtable tbody tr:hover {
    background: #f3f2f1;
}

.sci-fields .sci-pill {
    font-size: 10px;
    padding: 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Keep the API and BC-field names on one line — widen the rail (drag) rather than wrap them.
   Only the Notes column wraps. */
.sci-fieldtable th:nth-child(1),
.sci-fieldtable th:nth-child(2),
.sci-fieldtable td:nth-child(1),
.sci-fieldtable td:nth-child(2) {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Pinned headers — the endpoint header (title + method/Table pills + URL box) on API topics, and the
   bare <h1> on concept topics (Licensing, Permissions, …) — stay at the top of the content pane as the
   body scrolls, in both the site and the in-app viewer. .sci-content has no top padding, so top:0 pins
   flush at the top with no band above for content to bleed through. Opaque background (dark/brand
   overrides in build.js) so scrolled body text passes cleanly beneath. */
.sci-endpoint,
.sci-content > h1 {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-bottom: 1px solid #edebe9;
}

.sci-endpoint h1 {
    margin-top: 0;
    margin-bottom: 6px;
}

.sci-endpoint .sci-url {
    margin-bottom: 0;
}

.sci-content h1 {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 6px;
}

.sci-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 32px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #edebe9;
}

.sci-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 22px 0 8px;
}

.sci-content p,
.sci-content li {
    color: #323130;
}

.sci-lead {
    font-size: 15px;
    color: #605e5c;
    margin-top: 0;
}

.sci-content code {
    background: #f3f2f1;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 13px;
}

.sci-content pre {
    background: #1f1f1f;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
}

.sci-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* ---- Diagrams (build-time-rendered Mermaid, inlined as SVG) ----
   Neutral card that reads in both the public site and the in-app viewer. The diagram is themed
   "neutral" (dark ink on light), so keep a light card even in the site's dark mode (build.js).
   Wide diagrams scroll inside the card rather than overflow the page. */
.sci-diagram {
    margin: 18px 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #edebe9;
    border-radius: 6px;
    overflow-x: auto;
    text-align: center;
}

/* The rendered SVGs carry explicit width/height (from their viewBox — see render-diagrams.js), so they
   scale like an <img>: max-width keeps a wide diagram inside the card, height:auto preserves the ratio,
   and max-height keeps a tall top-down flowchart from dominating the page. */
.sci-diagram svg {
    max-width: 100%;
    max-height: 600px;
    height: auto;
}

/* Local-preview-only fallback (author hasn't run render-diagrams.js). Never ships — build.js fails
   the build while a diagram is missing its SVG. */
.sci-diagram-missing {
    text-align: left;
}

.sci-diagram-missing figcaption {
    color: #a4262c;
    font-size: 12px;
    margin-bottom: 8px;
}

/* ---- Diagram lightbox ----
   A diagram is capped in the flow (max-height above); the runtime JS (docviewer.js / docviewer-static.js)
   makes it clickable and opens an enlarged copy in this overlay. Styles are shared so both viewers match. */
.sci-diagram[data-sci-zoom] {
    cursor: zoom-in;
}

.sci-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(30, 29, 27, 0.82); /* off-black wash */
}

.sci-lightbox-inner {
    position: relative;
    background: #fff; /* diagrams are drawn for a light surface, even in dark mode */
    border-radius: 8px;
    padding: 20px;
    max-width: 96vw;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.sci-lightbox-inner svg {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 86vh;
}

/* Zoomed past fit: the caps have to go or the SVG cannot grow, and .sci-lightbox-inner's
   overflow:auto becomes the viewport that JS pans by scrollLeft/scrollTop. */
.sci-lightbox-inner.sci-zoomed svg {
    max-width: none;
    max-height: none;
}

.sci-lightbox-inner.sci-zoomed {
    cursor: grab;
}

.sci-lightbox-inner.sci-panning {
    cursor: grabbing;
}

/* Zoom controls, mirroring the close button's treatment on the same wash. */
.sci-lightbox-tools {
    position: fixed;
    top: 16px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sci-lightbox-tool {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.sci-lightbox-tool:hover {
    background: rgba(255, 255, 255, 0.15);
}

.sci-lightbox-tool[disabled] {
    opacity: 0.4;
    cursor: default;
}

.sci-lightbox-tool[disabled]:hover {
    background: transparent;
}

.sci-lightbox-level {
    min-width: 52px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.sci-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.sci-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ---- Tables ---- */
/* EVERY table in the viewer carries .sci-table: prose tables from Markdown (gen-docs), the field
   rail (.sci-fieldtable) and the endpoint catalog (.sci-endpointtable). Those two keep their own
   class purely as a MODIFIER for what genuinely differs — a narrow sticky-header rail, and one
   nowrap column. Everything shared lives here, so a change to table styling happens in one place.
   Before this, three near-identical rule sets had drifted apart and the row hover was defined
   three times (here, the site's branded layer, and the dark layer) at three different colours.

   Horizontal rules only, matching the rail. A full cell grid made every table read as a
   spreadsheet; row rules separate the data and leave wide tables far easier to scan.

   `display: block` is what lets a wide table scroll instead of pushing the page sideways: the
   generator emits a bare <table> with no wrapper element, so the table itself must be the scroll
   container. A table of wrapping prose still shrinks to the column and shows no scrollbar, which
   is correct; the scrollbar appears only when content cannot wrap narrower. */
.sci-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-collapse: collapse;
    width: 100%;
    margin: 14px 0;
    font-size: 13px;
}

.sci-table th,
.sci-table td {
    border-bottom: 1px solid #edebe9;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    /* overflow-wrap, NOT word-break: break-word. word-break split ordinary words mid-character
       whenever a column was narrow ("document" rendered as "docume nt" in the endpoint catalog).
       overflow-wrap only breaks a word that cannot fit on a line of its own. */
    overflow-wrap: break-word;
}

.sci-table th {
    background: #faf9f8;
    border-bottom: 1px solid #d2d0ce;   /* header rule reads stronger than the row rules */
    color: #605e5c;
    font-weight: 600;
    white-space: nowrap;                /* column labels are short; keep them on one line */
}

/* No trailing rule under the final row: the table ends on content, not on a line. */
.sci-table tbody tr:last-child td {
    border-bottom: none;
}

.sci-table tbody tr {
    transition: background 0.12s ease;
}

.sci-table tbody tr:hover {
    background: #eff6fc;
}

/* Identifiers stay intact even though cells may break long words. */
.sci-table td code {
    white-space: nowrap;
}

/* Endpoint catalog: Kind holds a single short word (master / document / reference / other) and must
   never be the column that wraps. */
.sci-endpointtable td:nth-child(3) {
    white-space: nowrap;
}

/* ---- HTTP method + misc badges ---- */
.sci-method {
    display: inline-block;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 3px;
    padding: 2px 7px;
    margin-right: 6px;
    color: #fff;
}

.sci-get { background: #107c10; }
.sci-post { background: #0f6cbd; }
.sci-patch { background: #986f0b; }
.sci-delete { background: #a4262c; }

.sci-url {
    background: #f3f2f1;
    border: 1px solid #edebe9;
    border-radius: 6px;
    padding: 10px 14px;
    font-family: "Cascadia Code", Consolas, "Courier New", monospace;
    font-size: 13px;
    word-break: break-all;
    margin: 10px 0;
}

/* All five callouts share one shape and differ only in their accent and fill. .sci-callout carries
   the shape, the variant class carries the two colours — the same consolidation as .sci-table.
   Every callout element gets both classes (see render-helpers.js H.Info/Note/Tip/Warn/Danger). */
.sci-callout {
    border-left: 4px solid;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin: 16px 0;
}

.sci-note {
    border-left-color: #0f6cbd;
    background: #eff6fc;
}

.sci-warn {
    border-left-color: #986f0b;
    background: #fffbe6;
}

.sci-info {
    border-left-color: #0e7490;
    background: #ecfeff;
}

.sci-tip {
    border-left-color: #107c10;
    background: #eef8ee;
}

.sci-danger {
    border-left-color: #a4262c;
    background: #fdf0f0;
}

.sci-pill {
    display: inline-block;
    background: #edebe9;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 12px;
    color: #605e5c;
    transition: background 0.15s ease, color 0.15s ease;
}

.sci-pill:hover {
    background: #0f6cbd;
    color: #fff;
}

/* Color-coded field-rail pills. Special-handling ("workflow") fields stand out from plain ones:
   req = required on create, res = resolver (set a record by your own key),
   cur = currency-translated (ISO <-> blank LCY), ro = read-only. These rules follow the base
   .sci-pill so they win over its hover color. */
.sci-pill-req {
    background: #fdd8d8;
    color: #a4262c;
    font-weight: 600;
}

.sci-pill-res {
    background: #cfe4fa;
    color: #0f4a82;
}

.sci-pill-cur {
    background: #ead9fb;
    color: #6b29a8;
}

.sci-pill-ro {
    background: #e1dfdd;
    color: #605e5c;
}

/* ext = a field detected on the source table at runtime (often from another extension),
   not in the curated list. */
.sci-pill-ext {
    background: #fde7c3;
    color: #8a5310;
}

.sci-pill-req:hover { background: #c50f1f; color: #fff; }
.sci-pill-cur:hover { background: #8b3fd1; color: #fff; }
.sci-pill-ro:hover  { background: #a19f9d; color: #fff; }
.sci-pill-ext:hover { background: #b9690d; color: #fff; }

/* ---- Sidebar search ---- */
.sci-searchwrap {
    padding: 0 18px 12px;
}

.sci-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #201f1e;
    background: #fff;
    border: 1px solid #d2d0ce;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sci-search::placeholder {
    color: #a19f9d;
}

.sci-search:focus {
    border-color: #0f6cbd;
    box-shadow: 0 0 0 2px rgba(15, 108, 189, 0.18);
}

/* In-content endpoint filter (the "All endpoints" catalog table). Narrower than the
   full-width sidebar search so it reads as a table control, not a page-wide field. */
.sci-tablesearchwrap {
    margin: 0 0 12px;
}

.sci-tablesearch {
    max-width: 320px;
    padding: 6px 10px;
    font-size: 12px;
}

/* Shown by docviewer.js only when a query matches nothing. */
.sci-noresults {
    display: none;
    padding: 8px 22px;
    font-size: 12px;
    color: #8a8886;
    font-style: italic;
}

/* ---- Toolbar: "Copy for AI chat" (left) + Copy-as-Markdown (right) ---- */
/* .sci-aimenu links carry the PUBLIC llms.txt / page .md URLs so an AI client can fetch them. In the BC
   control add-in the page is not served from the public site, so a relative or location-derived
   URL would be unreachable - the href is therefore absolute, stamped from Core's app.json help
   URL by both emitters. It is an <a>, so it needs the anchor resets a <button> does not, and
   margin-right:auto pulls it to the left edge while the page actions stay right. */
.sci-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 4px;   /* top space now that .sci-content has no top padding */
}

.sci-copybtn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #0f6cbd;
    background: #fff;
    border: 1px solid #c8d8ea;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Clipboard glyph before the label. */

:root {
    /* Copy glyph for .sci-aimenu-main, and the caret for the toggle. Inline SVG in a mask so both
       take currentColor and need no extra asset request (the CSP allows data: for img-src). */
    --sci-copy-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.6" stroke-linejoin="round"><rect x="5.5" y="5.5" width="9" height="9" rx="2"/><path d="M10.5 2.5h-7a2 2 0 0 0-2 2v7"/></svg>');
    --sci-open-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 11 11 5"/><path d="M6.5 4.5h5v5"/></svg>');
    --sci-caret-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6.5l4 4 4-4"/></svg>');
}

/* ---- "Copy for AI" split button + menu (both viewers) ---------------------------------------
   One pill: [icon] label | caret. The border, fill and radius live on the WRAPPER; the two halves
   are transparent and carry only padding, so there is no doubled edge and no cascade fight.

   The halves deliberately do NOT use .sci-copybtn. That class brings its own border, radius,
   background AND a ::before copy glyph - and on the public site help-site.css loads after this
   file and re-asserts several of those, so borrowing it made the caret render as a second
   separate pill with two glyphs in it. Self-contained here instead.

   Every menu href is the ABSOLUTE PUBLIC url, stamped by both emitters from Core's app.json help
   URL: inside the BC control add-in nothing location-derived is reachable by an AI client. The
   items are real links (target=_blank, which is also how a control add-in reaches the browser),
   so the menu degrades to working navigation with no JS and under a CSP that forbids inline
   handlers. Colours are literals, not --pai-* tokens: those exist only in the site's brand layer
   and this stylesheet is shared with the in-product viewer. */
.sci-aimenu {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #b8cde8;
    border-radius: 7px;
    overflow: hidden;
}

.sci-aimenu:hover {
    border-color: #0f6cbd;
}

.sci-aimenu-main,
.sci-aimenu-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #0f6cbd;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sci-aimenu-main {
    gap: 7px;
    padding: 7px 12px;
}

.sci-aimenu-toggle {
    padding: 7px 8px;
    border-left: 1px solid #dce6f2;
}

.sci-aimenu-main::before,
.sci-aimenu-toggle::before {
    content: "";
    flex: none;
    background: currentColor;
}

.sci-aimenu-main::before {
    width: 15px;
    height: 15px;
    -webkit-mask: var(--sci-copy-glyph) center / contain no-repeat;
    mask: var(--sci-copy-glyph) center / contain no-repeat;
}

.sci-aimenu-toggle::before {
    width: 11px;
    height: 11px;
    -webkit-mask: var(--sci-caret-glyph) center / contain no-repeat;
    mask: var(--sci-caret-glyph) center / contain no-repeat;
}

.sci-aimenu-main:hover,
.sci-aimenu-toggle:hover {
    background: #eff6fc;
}

/* The panel. position:fixed with coordinates set by wireAiMenu, and moved to <body> on init:
   .sci-content is an overflow:auto scroll container and .sci-toolbar computes a non-none
   transform (making it the containing block for fixed), either of which clips or mis-anchors it. */
.sci-aimenu-list {
    position: fixed;
    z-index: 30;
    min-width: 234px;
    padding: 4px;
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}

/* Each item is icon + label: a copy mark on the three that copy, a diagonal arrow on the one
   that navigates, so the odd one out is legible at a glance rather than only by its wording. */
.sci-aimenu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 0;
    border-radius: 5px;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #0f6cbd;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sci-aimenu-item::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
}

.sci-ico-copy::before {
    -webkit-mask: var(--sci-copy-glyph) center / contain no-repeat;
    mask: var(--sci-copy-glyph) center / contain no-repeat;
}

.sci-ico-open::before {
    -webkit-mask: var(--sci-open-glyph) center / contain no-repeat;
    mask: var(--sci-open-glyph) center / contain no-repeat;
}

.sci-aimenu-item:hover,
.sci-aimenu-item:focus-visible {
    background: #eff6fc;
}

/* One rule, above the last item: the first three copy, the last one navigates. */
.sci-aimenu-item.sci-aimenu-sep {
    margin-top: 5px;
    padding-top: 11px;
    border-top: 1px solid #eaeff5;
    border-radius: 0 0 4px 4px;
}

.sci-copybtn::before {
    content: "\29C9";
    font-weight: 400;
}

.sci-copybtn:hover {
    background: #eff6fc;
    border-color: #0f6cbd;
    box-shadow: 0 1px 4px rgba(15, 108, 189, 0.15);
}

.sci-copybtn:active {
    background: #cfe4fa;
}

.sci-copybtn.sci-copied {
    color: #0e700e;
    border-color: #9fd39f;
    background: #f0f9f0;
}

.sci-copybtn.sci-copyfail {
    color: #8a6116;
    border-color: #e6c98a;
    background: #fffbe6;
}

/* ============================================================
   Interactivity & motion
   ============================================================ */

/* Content fades/slides in each time a topic is rendered (innerHTML is rebuilt per navigation). */
@keyframes sciFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* NOT scroll-behavior: smooth. It governs only programmatic and fragment scrolls (a wheel or drag
   is untouched), and with it set those were the ones that broke: scrollIntoView() left scrollTop at
   0, while the same call with behavior:'instant' scrolled to 1320. The animation gets started and
   dropped - the sciFadeIn transform on `.sci-content > *` just below is the likely culprit - which
   took the browser's own #fragment navigation down with it. */

/* Stagger the first few blocks so a topic "assembles" rather than popping in at once. */
.sci-content > * {
    animation: sciFadeIn 0.32s ease both;
}
/* ...but NOT the pinned endpoint header: the fade's transform makes the sticky element a stacking
   context that later (also transformed) siblings paint over, so scrolled content bleeds above it. */
.sci-content > .sci-endpoint {
    animation: none;
}
.sci-content > *:nth-child(1) { animation-delay: 0.02s; }
.sci-content > *:nth-child(2) { animation-delay: 0.06s; }
.sci-content > *:nth-child(3) { animation-delay: 0.10s; }
.sci-content > *:nth-child(4) { animation-delay: 0.14s; }
.sci-content > *:nth-child(5) { animation-delay: 0.18s; }

/* Animated underline on in-content links. */
.sci-content a {
    color: #0f6cbd;
    text-decoration: none;
    background-image: linear-gradient(#0f6cbd, #0f6cbd);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size 0.2s ease, color 0.15s ease;
}

.sci-content a:hover {
    color: #115ea3;
    background-size: 100% 1.5px;
}

/* Headings get a subtle accent bar that grows on hover. */
.sci-content h2 {
    position: relative;
    transition: color 0.15s ease;
}

.sci-content h2::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 0.15em;
    height: 0.85em;
    width: 3px;
    background: #0f6cbd;
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.2s ease;
}

.sci-content h2:hover::before {
    transform: scaleY(1);
}

/* (Row hover + its transition now live with the rest of the table styling, on .sci-table.) */

.sci-method:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Code & URL blocks respond to hover. */
.sci-content pre,
.sci-url {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sci-content pre:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.sci-url:hover {
    border-color: #0f6cbd;
    box-shadow: 0 2px 8px rgba(15, 108, 189, 0.12);
}

/* Callouts slide their accent on hover. */
.sci-note,
.sci-warn,
.sci-info,
.sci-tip,
.sci-danger {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sci-note:hover,
.sci-warn:hover,
.sci-info:hover,
.sci-tip:hover,
.sci-danger:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Custom scrollbars (WebKit/Chromium — the BC web client). */
.sci-content::-webkit-scrollbar,
.sci-sidebar::-webkit-scrollbar {
    width: 10px;
}

.sci-content::-webkit-scrollbar-thumb,
.sci-sidebar::-webkit-scrollbar-thumb {
    background: #c8c6c4;
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sci-content::-webkit-scrollbar-thumb:hover,
.sci-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a19f9d;
    background-clip: padding-box;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .sci-content,
    .sci-content > *,
    .sci-sidebar a,
    .sci-method,
    .sci-note,
    .sci-warn,
    .sci-info,
    .sci-tip,
    .sci-danger,
    .sci-content a {
        animation: none !important;
        transition: none !important;
    }
}