.context-help {
    position: fixed;

    right: 24px;
    top: 96px;

    z-index: 1000;
}


/*
 * Summary používáme jako kulaté
 * plovoucí tlačítko.
 */

.context-help-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #111;
    color: #fff;

    font-size: 24px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.18);

    list-style: none;
}


/* Chrome / Safari marker */

.context-help-button::-webkit-details-marker {
    display: none;
}


.context-help-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 24px
        rgba(0, 0, 0, 0.23);
}


.context-help[open]
.context-help-button {
    background: #333;
}


.context-help-panel {
    position: absolute;

    right: 0;
    top: 62px;

    width: min(
        380px,
        calc(100vw - 32px)
    );

    max-height:
        min(520px, calc(100vh - 110px));

    overflow-y: auto;

    padding: 20px;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 12px 45px
        rgba(0, 0, 0, 0.22);
}


.context-help-heading {
    margin-bottom: 14px;

    font-size: 20px;
    font-weight: 700;
}


.context-help-links {
    display: grid;
    gap: 8px;
}


.context-help-link {
    display: flex;
    flex-direction: column;

    gap: 4px;

    padding: 12px 14px;

    border: 1px solid
        rgba(0, 0, 0, 0.08);

    border-radius: 10px;

    color: inherit;
    text-decoration: none;
}


.context-help-link:hover {
    background:
        rgba(0, 0, 0, 0.035);

    border-color:
        rgba(0, 0, 0, 0.15);
}


.context-help-link strong {
    font-size: 14px;
}


.context-help-link span {
    font-size: 13px;
    line-height: 1.4;

    opacity: 0.68;
}


.context-help-all {
    display: block;

    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid
        rgba(0, 0, 0, 0.08);

    font-weight: 700;

    color: inherit;
    text-decoration: none;
}


@media (max-width: 700px) {

    .context-help {
        right: 14px;
        top: 14px;
    }

    .context-help-button {
        width: 44px;
        height: 44px;

        font-size: 21px;
    }

    .context-help-panel {
        right: 0;
        top: 56px;
    }
}