/*--------------------------------------------------------------
# KafkIO docs
# Loaded only on /docs pages. Builds on style.css tokens (--ct-*).
--------------------------------------------------------------*/

:root {
    --kio-accent: var(--ct-active-bg-color);          /* markers, highlight boxes, current page */
    --kio-warn: #ffc107;                              /* warning boxes (Bootstrap warning yellow) */
    --kio-danger: #dc3545;                            /* "don't do this" boxes */
    --kio-ink: #261d07;                               /* headings, as .section-title p */
    --kio-muted: #909fa3;                             /* as .section-title h2 */
    --kio-rule: #e6e8ea;
    --kio-header-offset: 90px;                        /* keeps anchored headings clear of the top */
}

/* style.css underlines every .active (meant for nav links); Bootstrap also marks tab panes and
   breadcrumbs .active, so undo it for those */
.kio-docs .tab-pane.active,
.kio-docs .breadcrumb-item.active {
    text-decoration: none;
}

/* Wider than .container-xxl so screenshots get room on large screens */
.kio-docs-container {
    max-width: 1640px;
}

/* ---------- Docs home ---------- */

.kio-docs-hero {
    padding: 2.5rem 0 3rem;
    margin-bottom: 2.5rem;
}

.kio-docs-hero .lead {
    color: rgba(255, 255, 255, .85);
}

.kio-docs-card {
    border-color: var(--kio-rule);
    transition: box-shadow .2s, transform .2s;
}

.kio-docs-card:hover {
    box-shadow: 0 0 20px -4px rgb(144, 159, 163);
}

.kio-docs-card-icon {
    color: var(--kio-accent);
}

.kio-docs-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .95rem;
}

.kio-docs-card-list li {
    padding: .2rem 0;
}

.kio-docs-card-list a {
    text-decoration: none;
    color: var(--ct-link-text-color);
}

.kio-docs-card-list a:hover {
    text-decoration: underline;
}

/* ---------- Sidebar ---------- */

.kio-docs-sidebar {
    border-right: 1px solid var(--kio-rule);
}

.kio-docs-nav {
    padding: 1.5rem 0 1rem;
    font-size: .9rem;
}

@media (min-width: 992px) {
    .kio-docs-nav {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

.kio-docs-nav-home {
    display: block;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1rem;
    color: var(--kio-ink);
}

.kio-docs-nav-section {
    margin-bottom: 1.1rem;
}

.kio-docs-nav-title {
    font-family: "Poppins", sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--kio-muted);
    margin-bottom: .35rem;
}

.kio-docs-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kio-docs-nav li a,
.kio-docs-nav li .kio-docs-nav-soon {
    display: block;
    padding: .22rem .6rem;
    border-left: 3px solid transparent;
    text-decoration: none;
}

.kio-docs-nav li a:hover {
    border-left-color: var(--kio-rule);
}

.kio-docs-nav li a.is-current {
    border-left-color: var(--kio-accent);
    color: var(--kio-accent);
    font-weight: 600;
    background: rgba(243, 101, 39, .06);
}

/* Listed in the TOC but not written yet */
.kio-docs-nav-soon {
    color: #adb5bd;
    cursor: default;
}

.kio-docs-nav-soon::after {
    content: "soon";
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 0 .25rem;
    margin-left: .4rem;
    vertical-align: middle;
}

/* ---------- Page header, breadcrumbs, pager ---------- */

.kio-docs-main {
    padding-top: 1.5rem;
    min-width: 0; /* lets wide tables/code scroll instead of stretching the column */
}

.kio-docs-breadcrumb .breadcrumb {
    font-size: .8rem;
    margin-bottom: 1rem;
}

.kio-docs-breadcrumb a {
    text-decoration: none;
    color: var(--ct-link-text-color);
}

.kio-doc-header {
    border-bottom: 1px solid var(--kio-rule);
    padding-bottom: 1rem;
    margin-bottom: 1.75rem;
}

.kio-doc-eyebrow {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kio-muted);
    margin-bottom: .25rem;
}

/* Same orange rule as .section-title h2::after */
.kio-doc-eyebrow::after {
    content: "";
    width: 80px;
    height: 1px;
    display: inline-block;
    background: var(--kio-accent);
    margin: 4px 10px;
}

.kio-doc-header h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--kio-ink);
}

.kio-docs-pager {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kio-rule);
}

.kio-docs-pager a {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .8rem 1rem;
    border: 1px solid var(--kio-rule);
    border-radius: 7px;
    text-decoration: none;
}

.kio-docs-pager a:hover {
    border-color: var(--kio-accent);
}

.kio-docs-pager span {
    font-size: .75rem;
    color: var(--kio-muted);
}

.kio-docs-pager-next {
    text-align: right;
    margin-left: auto;
}

/* ---------- On this page ---------- */

.kio-docs-toc {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.5rem 0 1rem;
    font-size: .8rem;
}

.kio-docs-toc-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--kio-muted);
    margin-bottom: .5rem;
}

.kio-docs-toc ul {
    list-style: none;
    padding: 0;
    border-left: 1px solid var(--kio-rule);
}

.kio-docs-toc a {
    display: block;
    padding: .2rem .75rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    text-decoration: none;
    color: #6c757d;
}

.kio-docs-toc .kio-toc-sub a {
    padding-left: 1.5rem;
}

.kio-docs-toc a.is-active {
    color: var(--kio-accent);
    border-left-color: var(--kio-accent);
}

/* ---------- Article typography ---------- */

.kio-doc {
    font-size: 1.02rem;
    line-height: 1.7;
}

.kio-doc h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--kio-ink);
    margin-top: 2.75rem;
    margin-bottom: 1rem;
}

.kio-doc h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kio-ink);
    margin-top: 2rem;
}

.kio-doc h2, .kio-doc h3 {
    scroll-margin-top: var(--kio-header-offset);
}

/* Link icon shown next to headings on hover (added by docs.js) */
.kio-anchor {
    margin-left: .4rem;
    font-size: .8em;
    color: var(--kio-muted);
    opacity: 0;
    text-decoration: none;
    transition: opacity .15s;
}

.kio-doc h2:hover .kio-anchor, .kio-doc h3:hover .kio-anchor, .kio-anchor:focus {
    opacity: 1;
}

.kio-doc a:not(.kio-anchor):not(.btn) {
    color: var(--ct-link-text-color);
}

/* A UI element's on-screen name, e.g. a button, tab or menu path */
.kio-ui {
    font-weight: 600;
    color: var(--kio-ink);
    white-space: nowrap;
}

.kio-doc kbd {
    font-size: .8em;
    background: #fff;
    color: var(--kio-ink);
    border: 1px solid #ced4da;
    border-bottom-width: 3px;
    border-radius: 4px;
    padding: .05rem .4rem;
}

.kio-doc :not(pre) > code {
    color: #b33f0f;
    background: #fbf1ec;
    border-radius: 3px;
    padding: .05rem .3rem;
}

.kio-code {
    background: #1d1f21;
    color: #e6e6e6;
    border-radius: 7px;
    padding: 1rem 1.25rem;
    font-size: .88rem;
    line-height: 1.5;
}

.kio-table {
    font-size: .92rem;
}

.kio-table thead th {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    border-bottom: 2px solid var(--kio-accent);
}

/* Comparison matrix: a .kio-table whose cells are mostly yes / partly / no.
   Cells keep their words (readable without colour); the glyph is decoration. */
.kio-matrix th,
.kio-matrix td {
    vertical-align: top;
}

.kio-matrix td {
    min-width: 7.5rem;                                /* on phones the table scrolls rather than squashing cells */
}

.kio-matrix tbody th {
    font-weight: 600;
    color: var(--kio-ink);
    min-width: 9rem;
}

.kio-matrix thead th:first-child,
.kio-matrix tbody th {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

.kio-yes::before,
.kio-part::before,
.kio-no::before {
    display: inline-block;
    width: 1.1em;
    font-weight: 700;
}

.kio-yes::before {
    content: "\2713";
    color: #198754;
}

.kio-part::before {
    content: "\25D0";
    color: #c98a00;
}

.kio-no::before {
    content: "\2013";
    color: var(--kio-muted);
}

.kio-no {
    color: #6c757d;
}

.kio-related {
    padding-left: 1.2rem;
}

.kio-glossary dt {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--kio-ink);
}

.kio-glossary dd {
    margin: 0 0 .75rem 1rem;
}

/* Terms with an id can be linked to (/docs/reference/glossary#consumer-lag) */
.kio-glossary dt[id] {
    scroll-margin-top: var(--kio-header-offset);
}

.kio-glossary dt:target {
    color: var(--kio-accent);
}

/* Outline note on a draft page: says what a section will cover until it's written */
.kio-stub,
.kio-stub-sample {
    color: #6c757d;
    font-style: italic;
}

.kio-stub {
    border-left: 2px dashed #ced4da;
    padding-left: .75rem;
}

/* ---------- Callouts (Bootstrap .alert + icon column) ---------- */

.kio-callout {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    border: 0;
    border-left: 4px solid;
    border-radius: 0 7px 7px 0;
    margin: 1.5rem 0;
    line-height: 1.6;
}

.kio-callout.alert-info { border-left-color: #0dcaf0; }
.kio-callout.alert-success { border-left-color: #198754; }
.kio-callout.alert-warning { border-left-color: var(--kio-warn); }
.kio-callout.alert-danger { border-left-color: var(--kio-danger); }
.kio-callout.alert-secondary { border-left-color: var(--kio-muted); }

.kio-callout-icon {
    font-size: 1.15rem;
    margin-top: .2rem;
}

.kio-callout > div > :last-child {
    margin-bottom: 0;
}

/* ---------- Numbered steps ---------- */

.kio-steps {
    list-style: none;
    counter-reset: kio-step;
    padding-left: 0;
    margin: 1.5rem 0;
}

.kio-steps > li {
    counter-increment: kio-step;
    position: relative;
    padding-left: 3rem;
    padding-bottom: 1rem;
    border-left: 2px solid var(--kio-rule);
    margin-left: 1rem;
}

.kio-steps > li:last-child {
    border-left-color: transparent;
}

.kio-steps > li::before {
    content: counter(kio-step);
    position: absolute;
    left: -1.05rem;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--kio-ink);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    display: grid;
    place-items: center;
}

.kio-steps > li > :first-child {
    margin-top: 0;
}

.kio-doc .kio-step-title {
    font-size: 1.05rem;
    margin: .25rem 0 .4rem;
}

/* ---------- Annotated screenshots ----------
   <figure class="kio-shot">
     <div class="kio-shot-frame">
       <img ...>
       <span class="kio-box" style="--x:10%; --y:20%; --w:30%; --h:5%"></span>
       <span class="kio-mark" data-mark="1" style="--x:10%; --y:20%">1</span>
   All positions are percentages of the image, so overlays scale with it. */

.kio-shot {
    margin: 1.75rem 0;
}

.kio-shot-frame {
    position: relative;
    container-type: inline-size; /* marker size follows the image width (cqw) */
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 0 20px 0 rgb(144, 159, 163); /* as .feature-img */
    cursor: zoom-in;
}

.kio-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.kio-shot figcaption {
    font-size: .85rem;
    text-align: center;
    margin-top: .75rem;
}

/* Numbered marker, centred on (--x, --y) */
.kio-mark {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: clamp(18px, 2.4cqw, 30px);
    height: clamp(18px, 2.4cqw, 30px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--kio-accent) 50%, transparent);
    color: #fff;
    font: 700 clamp(10px, 1.35cqw, 16px)/1 "Poppins", sans-serif;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .55);
    z-index: 2;
    transition: transform .15s;
}

.kio-mark.is-active {
    transform: translate(-50%, -50%) scale(1.35);
}

/* Highlight rectangle at (--x, --y), size (--w, --h) */
.kio-box {
    --kio-box-color: var(--kio-accent);
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    border: max(2px, .25cqw) solid var(--kio-box-color);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 12px rgba(0, 0, 0, .35);
    z-index: 1;
}

.kio-box-warn {
    --kio-box-color: var(--kio-warn);
    border-style: dashed;
}

.kio-box-danger {
    --kio-box-color: var(--kio-danger);
}

/* Spotlight: dims everything outside the focus box (the frame clips the shadow) */
.kio-shot-spotlight .kio-box-focus {
    border-color: transparent;
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55);
}

/* Short text label attached to a box */
.kio-tag {
    position: absolute;
    left: -2px;
    bottom: calc(100% + 4px);
    white-space: nowrap;
    background: var(--kio-box-color);
    color: #1d1f21;
    font: 600 clamp(9px, 1.1cqw, 13px)/1.3 "Open Sans", sans-serif;
    padding: .2em .5em;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.kio-tag-below {
    bottom: auto;
    top: calc(100% + 4px);
}

.kio-box:not(.kio-box-warn) .kio-tag {
    color: #fff;
}

/* Cropped view of a full screenshot:
   style="--crop-x:17; --crop-y:20; --crop-w:52; --crop-h:25" (unitless % of the image),
   plus --img-ar (image width / height) if it isn't 16:9-ish. */
.kio-shot-crop {
    --img-ar: 1.7776;
}

.kio-shot-crop .kio-shot-view {
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    box-shadow: 0 0 20px 0 rgb(144, 159, 163);
    cursor: zoom-in;
}

.kio-shot-crop .kio-shot-view::before {
    content: "";
    display: block;
    padding-top: calc(100% * var(--crop-h) / (var(--crop-w) * var(--img-ar)));
}

.kio-shot-crop .kio-shot-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 100 / var(--crop-w));
    margin-left: calc(-100% * var(--crop-x) / var(--crop-w));
    margin-top: calc(-100% * var(--crop-y) / (var(--crop-w) * var(--img-ar)));
    border-radius: 0;
    box-shadow: none;
}

/* A small screenshot (a close-up of one pane or a few buttons) shown at a capped width instead of the article's:
   style="--kio-shot-max:300px" (default 420px). Centred; works with kio-shot-crop. */
.kio-shot-narrow {
    max-width: var(--kio-shot-max, 420px);
    margin-left: auto;
    margin-right: auto;
}

/* Legend under a screenshot; numbers match the markers */
.kio-legend {
    list-style: none;
    padding: 0;
    margin: -.5rem 0 1.75rem;
    display: grid;
    gap: .35rem;
}

.kio-legend li {
    position: relative;
    padding: .2rem .4rem .2rem 2.4rem;
    border-radius: 5px;
    transition: background .15s;
}

.kio-legend li::before {
    content: attr(data-mark);
    position: absolute;
    left: .4rem;
    top: .3rem;
}

.kio-legend li::before,
.kio-ref {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    background: var(--kio-accent);
    color: #fff;
    font: 700 .75rem/1 "Poppins", sans-serif;
    display: inline-grid;
    place-items: center;
    transform: translateY(-1px);
}

.kio-legend li.is-active {
    background: rgba(243, 101, 39, .1);
}

/* Inline reference to a marker in body text */
.kio-ref {
    width: 1.3rem;
    height: 1.3rem;
    font-size: .7rem;
    vertical-align: middle;
}

/* ---------- Platform tabs ---------- */

.kio-os-tabs .nav-link {
    color: #6c757d;
}

.kio-os-tabs .nav-link.active {
    color: var(--kio-ink);
    font-weight: 600;
    border-top: 3px solid var(--kio-accent);
    text-decoration: none;
}

.kio-os-tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 7px 7px;
    padding: 1.25rem 1.25rem .25rem;
    margin-bottom: 1.5rem;
}

/* ---------- Zoom modal ---------- */

.kio-shot-modal-dialog {
    max-width: min(1600px, 95vw);
}

#kioShotModalBody .kio-shot-frame {
    cursor: default;
    box-shadow: none;
}