/* ================================================================
   Article Series — bkbg-aser-*
   ================================================================ */

.bkbg-aser-block {
    border: 1px solid;
    padding: 24px;
    box-sizing: border-box;
}

/* ── Header ───────────────────────────────────────────────────── */
.bkbg-aser-header {
    margin-bottom: 18px;
}

.bkbg-aser-series-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.bkbg-aser-title {
    font-family: var(--bkbg-aser-title-font-family, inherit);
    font-size: var(--bkbg-aser-title-font-size-d, var(--bkbg-aser-title-font-size, var(--bkbg-aser-title-sz, 20px)));
    font-weight: var(--bkbg-aser-title-font-weight, 800);
    font-style: var(--bkbg-aser-title-font-style, normal);
    text-transform: var(--bkbg-aser-title-text-transform, none);
    text-decoration: var(--bkbg-aser-title-text-decoration, none);
    line-height: var(--bkbg-aser-title-line-height-d, var(--bkbg-aser-title-line-height, 1.3));
    letter-spacing: var(--bkbg-aser-title-letter-spacing-d, var(--bkbg-aser-title-letter-spacing, normal));
    word-spacing: var(--bkbg-aser-title-word-spacing-d, var(--bkbg-aser-title-word-spacing, normal));
    margin: 0 0 6px;
}

.bkbg-aser-desc {
    font-family: var(--bkbg-aser-desc-font-family, inherit);
    font-size: var(--bkbg-aser-desc-font-size-d, var(--bkbg-aser-desc-font-size, var(--bkbg-aser-desc-sz, 14px)));
    font-weight: var(--bkbg-aser-desc-font-weight, 400);
    font-style: var(--bkbg-aser-desc-font-style, normal);
    text-transform: var(--bkbg-aser-desc-text-transform, none);
    text-decoration: var(--bkbg-aser-desc-text-decoration, none);
    line-height: var(--bkbg-aser-desc-line-height-d, var(--bkbg-aser-desc-line-height, 1.55));
    letter-spacing: var(--bkbg-aser-desc-letter-spacing-d, var(--bkbg-aser-desc-letter-spacing, normal));
    word-spacing: var(--bkbg-aser-desc-word-spacing-d, var(--bkbg-aser-desc-word-spacing, normal));
    margin: 0;
}

/* ── Progress ─────────────────────────────────────────────────── */
.bkbg-aser-progress-wrap {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bkbg-aser-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
}

.bkbg-aser-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .3s ease;
}

.bkbg-aser-progress-label {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── List ────────────────────────────────────────────────────── */
.bkbg-aser-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bkbg-aser-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .bkbg-aser-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* \u2500\u2500 Typography responsive \u2500\u2500 */
@media (max-width: 1024px) {
    .bkbg-aser-title {
        font-size: var(--bkbg-aser-title-font-size-t, var(--bkbg-aser-title-font-size-d, var(--bkbg-aser-title-font-size, var(--bkbg-aser-title-sz, 20px))));
        line-height: var(--bkbg-aser-title-line-height-t, var(--bkbg-aser-title-line-height-d, var(--bkbg-aser-title-line-height, 1.3)));
        letter-spacing: var(--bkbg-aser-title-letter-spacing-t, var(--bkbg-aser-title-letter-spacing-d, var(--bkbg-aser-title-letter-spacing, normal)));
        word-spacing: var(--bkbg-aser-title-word-spacing-t, var(--bkbg-aser-title-word-spacing-d, var(--bkbg-aser-title-word-spacing, normal)));
    }
    .bkbg-aser-desc {
        font-size: var(--bkbg-aser-desc-font-size-t, var(--bkbg-aser-desc-font-size-d, var(--bkbg-aser-desc-font-size, var(--bkbg-aser-desc-sz, 14px))));
        line-height: var(--bkbg-aser-desc-line-height-t, var(--bkbg-aser-desc-line-height-d, var(--bkbg-aser-desc-line-height, 1.55)));
        letter-spacing: var(--bkbg-aser-desc-letter-spacing-t, var(--bkbg-aser-desc-letter-spacing-d, var(--bkbg-aser-desc-letter-spacing, normal)));
        word-spacing: var(--bkbg-aser-desc-word-spacing-t, var(--bkbg-aser-desc-word-spacing-d, var(--bkbg-aser-desc-word-spacing, normal)));
    }
    .bkbg-aser-part-title {
        font-size: var(--bkbg-aser-pt-font-size-t, var(--bkbg-aser-pt-font-size-d, var(--bkbg-aser-pt-font-size, var(--bkbg-aser-pt-sz, 14px))));
        line-height: var(--bkbg-aser-pt-line-height-t, var(--bkbg-aser-pt-line-height-d, var(--bkbg-aser-pt-line-height, 1.4)));
        letter-spacing: var(--bkbg-aser-pt-letter-spacing-t, var(--bkbg-aser-pt-letter-spacing-d, var(--bkbg-aser-pt-letter-spacing, normal)));
        word-spacing: var(--bkbg-aser-pt-word-spacing-t, var(--bkbg-aser-pt-word-spacing-d, var(--bkbg-aser-pt-word-spacing, normal)));
    }
    .bkbg-aser-excerpt {
        font-size: var(--bkbg-aser-exc-font-size-t, var(--bkbg-aser-exc-font-size-d, var(--bkbg-aser-exc-font-size, var(--bkbg-aser-exc-sz, 12px))));
        line-height: var(--bkbg-aser-exc-line-height-t, var(--bkbg-aser-exc-line-height-d, var(--bkbg-aser-exc-line-height, 1.45)));
        letter-spacing: var(--bkbg-aser-exc-letter-spacing-t, var(--bkbg-aser-exc-letter-spacing-d, var(--bkbg-aser-exc-letter-spacing, normal)));
        word-spacing: var(--bkbg-aser-exc-word-spacing-t, var(--bkbg-aser-exc-word-spacing-d, var(--bkbg-aser-exc-word-spacing, normal)));
    }
}

@media (max-width: 767px) {
    .bkbg-aser-title {
        font-size: var(--bkbg-aser-title-font-size-m, var(--bkbg-aser-title-font-size-t, var(--bkbg-aser-title-font-size-d, var(--bkbg-aser-title-font-size, var(--bkbg-aser-title-sz, 20px)))));
        line-height: var(--bkbg-aser-title-line-height-m, var(--bkbg-aser-title-line-height-t, var(--bkbg-aser-title-line-height-d, var(--bkbg-aser-title-line-height, 1.3))));
        letter-spacing: var(--bkbg-aser-title-letter-spacing-m, var(--bkbg-aser-title-letter-spacing-t, var(--bkbg-aser-title-letter-spacing-d, var(--bkbg-aser-title-letter-spacing, normal))));
        word-spacing: var(--bkbg-aser-title-word-spacing-m, var(--bkbg-aser-title-word-spacing-t, var(--bkbg-aser-title-word-spacing-d, var(--bkbg-aser-title-word-spacing, normal))));
    }
    .bkbg-aser-desc {
        font-size: var(--bkbg-aser-desc-font-size-m, var(--bkbg-aser-desc-font-size-t, var(--bkbg-aser-desc-font-size-d, var(--bkbg-aser-desc-font-size, var(--bkbg-aser-desc-sz, 14px)))));
        line-height: var(--bkbg-aser-desc-line-height-m, var(--bkbg-aser-desc-line-height-t, var(--bkbg-aser-desc-line-height-d, var(--bkbg-aser-desc-line-height, 1.55))));
        letter-spacing: var(--bkbg-aser-desc-letter-spacing-m, var(--bkbg-aser-desc-letter-spacing-t, var(--bkbg-aser-desc-letter-spacing-d, var(--bkbg-aser-desc-letter-spacing, normal))));
        word-spacing: var(--bkbg-aser-desc-word-spacing-m, var(--bkbg-aser-desc-word-spacing-t, var(--bkbg-aser-desc-word-spacing-d, var(--bkbg-aser-desc-word-spacing, normal))));
    }
    .bkbg-aser-part-title {
        font-size: var(--bkbg-aser-pt-font-size-m, var(--bkbg-aser-pt-font-size-t, var(--bkbg-aser-pt-font-size-d, var(--bkbg-aser-pt-font-size, var(--bkbg-aser-pt-sz, 14px)))));
        line-height: var(--bkbg-aser-pt-line-height-m, var(--bkbg-aser-pt-line-height-t, var(--bkbg-aser-pt-line-height-d, var(--bkbg-aser-pt-line-height, 1.4))));
        letter-spacing: var(--bkbg-aser-pt-letter-spacing-m, var(--bkbg-aser-pt-letter-spacing-t, var(--bkbg-aser-pt-letter-spacing-d, var(--bkbg-aser-pt-letter-spacing, normal))));
        word-spacing: var(--bkbg-aser-pt-word-spacing-m, var(--bkbg-aser-pt-word-spacing-t, var(--bkbg-aser-pt-word-spacing-d, var(--bkbg-aser-pt-word-spacing, normal))));
    }
    .bkbg-aser-excerpt {
        font-size: var(--bkbg-aser-exc-font-size-m, var(--bkbg-aser-exc-font-size-t, var(--bkbg-aser-exc-font-size-d, var(--bkbg-aser-exc-font-size, var(--bkbg-aser-exc-sz, 12px)))));
        line-height: var(--bkbg-aser-exc-line-height-m, var(--bkbg-aser-exc-line-height-t, var(--bkbg-aser-exc-line-height-d, var(--bkbg-aser-exc-line-height, 1.45))));
        letter-spacing: var(--bkbg-aser-exc-letter-spacing-m, var(--bkbg-aser-exc-letter-spacing-t, var(--bkbg-aser-exc-letter-spacing-d, var(--bkbg-aser-exc-letter-spacing, normal))));
        word-spacing: var(--bkbg-aser-exc-word-spacing-m, var(--bkbg-aser-exc-word-spacing-t, var(--bkbg-aser-exc-word-spacing-d, var(--bkbg-aser-exc-word-spacing, normal))));
    }
}

.bkbg-aser-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid;
    padding: 10px 14px;
    text-decoration: none;
    position: relative;
    transition: filter .15s, transform .1s;
}

.bkbg-aser-item:not(.is-current):hover {
    filter: brightness(.97);
    transform: translateX(2px);
}

.bkbg-aser-item.is-current {
    border-left-width: 3px;
    padding-left: 12px;
}

/* Compact style overrides */
.bkbg-aser-layout-compact .bkbg-aser-item {
    padding: 6px 10px;
}

/* ── Number badge ─────────────────────────────────────────────── */
.bkbg-aser-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

/* ── Item body ────────────────────────────────────────────────── */
.bkbg-aser-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bkbg-aser-part-title {
    font-family: var(--bkbg-aser-pt-font-family, inherit);
    font-size: var(--bkbg-aser-pt-font-size-d, var(--bkbg-aser-pt-font-size, var(--bkbg-aser-pt-sz, 14px)));
    font-weight: var(--bkbg-aser-pt-font-weight, 600);
    font-style: var(--bkbg-aser-pt-font-style, normal);
    text-transform: var(--bkbg-aser-pt-text-transform, none);
    text-decoration: var(--bkbg-aser-pt-text-decoration, none);
    line-height: var(--bkbg-aser-pt-line-height-d, var(--bkbg-aser-pt-line-height, 1.4));
    letter-spacing: var(--bkbg-aser-pt-letter-spacing-d, var(--bkbg-aser-pt-letter-spacing, normal));
    word-spacing: var(--bkbg-aser-pt-word-spacing-d, var(--bkbg-aser-pt-word-spacing, normal));
}

.bkbg-aser-excerpt {
    font-family: var(--bkbg-aser-exc-font-family, inherit);
    font-size: var(--bkbg-aser-exc-font-size-d, var(--bkbg-aser-exc-font-size, var(--bkbg-aser-exc-sz, 12px)));
    font-weight: var(--bkbg-aser-exc-font-weight, 400);
    font-style: var(--bkbg-aser-exc-font-style, normal);
    text-transform: var(--bkbg-aser-exc-text-transform, none);
    text-decoration: var(--bkbg-aser-exc-text-decoration, none);
    line-height: var(--bkbg-aser-exc-line-height-d, var(--bkbg-aser-exc-line-height, 1.45));
    letter-spacing: var(--bkbg-aser-exc-letter-spacing-d, var(--bkbg-aser-exc-letter-spacing, normal));
    word-spacing: var(--bkbg-aser-exc-word-spacing-d, var(--bkbg-aser-exc-word-spacing, normal));
}

.bkbg-aser-layout-compact .bkbg-aser-excerpt {
    display: none;
}

/* ── Current badge ────────────────────────────────────────────── */
.bkbg-aser-current-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    padding: 2px 7px;
    border-radius: 20px;
    align-self: flex-start;
    margin-top: 2px;
}

/* ── Editor accordion ────────────────────────────────────────── */
.bkbg-aser-part-ed {
    margin-bottom: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.bkbg-aser-part-ed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    background: #f8fafc;
    border-left: 3px solid;
    font-size: 12px;
    gap: 8px;
    user-select: none;
}

.bkbg-aser-part-ed-header:hover { background: #f1f5f9; }

.bkbg-aser-part-ed-fields {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
}

/* Editor: inline editing helpers */
.bkbg-aser-block [contenteditable]:hover {
    outline: 2px dashed rgba(59,130,246,.4);
    outline-offset: 2px;
}