/*
 * BrightFrame Documents - front end.
 *
 * Built to survive inside Divi 4/5 and block themes: lists are divs with
 * roles (Divi styles every ul/li inside #left-area with an id selector), our
 * resets are wrapped in :where() so they never outrank component rules, and
 * [hidden] is forced because any author `display` beats the UA rule.
 * Theme it with the custom properties on .bf-docs.
 */

.bf-docs,
.bf-docs-modal,
.bf-docs-lightbox {
    --bf-docs-accent: var(--gcid-primary-color, #1d4ed8);
    --bf-docs-text: #1f2933;
    --bf-docs-muted: #66717f;
    --bf-docs-border: #e2e6eb;
    --bf-docs-surface: #fff;
    --bf-docs-cover-bg: #f2f4f7;
    --bf-docs-radius: 10px;
    --bf-docs-gap: 24px;
    --bf-docs-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --bf-docs-shadow-hover: 0 8px 24px rgba(16, 24, 40, .12);
}

.bf-docs {
    container-type: inline-size;
    color: var(--bf-docs-text);
    margin: 0 0 2em;
    max-width: 100%;
}
.bf-docs [hidden],
.bf-docs-modal[hidden],
.bf-docs-lightbox[hidden],
.bf-docs-modal [hidden],
.bf-docs-lightbox [hidden] {
    display: none !important;
}
:where(.bf-docs, .bf-docs-modal, .bf-docs-lightbox) :where(h2, h3, p, dl, dd, fieldset, legend) {
    margin: 0;
    padding: 0;
}
:where(.bf-docs, .bf-docs-modal, .bf-docs-lightbox) :where(*, *::before, *::after) {
    box-sizing: border-box;
}
.bf-docs-sr,
.bf-docs .bf-docs-hp,
.bf-docs-modal .bf-docs-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.bf-docs-heading {
    font-size: 1.4em;
    margin-bottom: .75em !important;
}
.bf-docs.is-loading .bf-docs-results {
    opacity: .5;
    transition: opacity .15s;
}

/* ---- Filters ---------------------------------------------------------- */
.bf-docs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.bf-docs-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 440px;
}
.bf-docs-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bf-docs-muted);
    pointer-events: none;
}
.bf-docs .bf-docs-search input[type=search] {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--bf-docs-border);
    border-radius: 999px;
    background: var(--bf-docs-surface);
    font: inherit;
    font-size: 15px;
    color: var(--bf-docs-text);
    line-height: 1.3;
    margin: 0;
    box-shadow: none;
}
.bf-docs .bf-docs-search input[type=search]:focus {
    outline: 2px solid var(--bf-docs-accent);
    outline-offset: 1px;
    border-color: transparent;
}
.bf-docs-facet {
    border: 0;
    min-width: 0;
}
.bf-docs-facet legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bf-docs-muted);
    margin-bottom: 6px;
}
.bf-docs-pills {
    display: flex;
    flex-wrap: wrap;
    /* rows, then columns: the module's "Gap Between Filter Buttons" / "… Rows Of Filter Buttons" (filter_gap / filter_row_gap) */
    gap: var(--bf-docs-filter-row-gap, var(--bf-docs-filter-gap, 6px)) var(--bf-docs-filter-gap, 6px);
}
.bf-docs-pill {
    position: relative;
    cursor: pointer;
    margin: 0;
}
.bf-docs-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.bf-docs-pill span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--bf-docs-border);
    border-radius: 999px;
    background: var(--bf-docs-surface);
    font-size: 14px;
    line-height: 1.2;
    color: var(--bf-docs-text);
    transition: background .12s, border-color .12s, color .12s;
}
.bf-docs-pill small {
    font-size: 12px;
    color: var(--bf-docs-muted);
}
.bf-docs-pill:hover span {
    border-color: var(--bf-docs-accent);
}
.bf-docs-pill input:checked + span {
    background: var(--bf-docs-accent);
    border-color: var(--bf-docs-accent);
    color: #fff;
}
.bf-docs-pill input:checked + span small {
    color: rgba(255, 255, 255, .8);
}
.bf-docs-pill input:focus-visible + span {
    outline: 2px solid var(--bf-docs-accent);
    outline-offset: 2px;
}
.bf-docs .bf-docs-select select {
    padding: 9px 12px;
    border: 1px solid var(--bf-docs-border);
    border-radius: 8px;
    font: inherit;
    font-size: 15px;
    background: var(--bf-docs-surface);
    color: var(--bf-docs-text);
}
.bf-docs-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
}
.bf-docs-filters.is-live .bf-docs-apply {
    display: none;
}
.bf-docs .bf-docs-reset {
    font-size: 14px;
    color: var(--bf-docs-accent);
    text-decoration: underline;
}
/* Announced to screen readers when results change; not shown on the page. */
.bf-docs-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Buttons ---------------------------------------------------------- */
.bf-docs .bf-docs-button,
.bf-docs-modal .bf-docs-button,
.bf-docs-lightbox .bf-docs-gate .bf-docs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--bf-docs-accent);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.bf-docs .bf-docs-button:hover,
.bf-docs-modal .bf-docs-button:hover {
    filter: brightness(1.08);
    color: #fff;
}
.bf-docs .bf-docs-button:disabled,
.bf-docs-modal .bf-docs-button:disabled {
    opacity: .6;
    cursor: wait;
}

/* ---- Grid ------------------------------------------------------------- */
.bf-docs .bf-docs-grid {
    display: grid;
    grid-template-columns: repeat(var(--bf-docs-cols, 3), minmax(0, 1fr));
    gap: var(--bf-docs-row-gap, var(--bf-docs-gap)) var(--bf-docs-gap);   /* rows, then columns (both are settings) */
}
@container (max-width: 820px) {
    .bf-docs .bf-docs-grid { grid-template-columns: repeat(min(var(--bf-docs-cols, 3), 3), minmax(0, 1fr)); }
}
@container (max-width: 640px) {
    .bf-docs .bf-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(var(--bf-docs-row-gap, var(--bf-docs-gap)), 16px) min(var(--bf-docs-gap), 16px); }
}
/* A phone (the library up to 480px wide): one column, like the list — two cards side by side were too small to
   use (EmberGlo, 2026-10-08). Tablets (481–640) keep two; "Columns On Phones" still forces a number. */
@container (max-width: 480px) {
    .bf-docs .bf-docs-grid { grid-template-columns: minmax(0, 1fr); }
}

.bf-docs .bf-docs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bf-docs-surface);
    border: 1px solid var(--bf-docs-border);
    border-radius: var(--bf-docs-radius);
    box-shadow: var(--bf-docs-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
    min-width: 0;
}
.bf-docs .bf-docs-grid .bf-docs-card:hover {
    box-shadow: var(--bf-docs-shadow-hover);
    transform: translateY(-2px);
}
.bf-docs .bf-docs-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--bf-docs-aspect, 8.5 / 11);
    padding: 14px;
    background: var(--bf-docs-cover-bg);
    border-radius: var(--bf-docs-radius) var(--bf-docs-radius) 0 0;
    overflow: hidden;
    text-decoration: none;
}
.bf-docs .bf-docs-cover img.bf-docs-cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
    filter: drop-shadow(0 2px 6px rgba(16, 24, 40, .16));
    margin: 0;
    max-width: none;
}
.bf-docs .bf-docs-kind-video .bf-docs-cover {
    padding: 0;
}
.bf-docs .bf-docs-kind-video .bf-docs-cover img.bf-docs-cover-img {
    object-fit: cover;
    filter: none;
    border-radius: 0;
}
/* The type icon only: the hover icon, the play triangle and the padlock inside such a cover keep their own sizes. */
.bf-docs .bf-docs-cover.is-icon > .bf-docs-icon {
    width: 38%;
    max-width: 96px;
    height: auto;
}
.bf-docs .bf-docs-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bf-docs-type, #5b6b7f);
    color: var(--bf-docs-type-ink, #fff);   /* black or white, whichever reads on the type's colour */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: calc(100% - 56px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bf-docs .bf-docs-badge-inline {
    position: static;
    display: inline-block;
    max-width: none;
    margin-bottom: 6px;
    align-self: flex-start;
}
/* The padlock of a locked document sits in front of its title (see "Access gate" below). Only where the title
   is not shown — the cover is the link then — is it a badge in the cover's corner. (This was once the rule
   for every padlock: in a table it landed on the Download button.) */
.bf-docs .bf-docs-cover .bf-docs-lock {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .82);
    color: #fff;
}
.bf-docs .bf-docs-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(17, 24, 39, .72);
    color: #fff;
    transition: transform .15s, background .15s;
}
.bf-docs .bf-docs-card:hover .bf-docs-play {
    transform: scale(1.08);
    background: var(--bf-docs-accent);
}
.bf-docs .bf-docs-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.bf-docs .bf-docs-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 16px 16px;
    min-width: 0;
}
.bf-docs .bf-docs-card .bf-docs-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    padding: 0;
    color: var(--bf-docs-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bf-docs .bf-docs-card .bf-docs-title a {
    color: inherit;
    text-decoration: none;
}
.bf-docs .bf-docs-card .bf-docs-title a:hover {
    color: var(--bf-docs-accent);
}
.bf-docs .bf-docs-card .bf-docs-title a:focus-visible {
    outline: 2px solid var(--bf-docs-accent);
    outline-offset: 2px;
}
.bf-docs .bf-docs-meta {
    font-size: 13px;
    color: var(--bf-docs-muted);
    line-height: 1.4;
    margin: 0;
}
.bf-docs .bf-docs-desc {
    font-size: 14px;
    color: var(--bf-docs-muted);
    line-height: 1.45;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bf-docs .bf-docs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.bf-docs .bf-docs-action {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--bf-docs-border);
    border-radius: 6px;
    background: var(--bf-docs-surface);
    color: var(--bf-docs-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}
.bf-docs .bf-docs-action:hover {
    border-color: var(--bf-docs-accent);
    color: var(--bf-docs-accent);
}
.bf-docs .bf-docs-action-primary {
    background: var(--bf-docs-accent);
    border-color: var(--bf-docs-accent);
    color: #fff;
}
.bf-docs .bf-docs-action-primary:hover {
    color: #fff;
    filter: brightness(1.08);
}
.bf-docs .is-gated .bf-docs-action-primary::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 6px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a4.5 4.5 0 0 1 4.5 4.5v2h.5A1.5 1.5 0 0 1 16.5 9.5v8A1.5 1.5 0 0 1 15 19H5a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 5 8h.5V6A4.5 4.5 0 0 1 10 1.5zm0 1.5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a4.5 4.5 0 0 1 4.5 4.5v2h.5A1.5 1.5 0 0 1 16.5 9.5v8A1.5 1.5 0 0 1 15 19H5a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 5 8h.5V6A4.5 4.5 0 0 1 10 1.5zm0 1.5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bf-docs .bf-docs-lock-inline {
    font-size: 12px;
    margin-left: 4px;
}

/* ---- List ------------------------------------------------------------- */
.bf-docs .bf-docs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bf-docs .bf-docs-list .bf-docs-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 10px;
}
.bf-docs .bf-docs-list .bf-docs-cover {
    flex: 0 0 64px;
    width: 64px;
    padding: 6px;
    border-radius: 6px;
}
.bf-docs .bf-docs-list .bf-docs-kind-video .bf-docs-cover {
    flex-basis: 110px;
    width: 110px;
    padding: 0;
}
.bf-docs .bf-docs-list .bf-docs-badge,
.bf-docs .bf-docs-list .bf-docs-duration {
    display: none;
}
.bf-docs .bf-docs-list .bf-docs-cover .bf-docs-lock {
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
}
.bf-docs .bf-docs-list .bf-docs-play {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
}
.bf-docs .bf-docs-list .bf-docs-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    gap: 2px 16px;
}
.bf-docs .bf-docs-list .bf-docs-body > .bf-docs-title,
.bf-docs .bf-docs-list .bf-docs-body > .bf-docs-meta,
.bf-docs .bf-docs-list .bf-docs-body > .bf-docs-desc {
    flex: 1 1 100%;
}
.bf-docs .bf-docs-list .bf-docs-title {
    -webkit-line-clamp: 2;
    margin: 0;
}
.bf-docs .bf-docs-list .bf-docs-actions {
    padding-top: 6px;
    margin-top: 0;
}
@container (min-width: 700px) {
    .bf-docs .bf-docs-list .bf-docs-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "title actions" "meta actions" "desc actions";
    }
    .bf-docs .bf-docs-list .bf-docs-title { grid-area: title; }
    .bf-docs .bf-docs-list .bf-docs-meta { grid-area: meta; }
    .bf-docs .bf-docs-list .bf-docs-desc { grid-area: desc; }
    .bf-docs .bf-docs-list .bf-docs-badge-inline { display: none; }
    .bf-docs .bf-docs-list .bf-docs-actions { grid-area: actions; padding: 0; flex-wrap: nowrap; }
}

/* ---- Table ------------------------------------------------------------ */
.bf-docs .bf-docs-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bf-docs-border);
    border-radius: var(--bf-docs-radius);
    background: var(--bf-docs-surface);
}
.bf-docs table.bf-docs-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
    font-size: 14px;
}
.bf-docs table.bf-docs-table th,
.bf-docs table.bf-docs-table td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--bf-docs-border);
    text-align: left;
    vertical-align: middle;
    background: transparent;
}
.bf-docs table.bf-docs-table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bf-docs-muted);
    background: var(--bf-docs-cover-bg);
    white-space: nowrap;
}
.bf-docs table.bf-docs-table tbody tr:last-child td {
    border-bottom: 0;
}
.bf-docs table.bf-docs-table tbody tr:hover td {
    background: #f8fafc;
}
.bf-docs .bf-docs-table .bf-docs-card {
    display: table-row;
    border: 0;
    box-shadow: none;
    background: none;
}
.bf-docs .bf-docs-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}
.bf-docs th[aria-sort=ascending] .bf-docs-sort-ind::after { content: " \2191"; }
.bf-docs th[aria-sort=descending] .bf-docs-sort-ind::after { content: " \2193"; }
.bf-docs .bf-docs-row-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-docs .bf-docs-thumb {
    flex: 0 0 36px;
    width: 36px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--bf-docs-cover-bg);
    border-radius: 4px;
    overflow: hidden;
}
.bf-docs .bf-docs-kind-video .bf-docs-thumb {
    flex-basis: 64px;
    width: 64px;
    height: 36px;
}
.bf-docs .bf-docs-thumb img,
.bf-docs .bf-docs-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
}
.bf-docs .bf-docs-kind-video .bf-docs-thumb img {
    object-fit: cover;
}
.bf-docs .bf-docs-table a.bf-docs-title {
    font-weight: 600;
    color: var(--bf-docs-text);
    text-decoration: none;
}
.bf-docs .bf-docs-table a.bf-docs-title:hover {
    color: var(--bf-docs-accent);
}
.bf-docs .bf-docs-table .bf-docs-desc {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
}
.bf-docs .bf-docs-table .bf-docs-version {
    margin-left: 6px;
    color: var(--bf-docs-muted);
}
.bf-docs .bf-docs-table .bf-docs-actions {
    padding: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
}
.bf-docs .bf-docs-col-type,
.bf-docs .bf-docs-col-size,
.bf-docs .bf-docs-col-date {
    white-space: nowrap;
    color: var(--bf-docs-muted);
}

/* ---- Accordion + tabs ------------------------------------------------- */
.bf-docs .bf-docs-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bf-docs details.bf-docs-group {
    border: 1px solid var(--bf-docs-border);
    border-radius: var(--bf-docs-radius);
    background: var(--bf-docs-surface);
}
.bf-docs details.bf-docs-group > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
}
.bf-docs details.bf-docs-group > summary::-webkit-details-marker {
    display: none;
}
.bf-docs details.bf-docs-group > summary::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .15s;
}
.bf-docs details.bf-docs-group[open] > summary::after {
    transform: rotate(-135deg);
}
.bf-docs details.bf-docs-group > .bf-docs-items {
    padding: 0 12px 12px;
}
.bf-docs .bf-docs-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bf-docs-cover-bg);
    color: var(--bf-docs-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.bf-docs .bf-docs-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bf-docs-filter-row-gap, var(--bf-docs-filter-gap, 4px)) var(--bf-docs-filter-gap, 4px);   /* the same two settings as the filter pills */
    border-bottom: 1px solid var(--bf-docs-border);
    margin-bottom: 20px;
}
.bf-docs .bf-docs-tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--bf-docs-muted);
    cursor: pointer;
}
.bf-docs .bf-docs-tab[aria-selected=true] {
    color: var(--bf-docs-text);
    border-bottom-color: var(--bf-docs-accent);
}
.bf-docs .bf-docs-tab:focus-visible {
    outline: 2px solid var(--bf-docs-accent);
    outline-offset: -2px;
}
/* Narrow (phones): two tabs per row instead of one long row or a stack. */
@container (max-width: 600px) {
    .bf-docs .bf-docs-tablist {
        gap: var(--bf-docs-filter-row-gap, var(--bf-docs-filter-gap, 8px)) var(--bf-docs-filter-gap, 8px);
    }
    .bf-docs .bf-docs-tab {
        flex: 1 1 calc(50% - var(--bf-docs-filter-gap, 8px));
        min-width: 0;
        text-align: center;
    }
}

/* ---- Pager ------------------------------------------------------------ */
.bf-docs-pager {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.bf-docs .bf-docs-more.is-loading {
    opacity: .6;
    pointer-events: none;
}
/* A live refresh that failed says so here, above the pager (the status line is for screen readers only). */
.bf-docs .bf-docs-error {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecea;
    color: #8a1c12;
    font-size: 14px;
    text-align: center;
}
/* A library without paging that holds more than one page load draws: "Showing the first 1000 of …". */
.bf-docs .bf-docs-cut {
    margin: 0;
    color: var(--bf-docs-muted);
    font-size: 14px;
}
.bf-docs .bf-docs-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Page numbers are readable on ANY section, dark ones too (Joe #46 / #49): each number is a light box with
   dark text — never dark text on a see-through background. The current page keeps the light box and takes
   the accent as its frame (white text on the accent is unreadable when the accent is a light colour). */
.bf-docs .bf-docs-page {
    display: grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bf-docs-border);
    border-radius: 8px;
    background: var(--bf-docs-surface);
    color: var(--bf-docs-text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}
.bf-docs a.bf-docs-page:hover {
    border-color: var(--bf-docs-accent);
}
/* The mark is a BORDER (not an inset shadow): a border set under Design → Current Page replaces it whole. */
.bf-docs .bf-docs-page.is-current {
    border-color: var(--bf-docs-accent);
    border-width: 2px;
    font-weight: 700;
}
.bf-docs .bf-docs-gap {
    align-self: center;
    padding: 0 4px;
    color: var(--bf-docs-muted);
}
/* "Joined" page numbers: boxes that touch, like a segmented control. */
.bf-docs.bf-docs-pager-joined .bf-docs-pages { gap: 0; }
.bf-docs.bf-docs-pager-joined .bf-docs-page { border-radius: 0; margin-left: -1px; }
.bf-docs.bf-docs-pager-joined .bf-docs-page:first-child { margin-left: 0; }
.bf-docs.bf-docs-pager-joined .bf-docs-page.is-current { position: relative; z-index: 1; }
.bf-docs.bf-docs-pager-joined .bf-docs-gap {
    display: grid;
    place-items: center;
    min-width: 36px;
    min-height: 36px;
    margin-left: -1px;
    border: 1px solid var(--bf-docs-border);
    background: var(--bf-docs-surface);
}
.bf-docs .bf-docs-empty {
    padding: 28px;
    border: 1px dashed var(--bf-docs-border);
    border-radius: var(--bf-docs-radius);
    text-align: center;
    color: var(--bf-docs-muted);
}
.bf-docs-admin-note {
    padding: 12px 16px;
    border-left: 4px solid #d97706;
    background: #fffbeb;
    color: #78350f;
    font-size: 14px;
    margin: 1em 0;
}

/* ---- Single ----------------------------------------------------------- */
.bf-docs-single {
    margin-bottom: 2em;
}
.bf-docs .bf-docs-single-grid {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@container (max-width: 560px) {
    .bf-docs .bf-docs-single-grid { grid-template-columns: 1fr; }
}
.bf-docs .bf-docs-single-facts dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin-bottom: 18px;
    font-size: 15px;
}
.bf-docs .bf-docs-single-facts dt {
    font-weight: 600;
    color: var(--bf-docs-muted);
}
/* The detail page's wrapper carries both classes (.bf-docs.bf-docs-single): written as a descendant these two never matched. */
.bf-docs.bf-docs-single .bf-docs-cover {
    border-radius: var(--bf-docs-radius);
}
.bf-docs.bf-docs-single .bf-docs-actions {
    padding: 0;
    align-items: center;
}

/* ---- Modal + lightbox ------------------------------------------------- */
html.bf-docs-modal-open {
    overflow: hidden;
}
.bf-docs-modal,
.bf-docs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--bf-docs-text);
    font-size: 16px;
    line-height: 1.5;
}
.bf-docs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .62);
}
.bf-docs-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 28px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.bf-docs-modal .bf-docs-modal-x {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--bf-docs-muted);
    cursor: pointer;
}
.bf-docs-modal .bf-docs-gate-doc {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bf-docs-muted);
    margin: 0 30px 6px 0;
}
.bf-docs-modal .bf-docs-gate-heading {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 6px;
    padding: 0;
    color: var(--bf-docs-text);
}
.bf-docs-modal .bf-docs-gate-body {
    color: var(--bf-docs-muted);
    margin: 0 0 16px;
}
.bf-docs-modal .bf-docs-gate-field {
    display: block;
    margin-bottom: 12px;
}
.bf-docs-modal .bf-docs-gate-field span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.bf-docs-modal .bf-docs-gate-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    background: #fff;
    color: var(--bf-docs-text);
}
.bf-docs-modal .bf-docs-gate-field input:focus {
    outline: 2px solid var(--bf-docs-accent);
    outline-offset: 1px;
}
.bf-docs-modal .bf-docs-gate-submit {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
}
.bf-docs-modal .bf-docs-gate-error {
    padding: 8px 12px;
    border-radius: 8px;
    background: #fdecec;
    color: #9b1c1c;
    font-size: 14px;
    margin: 0 0 8px;
}
.bf-docs-modal .bf-docs-gate-privacy {
    font-size: 13px;
    color: var(--bf-docs-muted);
    margin: 12px 0 0;
}
.bf-docs-lightbox-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);       /* the part of the screen that shows (a phone's address bar), where the unit is known */
    /* Never taller than the screen, also where the height follows the content (a video, the sign-in form):
       the bar with Close stays in view and the rest scrolls. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 12px;
    overflow: hidden;
    background: #525659;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .4);
}
.bf-docs-lightbox.is-video .bf-docs-lightbox-frame {
    /* As wide as a 16:9 player may be for the height under the 50px bar: on a phone held sideways the player's
       own controls ended up below the screen, and Close above it. */
    width: min(1100px, 100%, calc((100vh - 82px) * 16 / 9));
    width: min(1100px, 100%, calc((100dvh - 82px) * 16 / 9));
    height: auto;
    background: #000;
}
.bf-docs-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 16px;
    background: #1f2328;
    color: #fff;
}
.bf-docs-lightbox-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}
.bf-docs-lightbox-tools {
    display: flex;
    gap: 6px;
}
.bf-docs-lightbox .bf-docs-lb-btn {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.bf-docs-lightbox .bf-docs-lb-btn:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}
.bf-docs-lightbox-body {
    flex: 1;
    overflow: auto;
    padding: 12px;
}
.bf-docs-lightbox.is-video .bf-docs-lightbox-body {
    padding: 0;
    overflow: hidden;
}
/* A page is centred while it fits. Wider than the viewer (zoomed in, or a phone turned after the pages were
   drawn) its holder grows with it, so the page starts at the viewer's left edge and scrolls. Centring it in a
   flex row let it stick out on BOTH sides, and what sticks out on the left can never be scrolled to. */
.bf-docs-lb-page {
    width: max-content;
    min-width: 100%;
    margin: 0 0 12px;
}
.bf-docs-lb-page canvas {
    display: block;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    max-width: none;
}
.bf-docs-lb-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}
.bf-docs-lb-loading {
    color: #fff;
    text-align: center;
    padding: 40px 16px;
}
.bf-docs-lb-loading a {
    color: #fff;
    text-decoration: underline;
}
.bf-docs-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
}
.bf-docs-embed.is-loading {
    display: grid;
    place-items: center;
}
.bf-docs-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Access gate ------------------------------------------------------ */
.bf-docs .bf-docs-lock {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 6px;
    color: var(--bf-docs-muted);
}
.bf-docs .bf-docs-lock-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.bf-docs .bf-docs-lock-open,
.bf-docs .is-unlocked .bf-docs-lock-closed {
    display: none;
}
.bf-docs .is-unlocked .bf-docs-lock-open {
    display: inline;
}
.bf-docs .is-unlocked .bf-docs-lock {
    color: var(--bf-docs-accent);
}
.bf-docs .is-unlocked .bf-docs-cover .bf-docs-lock {
    color: #fff;   /* the corner badge is a dark disc: the open padlock stays white on it */
}
/* A table row's title link is a block of its own: the padlock floats in front of its first line. */
.bf-docs .bf-docs-table .bf-docs-lock {
    float: left;
    margin-top: 6px;
}
.bf-docs-lightbox.is-gate .bf-docs-lightbox-frame {
    max-width: 460px;
    height: auto;
    background: #fff;
}
.bf-docs-lightbox.is-gate .bf-docs-lightbox-body {
    padding: 18px 20px 22px;
    color: #1f2933;
}
.bf-docs-gate label {
    display: block;
    margin: 10px 0 0;
    font-weight: 600;
    font-size: 14px;
}
.bf-docs-gate label input[type=text],
.bf-docs-gate label input[type=email],
.bf-docs-gate label input[type=password] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 9px 11px;
    border: 1px solid #cbd2d9;
    border-radius: 8px;
    font: inherit;
    font-weight: 400;
}
.bf-docs-gate fieldset {
    border: 0;
    margin: 6px 0 0;
    padding: 0;
}
.bf-docs-gate .bf-docs-gate-choice {
    font-weight: 400;
}
.bf-docs-gate .bf-docs-button {
    margin-top: 16px;
    width: 100%;
}
.bf-docs-gate .bf-docs-gate-hp {
    position: absolute;
    left: -9999px;
}
.bf-docs-gate .bf-docs-gate-msg {
    color: #b42318;
    margin: 10px 0 0;
}
.bf-docs-gate .bf-docs-gate-msg:empty {
    display: none;
}
.bf-docs-gate-link {
    margin-top: 16px;
    font-size: 14px;
}
.bf-docs-gate-link summary {
    cursor: pointer;
}
.bf-docs-lightbox .bf-docs-gate .bf-docs-button-secondary {
    background: #fff;
    color: #1f2933;
    border: 1px solid #cbd2d9;
}
.bf-docs-gate-done {
    margin: 4px 0;
    color: #1e5631;
}

@media (prefers-reduced-motion: reduce) {
    .bf-docs .bf-docs-card,
    .bf-docs .bf-docs-play,
    .bf-docs details.bf-docs-group > summary::after {
        transition: none;
    }
    .bf-docs .bf-docs-grid .bf-docs-card:hover {
        transform: none;
    }
}


/* ---- Design range (2026.10.03.09, Joe's notes A1–A10, B3, D1, D10) ---------------------- */

/* The module never collapses inside a flex column (B3). */
.bf_documents { width: 100%; min-width: 0; }

/* A hidden title is still read out (D2). */
.bf-docs .bf-docs-card .bf-docs-title.bf-docs-sr { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cover frame: fill and crop, or no shadow (A1). */
.bf-docs.bf-docs-fit-cover .bf-docs-cover { padding: 0; background: transparent; }
.bf-docs.bf-docs-fit-cover .bf-docs-cover img.bf-docs-cover-img { object-fit: cover; filter: none; border-radius: 0; }
.bf-docs.bf-docs-no-cover-shadow .bf-docs-cover img.bf-docs-cover-img { filter: none; }

/* No card at all: just the cover and its caption (A2). */
.bf-docs.bf-docs-bare .bf-docs-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.bf-docs.bf-docs-bare .bf-docs-grid .bf-docs-card:hover { box-shadow: none; }
.bf-docs.bf-docs-bare .bf-docs-cover { border-radius: var(--bf-docs-radius); }
.bf-docs.bf-docs-bare .bf-docs-body { padding: 10px 0 0; }
.bf-docs.bf-docs-bare .bf-docs-list .bf-docs-card { border-bottom: 1px solid var(--bf-docs-border); }

/* The hover lift is optional (B8). */
.bf-docs.bf-docs-no-lift .bf-docs-grid .bf-docs-card:hover { transform: none; }

/* Title on the cover, or not shown (A3). */
.bf-docs.bf-docs-title-overlay .bf-docs-grid .bf-docs-card { overflow: hidden; }
/* The caption box, its title and its details are three classes, not four: the Divi design elements for them
   (four) and their custom-CSS slots restyle the overlay too. */
.bf-docs-title-overlay .bf-docs-grid .bf-docs-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 34px 14px 12px; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    border-radius: 0 0 var(--bf-docs-radius) var(--bf-docs-radius);
}
/* A video playing in its card ("Play: in place"): the caption and its buttons leave the cover, so nothing lies
   over the player. (:where keeps this a class lighter than the Caption Box design element and its custom-CSS slot.) */
.bf-docs.bf-docs-title-overlay :where(.bf-docs-grid .bf-docs-card.is-playing) .bf-docs-body { display: none; }
.bf-docs.bf-docs-title-overlay .bf-docs-grid .bf-docs-body a,
.bf-docs.bf-docs-title-overlay .bf-docs-grid .bf-docs-body button { pointer-events: auto; }
.bf-docs-title-overlay .bf-docs-grid .bf-docs-title { color: #fff; }
.bf-docs-title-overlay .bf-docs-grid .bf-docs-meta { color: rgba(255, 255, 255, .86); }

/* Buttons: hidden, or only on hover / keyboard focus (A3). */
.bf-docs.bf-docs-buttons-hide .bf-docs-actions { display: none; }
@media (hover: hover) {
    .bf-docs.bf-docs-buttons-hover .bf-docs-actions { opacity: 0; transition: opacity .2s ease; }
    .bf-docs.bf-docs-buttons-hover .bf-docs-card:hover .bf-docs-actions,
    .bf-docs.bf-docs-buttons-hover .bf-docs-card:focus-within .bf-docs-actions { opacity: 1; }
}

/* Caption alignment (A6). */
.bf-docs.bf-docs-caption-left .bf-docs-body { text-align: left; align-items: flex-start; }
.bf-docs.bf-docs-caption-center .bf-docs-body { text-align: center; align-items: center; }
.bf-docs.bf-docs-caption-right .bf-docs-body { text-align: right; align-items: flex-end; }
.bf-docs.bf-docs-caption-center .bf-docs-actions { justify-content: center; }
.bf-docs.bf-docs-caption-right .bf-docs-actions { justify-content: flex-end; }

/* Cover hover: a colour overlay, an icon, a zoom (A4). */
.bf-docs.bf-docs-has-hover .bf-docs-cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--bf-docs-hover-overlay, transparent); opacity: 0; border-radius: inherit;
}
.bf-docs .bf-docs-hover-icon {
    position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
    color: var(--bf-docs-hover-icon, #fff); opacity: 0;
}
.bf-docs .bf-docs-hover-icon svg { width: var(--bf-docs-hover-icon-size, 22%); min-width: min(28px, var(--bf-docs-hover-icon-size, 28px)); max-width: var(--bf-docs-hover-icon-size, 64px); height: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.bf-docs.bf-docs-has-hover .bf-docs-card:hover .bf-docs-cover::after,
.bf-docs .bf-docs-card:hover .bf-docs-hover-icon { opacity: 1; }
/* The same look for the keyboard — and only for it: with :focus-within the veil stayed lit on the last-used
   card after a mouse click (closing the lightbox hands the focus back to the button that opened it). Its own
   rule: a browser that does not know :has() keeps the hover rule above. */
.bf-docs.bf-docs-has-hover .bf-docs-card:has(:focus-visible) .bf-docs-cover::after,
.bf-docs .bf-docs-card:has(:focus-visible) .bf-docs-hover-icon { opacity: 1; }
/* Nothing lies over a video playing in its card: the player stands where the cover was, without the veil. */
.bf-docs.bf-docs-has-hover .bf-docs-inline-player::after { content: none; }
.bf-docs.bf-docs-hover-zoom .bf-docs-card:hover .bf-docs-cover img.bf-docs-cover-img { transform: scale(var(--bf-docs-hover-zoom, 1.05)); }
@media (prefers-reduced-motion: no-preference) {
    .bf-docs.bf-docs-has-hover .bf-docs-cover::after,
    .bf-docs .bf-docs-hover-icon { transition: opacity .25s ease; }
    .bf-docs.bf-docs-hover-zoom .bf-docs-cover img.bf-docs-cover-img { transition: transform .35s ease; }
}

/* Columns per screen size, and cards that keep a width (A5).
   What is NOT set stays automatic, as in the grid rules at the top: up to 3 on tablets (to 820px), 2 on phones
   (to 640px), 1 on the narrowest (to 380px). These rules are a class heavier than those, so each automatic
   step is said again here — the tablet setting used to take over phones as well, and a card width kept the
   desktop count on tablets and 2 columns on the narrowest phones. */
.bf-docs.bf-docs-fixed-width .bf-docs-grid {
    grid-template-columns: repeat(var(--bf-docs-cols, 3), minmax(0, var(--bf-docs-card-w)));
    justify-content: var(--bf-docs-card-justify, start);
}
@container (max-width: 820px) {
    .bf-docs.bf-docs-fixed-width .bf-docs-grid { grid-template-columns: repeat(min(var(--bf-docs-cols, 3), 3), minmax(0, var(--bf-docs-card-w))); }
}
/* Columns On Tablets: tablets only — above the phone sizes. */
@container (640px < width <= 820px) {
    .bf-docs.bf-docs-cols-tablet .bf-docs-grid { grid-template-columns: repeat(var(--bf-docs-cols-t), minmax(0, 1fr)); }
    .bf-docs.bf-docs-cols-tablet.bf-docs-fixed-width .bf-docs-grid { grid-template-columns: repeat(var(--bf-docs-cols-t), minmax(0, var(--bf-docs-card-w))); }
}
@container (max-width: 640px) {
    .bf-docs.bf-docs-fixed-width .bf-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
    .bf-docs.bf-docs-fixed-width .bf-docs-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Columns On Phones: every phone size, the narrowest included (after the automatic steps above, so it wins). */
@container (max-width: 640px) {
    .bf-docs.bf-docs-cols-phone .bf-docs-grid,
    .bf-docs.bf-docs-cols-phone.bf-docs-fixed-width .bf-docs-grid { grid-template-columns: repeat(var(--bf-docs-cols-p), minmax(0, 1fr)); }
}

/* "View all" line under a library (A7). */
.bf-docs .bf-docs-footer { margin: 18px 0 0; }
/* The text colour, underlined: a theme's light primary colour on white fails contrast (Joe #44); Design → Link Under The Library styles it. */
.bf-docs .bf-docs-footer a { display: inline-block; min-height: 24px; padding: 2px 0; font-weight: 600; color: var(--bf-docs-text); text-decoration: underline; text-underline-offset: 3px; }
.bf-docs .bf-docs-footer a:hover { color: var(--bf-docs-accent); }

/* Focus you can see, also on dark panels: the accent ring outside a white one (D1). */
.bf-docs a:focus-visible,
.bf-docs button:focus-visible,
.bf-docs summary:focus-visible,
.bf-docs-lightbox a:focus-visible,
.bf-docs-lightbox button:focus-visible,
.bf-docs-modal a:focus-visible,
.bf-docs-modal button:focus-visible {
    outline: 3px solid var(--bf-docs-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}
.bf-docs .bf-docs-cover:focus-visible { outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
    .bf-docs.bf-docs-hover-zoom .bf-docs-card:hover .bf-docs-cover img.bf-docs-cover-img { transform: none; }
    .bf-docs.bf-docs-buttons-hover .bf-docs-actions { transition: none; }
}

/* Title links are targets on their own: at least 24px tall (WCAG 2.5.8, Joe #45). */
.bf-docs .bf-docs-card .bf-docs-title a,
.bf-docs .bf-docs-table a.bf-docs-title { padding: 3px 0; }

/* ---- Rounds 8 / 8b (2026.10.04.02) ------------------------------------------------------ */

/* The video play button: the dark circle (default), the accent colour, or a "YouTube red" lozenge. */
.bf-docs.bf-docs-play-accent .bf-docs-play { background: var(--bf-docs-accent); }
.bf-docs.bf-docs-play-red .bf-docs-play { background: #f00; }
/* The lozenge is for covers in a grid; a list row's thumbnail (110px wide) keeps its small round button, in red.
   (:where: no heavier than before.) */
.bf-docs.bf-docs-play-red :where(.bf-docs-grid) .bf-docs-play { width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; }
.bf-docs.bf-docs-play-red .bf-docs-card:hover .bf-docs-play { background: #c00; }

/* "Play: in place": the player takes the cover's place in its card. */
.bf-docs .bf-docs-cover.bf-docs-inline-player { padding: 0; aspect-ratio: 16 / 9; background: #000; }
.bf-docs .bf-docs-inline-player .bf-docs-embed { width: 100%; height: 100%; }

/* A featured document (Item23): one large card above the rest, with its own heading; and the "New" badge. */
.bf-docs .bf-docs-featured { margin: 0 0 var(--bf-docs-row-gap, var(--bf-docs-gap, 24px)); }
.bf-docs .bf-docs-featured .bf-docs-items { --bf-docs-cols: 1; }
.bf-docs .bf-docs-featured-label { margin: 0 0 12px; font-size: 1.15em; line-height: 1.3; }
.bf-docs .bf-docs-grid-label { margin: 0 0 12px; font-size: 1.15em; line-height: 1.3; }   /* grid_label: over the cards after the featured one */
.bf-docs .bf-docs-new { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--bf-docs-accent); color: #fff; font-size: .68em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6; vertical-align: middle; }