/* JWT Decoder */

/* A token has no spaces, so it is broken anywhere to wrap */
#jd_token {
    height: 7rem;
    word-break: break-all;
    scrollbar-width: thin;
}

/* The key: one line for a secret, room for a PEM key's lines for a public key */
#jd_key {
    height: calc(0.875rem * 1.5 + 2rem + 2 * var(--bs-border-width));
    min-height: calc(0.875rem * 1.5 + 2rem + 2 * var(--bs-border-width));
    word-break: break-all;
    scrollbar-width: thin;
}

#jd_key.jd-key-pem {
    height: 10rem;
}

/* The header, the payload and the signature: text, not fields, so each box grows to fit. Long values wrap
   anywhere rather than widening the card, and an empty box keeps the height of one line */
.jd-json {
    min-height: calc(0.875rem * 1.5 + 2rem + 2 * var(--bs-border-width));
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The claims: a long value breaks anywhere rather than widening the page */
.jd-table {
    table-layout: fixed;
    font-size: 0.875rem;
}

.jd-table > :not(caption) > * > * {
    padding: 0.375rem 0.5rem;
    overflow-wrap: anywhere;
}

.jd-table th:first-child {
    width: 32%;
}

.jd-table th {
    color: var(--ck-text-2);
    font-weight: 500;
}

/* A name with a meaning: dotted, which says a tooltip shows it on hover or tap */
.jd-term {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: help;
}