/* ============================================================
   documents-xrv.css — компоненти сторінок-документів:
   секції з кодами на лівому полі, «термінал», таблиці,
   примітки, схеми, чек-листи, покрокові алгоритми.
   Проєкт: xarrovex.com
   ============================================================ */

/* ---------- секція з кодом-міткою на лівому полі ---------- */

.doc-block-xrv {
    display: grid;
    grid-template-columns: var(--rail-xrv) 1fr;
    column-gap: var(--gap-xrv);
    align-items: start;
    padding: 26px 0 22px;
    border-top: var(--line-xrv);
}

.doc-block-xrv:first-of-type {
    border-top: none;
}

.doc-code-xrv {
    font-family: var(--mono-xrv);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--accent-dark-xrv);
    padding-top: 4px;
    white-space: nowrap;
}

.doc-code-sub-xrv {
    display: block;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9aa2ae;
    margin-top: 4px;
}

.doc-body-xrv > *:last-child {
    margin-bottom: 0;
}

.doc-h2-xrv {
    font-family: var(--head-xrv);
    font-size: clamp(18px, 2.4vw, 23px);
    line-height: 1.24;
    color: var(--ink-xrv);
    margin: 0 0 12px;
}

.doc-h3-xrv {
    font-family: var(--body-xrv);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--deep-xrv);
    margin: 20px 0 8px;
}

.doc-body-xrv p {
    color: var(--mute-xrv);
    margin-bottom: 13px;
}

.doc-body-xrv strong {
    color: var(--ink-xrv);
    font-weight: 700;
}

.doc-body-xrv ul,
.doc-body-xrv ol {
    margin: 0 0 15px;
    padding-left: 20px;
    color: var(--mute-xrv);
}

.doc-body-xrv li {
    margin-bottom: 7px;
}

.doc-body-xrv ul {
    list-style: none;
    padding-left: 0;
}

.doc-body-xrv ul > li {
    position: relative;
    padding-left: 20px;
}

.doc-body-xrv ul > li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--mono-xrv);
    color: var(--accent-xrv);
}

@media (max-width: 760px) {
    .doc-block-xrv {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 20px 0 18px;
    }

    .doc-code-xrv {
        padding-top: 0;
    }

    .doc-code-sub-xrv {
        display: inline;
        margin-left: 10px;
    }
}

/* ---------- блок-«термінал» ---------- */

.term-box-xrv {
    background: var(--night-xrv);
    border: 1px solid var(--mid-xrv);
    border-left: 3px solid var(--accent-xrv);
    padding: 16px 18px 18px;
    margin: 18px 0 20px;
    overflow-x: auto;
}

.term-head-xrv {
    font-family: var(--mono-xrv);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent-xrv);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, .16);
}

.term-line-xrv {
    display: block;
    font-family: var(--mono-xrv);
    font-size: 13px;
    line-height: 1.86;
    color: #cdd4dd;
    white-space: nowrap;
}

.term-line-xrv::before {
    content: "> ";
    color: var(--accent-xrv);
}

.term-out-xrv {
    display: block;
    font-family: var(--mono-xrv);
    font-size: 12px;
    line-height: 1.8;
    color: #7d8794;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, .16);
    white-space: normal;
}

/* ---------- прості таблиці ---------- */

.spec-table-xrv {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 20px;
    font-size: 14px;
}

.spec-table-xrv caption {
    caption-side: top;
    text-align: left;
    font-family: var(--mono-xrv);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9aa2ae;
    padding-bottom: 8px;
}

.spec-table-xrv th {
    text-align: left;
    font-family: var(--mono-xrv);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--deep-xrv);
    background: var(--sub-xrv);
    padding: 9px 12px;
    border-bottom: 2px solid var(--deep-xrv);
}

.spec-table-xrv td {
    padding: 11px 12px;
    border-bottom: var(--line-xrv);
    color: var(--mute-xrv);
    vertical-align: top;
}

.spec-table-xrv tr:last-child td {
    border-bottom: none;
}

.spec-table-xrv td:first-child {
    color: var(--ink-xrv);
    width: 42%;
}

.spec-table-xrv .num-xrv {
    font-family: var(--mono-xrv);
    color: var(--accent-dark-xrv);
    white-space: nowrap;
}

.table-scroll-xrv {
    overflow-x: auto;
    margin: 16px 0 20px;
}

.table-scroll-xrv .spec-table-xrv {
    margin: 0;
    min-width: 480px;
}

/* ---------- примітка з лівою смарагдовою рамкою ---------- */

.note-box-xrv {
    border-left: 3px solid var(--accent-xrv);
    background: rgba(0, 196, 140, .05);
    padding: 14px 16px 14px 18px;
    margin: 18px 0 20px;
}

.note-tag-xrv {
    display: block;
    font-family: var(--mono-xrv);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent-dark-xrv);
    margin-bottom: 6px;
}

.note-box-xrv p {
    margin: 0;
    font-size: 14px;
    color: var(--deep-xrv);
}

/* ---------- пронумеровані пункти умов ---------- */

.clause-list-xrv {
    list-style: none;
    margin: 12px 0 18px;
    padding: 0;
    counter-reset: clause-xrv;
}

.clause-list-xrv > li {
    counter-increment: clause-xrv;
    position: relative;
    padding: 0 0 12px 46px;
    margin: 0 0 12px;
    border-bottom: 1px dotted var(--edge-xrv);
    color: var(--mute-xrv);
    font-size: 15px;
}

.clause-list-xrv > li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.clause-list-xrv > li::before {
    content: counter(clause-xrv, decimal-leading-zero) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--mono-xrv);
    font-size: 13px;
    color: var(--accent-dark-xrv);
}

.clause-list-xrv > li::marker {
    content: none;
}

/* ---------- вертикальна схема зі стрілками ---------- */

.flow-list-xrv {
    list-style: none;
    margin: 18px 0 22px;
    padding: 16px 18px;
    border: var(--line-xrv);
    background: #fbfcfd;
}

.flow-list-xrv li {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 10px;
    align-items: baseline;
    font-family: var(--mono-xrv);
    font-size: 13px;
    line-height: 1.7;
    color: var(--deep-xrv);
    padding: 7px 0;
    border-bottom: 1px dashed var(--edge-xrv);
}

.flow-list-xrv li:last-child {
    border-bottom: none;
}

.flow-list-xrv li::before {
    content: "\2192";
    color: var(--accent-xrv);
    font-size: 15px;
}

.flow-note-xrv {
    font-family: var(--mono-xrv);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9aa2ae;
    margin-bottom: 6px;
}

/* ---------- чек-лист із квадратними дужками ---------- */

.check-list-xrv {
    list-style: none;
    margin: 14px 0 20px;
    padding: 0;
}

.check-list-xrv li {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px dotted var(--edge-xrv);
    font-size: 15px;
    color: var(--mute-xrv);
}

.check-list-xrv li:last-child {
    border-bottom: none;
}

.mark-on-xrv,
.mark-off-xrv {
    font-family: var(--mono-xrv);
    font-size: 13px;
    line-height: 1.72;
    white-space: pre;
}

.mark-on-xrv {
    color: var(--accent-dark-xrv);
}

.mark-off-xrv {
    color: #a7aeb9;
}

/* ---------- покроковий алгоритм ---------- */

.step-list-xrv {
    list-style: none;
    counter-reset: step-xrv;
    margin: 18px 0 22px;
    padding: 0;
    border-top: 2px solid var(--deep-xrv);
}

.step-list-xrv > li {
    counter-increment: step-xrv;
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 16px;
    padding: 14px 0 13px;
    border-bottom: var(--line-xrv);
}

.step-list-xrv > li::before {
    content: "0" counter(step-xrv);
    font-family: var(--mono-xrv);
    font-size: 18px;
    line-height: 1.3;
    color: var(--accent-xrv);
}

.step-title-xrv {
    display: block;
    font-weight: 700;
    color: var(--ink-xrv);
    font-size: 15px;
    margin-bottom: 3px;
}

.step-text-xrv {
    display: block;
    font-size: 14px;
    color: var(--mute-xrv);
    line-height: 1.7;
}

/* ---------- двоколонковий службовий список ---------- */

.pair-grid-xrv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    background: var(--edge-xrv);
    border: var(--line-xrv);
    margin: 18px 0 20px;
}

.pair-cell-xrv {
    background: var(--panel-xrv);
    padding: 14px 16px 15px;
}

.pair-key-xrv {
    display: block;
    font-family: var(--mono-xrv);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent-dark-xrv);
    margin-bottom: 5px;
}

.pair-val-xrv {
    display: block;
    font-size: 14px;
    line-height: 1.66;
    color: var(--mute-xrv);
}

/* ---------- зведена панель угорі сторінки повернень ---------- */

.summary-xrv {
    border: 2px solid var(--deep-xrv);
    background: var(--panel-xrv);
    margin: 0 0 24px;
}

.summary-head-xrv {
    background: var(--deep-xrv);
    color: #ffffff;
    font-family: var(--mono-xrv);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 9px 14px 8px;
}

.summary-xrv .spec-table-xrv {
    margin: 0;
}

.summary-xrv .spec-table-xrv th {
    background: var(--sub-xrv);
    border-bottom: 1px solid #c9d0d7;
}

/* ---------- дрібні службові елементи ---------- */

.tag-xrv {
    display: inline-block;
    font-family: var(--mono-xrv);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--deep-xrv);
    border: 1px solid var(--edge-xrv);
    background: var(--sub-xrv);
    padding: 4px 8px 3px;
    margin: 0 4px 4px 0;
}

.tag-live-xrv {
    color: var(--accent-dark-xrv);
    border-color: var(--accent-xrv);
    background: rgba(0, 196, 140, .07);
}

.rule-xrv {
    height: 1px;
    background: var(--edge-xrv);
    border: none;
    margin: 22px 0;
}

.mono-xrv {
    font-family: var(--mono-xrv);
    font-size: .92em;
    color: var(--deep-xrv);
}

.doc-end-xrv {
    font-family: var(--mono-xrv);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #9aa2ae;
    text-align: right;
    padding: 18px 0 4px;
    border-top: 2px solid var(--deep-xrv);
}

@media (max-width: 760px) {
    .step-list-xrv > li,
    .check-list-xrv li {
        grid-template-columns: 34px 1fr;
        column-gap: 10px;
    }

    .term-line-xrv {
        white-space: normal;
    }
}