/* ============================================================================================
   Checksums in the Downloads modal (11 Nov 2026, option A of the checksum mockups).
   Markup: Pages/Downloads/Downloads.razor (.ck-block) and Pages/Razor Components/ChecksumHelp.razor.

   Type from the portal scale only: labels Roboto 16, hashes and commands Consolas 16, the MD5
   tag and helper text Caption (Roboto Medium 12/18), the toggle Borda Medium 20 as before, tabs
   Borda DemiBold 20/26. Rules #667C8E, panel #293239, command well #222222, gold #fec52d, focus
   #0dcaf0. Prefix ck- so nothing collides with Bootstrap or a page's global style block.
   ============================================================================================ */

.ck-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid #667C8E;
    padding-top: 20px;
}

/* Toggle: Borda Medium 20 with a 16px chevron, as the old "View checksums" (review point 7). */
.ck-toggle {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 0;
    color: #ffffff;
    font-family: 'Borda', sans-serif;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    .ck-toggle i {
        font-size: 16px;
    }

    .ck-toggle:hover {
        color: #fec52d;
    }

    .ck-toggle:focus-visible {
        outline: 2px solid #0dcaf0;
        outline-offset: 2px;
        border-radius: 3px;
    }

/* Caption on a light chip: names the algorithm once. */
.ck-alg {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: #212529;
    background: #ced4da;
    border-radius: 4px;
    padding: 0 6px;
}

/* Label | hash | copy. max-content keeps each 32-character hash on one line; the column is
   about 280px of Consolas 16, which fits the modal's left column at every desktop width. */
.ck-grid {
    display: grid;
    grid-template-columns: max-content max-content 32px;
    column-gap: 20px;
    row-gap: 8px;
    align-items: center;
    padding-left: 24px;
}

.ck-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #ced4da;
}

.ck-hash {
    font-family: Consolas, ui-monospace, SFMono-Regular, monospace;
    font-size: 1rem;
    line-height: 1;
    color: #9EEAF9;
    white-space: nowrap;
}

.ck-copy {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: #ced4da;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
}

    .ck-copy:hover {
        color: #fec52d;
    }

    .ck-copy:focus-visible {
        outline: 2px solid #0dcaf0;
        outline-offset: 0;
        color: #fec52d;
    }

/* ── How to verify ────────────────────────────────────────────────────────────────────── */

.ck-help {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 24px;
}

/* Styled as the modal's Release notes links: Roboto 16, white, underlined, gold on hover. */
.ck-help-link {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 4px 0;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .ck-help-link:hover {
        color: #fec52d;
    }

    .ck-help-link:focus-visible {
        outline: 2px solid #0dcaf0;
        outline-offset: 2px;
        border-radius: 3px;
    }

.ck-help-panel {
    background: #293239;
    border: 1px solid #667C8E;
    border-radius: 10px;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ck-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #667C8E;
}

/* Tab item: Borda DemiBold 20/26, gold 3px underline on the selected one. */
.ck-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 14px 0 10px;
    min-height: 44px;
    color: #ced4da;
    font-family: 'Borda', sans-serif;
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 600;
    cursor: pointer;
}

    .ck-tab:hover {
        color: #ffffff;
    }

    .ck-tab.active {
        color: #ffffff;
        border-bottom-color: #fec52d;
    }

    .ck-tab:focus-visible {
        outline: 2px solid #0dcaf0;
        outline-offset: -2px;
    }

.ck-cmd {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #222222;
    border-radius: 6px;
    padding: 10px 8px 10px 14px;
}

    .ck-cmd code {
        flex: 1;
        min-width: 0;
        font-family: Consolas, ui-monospace, SFMono-Regular, monospace;
        font-size: 1rem;
        line-height: 1.25rem;
        color: #ffffff;
        word-break: break-all;
        user-select: all;
    }

.ck-help-note {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 500;
    color: #ced4da;
}

/* Phone: the grid would push the hash off the edge, so the label sits above its hash. */
@media (max-width: 575.98px) {
    .ck-grid {
        grid-template-columns: minmax(0, 1fr) 32px;
        padding-left: 0;
    }

    .ck-label {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    .ck-hash {
        white-space: normal;
        word-break: break-all;
    }

    .ck-help {
        padding-left: 0;
    }
}