/* =====================================================================
   BIOS LAB — Documentazione
   Si carica dopo theme.css e site.css e usa solo i loro token: colori,
   angoli e caratteri restano quelli del sito. Qui stanno la griglia a
   tre colonne (indice, testo, «in questa pagina») e gli elementi che
   escono dal Markdown delle pagine (DocMarkdown).
   ===================================================================== */

.bl-docs-tag {
    margin-left: 8px;
    padding: 2px 7px;
    border: 1px solid var(--bl-accent-deep);
    border-radius: var(--bl-radius-sm);
    color: var(--bl-accent);
    font-family: var(--bl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bl-docsite .bl-main { padding-top: 32px; }

/* ---- Griglia ------------------------------------------------------ */

.bl-docs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.bl-docs--toc { grid-template-columns: 240px minmax(0, 1fr) 200px; }

.bl-docs__side,
.bl-docs__toc {
    position: sticky;
    top: var(--bl-sticky);
    max-height: calc(100vh - var(--bl-header-h) - var(--bl-sticky) * 2);
    overflow-y: auto;
}

.bl-docs__main { min-width: 0; }

/* ---- Indice laterale ---------------------------------------------- */

.bl-docs__menu > summary { list-style: none; }
.bl-docs__menu > summary::-webkit-details-marker { display: none; }

/* Su schermo largo l'indice è sempre aperto: il sommario non serve. */
.bl-docs__menu-toggle { display: none; }

.bl-docs__nav { display: flex; flex-direction: column; gap: 22px; }

.bl-docs__group { display: flex; flex-direction: column; gap: 2px; }

.bl-docs__group-title {
    margin-bottom: 6px;
    color: var(--bl-pink);
    font-family: var(--bl-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bl-docs__link {
    display: block;
    padding: 6px 10px;
    border-left: 1px solid var(--bl-line);
    color: var(--bl-text-nav);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--bl-fast) var(--bl-ease), border-color var(--bl-fast) var(--bl-ease);
}

.bl-docs__link:hover { color: var(--bl-text); border-left-color: var(--bl-border-strong); }

.bl-docs__link.is-open { color: var(--bl-text); }

.bl-docs__link.is-active {
    color: var(--bl-accent);
    border-left-color: var(--bl-accent);
    background: var(--bl-accent-glow);
}

.bl-docs__sub { display: flex; flex-direction: column; margin: 2px 0 6px 12px; }
.bl-docs__sub .bl-docs__link { font-size: 13px; }

/* ---- Intestazione ------------------------------------------------- */

.bl-docs__head { margin: 18px 0 30px; }

.bl-site .bl-docs__title {
    margin: 14px 0 0;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.12;
    letter-spacing: -.03em;
}

.bl-docs__lead {
    max-width: 640px;
    margin: 14px 0 0;
    color: var(--bl-text-soft);
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

.bl-docs__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.bl-docs__specs { max-width: 520px; margin: 0 0 34px; }

/* ---- Schede di indice e ricerca ----------------------------------- */

.bl-docs__section { margin-top: 36px; }
.bl-docs__section:first-of-type { margin-top: 0; }

.bl-site .bl-docs__section-title {
    margin: 0 0 14px;
    font-size: 15px;
    letter-spacing: .02em;
}

.bl-docs__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.bl-docs__card,
.bl-docs__result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    background: var(--bl-surface);
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    color: var(--bl-text);
    text-decoration: none;
    transition: border-color var(--bl-fast) var(--bl-ease), background var(--bl-fast) var(--bl-ease);
}

.bl-docs__card:hover,
.bl-docs__result:hover { border-color: var(--bl-accent-deep); background: var(--bl-surface-2); }

.bl-docs__card-title { font-weight: 700; }
.bl-docs__card-text { color: var(--bl-text-soft); font-size: 14px; line-height: 1.5; }

.bl-docs__results { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

.bl-docs__searchform { display: flex; gap: 10px; max-width: 560px; margin-bottom: 24px; }
.bl-docs__searchform .bl-input { flex: 1; }

/* ---- Pagine precedente e successiva ------------------------------- */

.bl-docs__pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 760px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--bl-line);
}

.bl-docs__pager-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
    color: var(--bl-text);
    text-decoration: none;
}

.bl-docs__pager-link:hover { border-color: var(--bl-accent-deep); }
.bl-docs__pager-link--next { grid-column: 2; text-align: right; }

/* ---- «In questa pagina» ------------------------------------------- */

.bl-docs__toc-title {
    display: block;
    margin-bottom: 10px;
    color: var(--bl-pink);
    font-family: var(--bl-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bl-docs__toc-list { display: flex; flex-direction: column; gap: 2px; }

.bl-docs__toc-link {
    padding: 4px 0 4px 10px;
    border-left: 1px solid var(--bl-line);
    color: var(--bl-text-dim);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
}

.bl-docs__toc-link:hover { color: var(--bl-text); }
.bl-docs__toc-link--sub { padding-left: 20px; }
.bl-docs__toc-link.is-active { color: var(--bl-accent); border-left-color: var(--bl-accent); }

/* ---- Testo delle pagine ------------------------------------------- */

.bl-doc { line-height: 1.7; }
.bl-doc > :first-child { margin-top: 0; }

.bl-doc h2,
.bl-doc h3,
.bl-doc h4 {
    position: relative;
    scroll-margin-top: var(--bl-sticky);
}

.bl-doc h2 { margin: 2em 0 .6em; padding-top: 1em; border-top: 1px solid var(--bl-line); font-size: 22px; }
.bl-doc h3 { margin: 1.6em 0 .5em; font-size: 17px; }
.bl-doc h4 { margin: 1.4em 0 .4em; font-size: 15px; color: var(--bl-text-soft); }

.bl-doc-anchor {
    position: absolute;
    left: -1.1em;
    color: var(--bl-text-dim);
    font-weight: 400;
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--bl-fast) var(--bl-ease);
}

.bl-doc h2 .bl-doc-anchor { top: 1em; }
.bl-doc h2:hover .bl-doc-anchor,
.bl-doc h3:hover .bl-doc-anchor,
.bl-doc h4:hover .bl-doc-anchor { opacity: 1; }

.bl-doc p,
.bl-doc li { color: var(--bl-text-soft); }
.bl-doc strong { color: var(--bl-text); }
.bl-doc li + li { margin-top: 4px; }
.bl-doc li > ul,
.bl-doc li > ol { margin: 6px 0; }

.bl-doc a:not(.bl-doc-anchor) { color: var(--bl-accent); }
.bl-doc a:not(.bl-doc-anchor):hover { color: var(--bl-accent-soft); }

.bl-doc code { color: var(--bl-pink); }

.bl-doc img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius);
}

/* Blocco di codice con lingua e pulsante «Copia» (docs.js). */
.bl-doc-code { position: relative; margin: 0 0 1.2em; }
.bl-doc-code pre { margin: 0; padding-top: 30px; }
.bl-doc-code pre code { color: var(--bl-text); }

.bl-doc-code__lang {
    position: absolute;
    top: 8px;
    left: 14px;
    color: var(--bl-text-dim);
    font-family: var(--bl-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bl-doc-code__copy {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--bl-border);
    border-radius: var(--bl-radius-sm);
    color: var(--bl-text-dim);
    font-family: var(--bl-mono);
    font-size: 11px;
    cursor: pointer;
}

.bl-doc-code__copy:hover { color: var(--bl-text); border-color: var(--bl-border-strong); }
.bl-doc-code__copy.is-done { color: var(--bl-accent); border-color: var(--bl-accent-deep); }

.bl-doc-table { min-width: 0; }
.bl-doc .bl-table-wrap { margin: 0 0 1.2em; overflow-x: auto; }
.bl-doc-table td { color: var(--bl-text-soft); vertical-align: top; }

/* Avvisi: > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION] */
.bl-doc-callout {
    --callout: var(--bl-accent);
    margin: 0 0 1.2em;
    padding: 12px 16px;
    background: var(--bl-bg-alt);
    border: 1px solid var(--bl-border);
    border-left: 2px solid var(--callout);
    border-radius: var(--bl-radius-sm);
}

.bl-doc-callout--tip { --callout: #7fd6a4; }
.bl-doc-callout--important { --callout: var(--bl-pink); }
.bl-doc-callout--warning { --callout: #f2c46f; }
.bl-doc-callout--caution { --callout: #f28b82; }

.bl-doc-callout__label {
    display: block;
    margin-bottom: 4px;
    color: var(--callout);
    font-family: var(--bl-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.bl-doc-callout > :last-child { margin-bottom: 0; }

/* ---- Schermi stretti ---------------------------------------------- */

@media (max-width: 1180px) {
    .bl-docs--toc { grid-template-columns: 220px minmax(0, 1fr); }
    .bl-docs__toc { display: none; }
}

@media (max-width: 860px) {
    .bl-docs,
    .bl-docs--toc { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .bl-docs__side { position: static; max-height: none; overflow: visible; }

    .bl-docs__menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background: var(--bl-surface);
        border: 1px solid var(--bl-border);
        border-radius: var(--bl-radius);
        color: var(--bl-text);
        font-size: 14px;
        cursor: pointer;
    }

    .bl-docs__menu-toggle::after { content: "▾"; color: var(--bl-text-dim); }
    .bl-docs__menu[open] > .bl-docs__menu-toggle::after { content: "▴"; }
    .bl-docs__menu[open] > .bl-docs__nav { margin-top: 14px; }

    .bl-docs__pager { grid-template-columns: 1fr; }
    .bl-docs__pager-link--next { grid-column: 1; }
    .bl-doc-anchor { display: none; }
}