/* v0.6.11: responsive Fehlerkuerzel, Erklaerungen und kumulative OCR-Vorverarbeitung. */
.editor-card-scroll .editor-page,
.result-card.corrected .editor-card-scroll .editor-page {
    width: 100%;
    min-width: 0;
}

.editor-card-scroll .editor-line,
.result-card.corrected .editor-card-scroll .editor-line {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 14%);
    gap: 9px;
}

.editor-text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.editor-codes {
    position: relative;
    min-width: 0;
    overflow: visible;
    font-size: 10px;
    line-height: 1.45;
}

.editor-code-line {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-height: 1em;
    white-space: nowrap;
    transform-origin: left top;
}

.editor-code-line::before {
    content: "";
    flex: 0 0 5px;
    border-top: 1px solid rgba(176, 0, 32, .38);
}

.editor-code {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 3px;
    cursor: pointer;
    padding: 0 1px;
}

.editor-token.hover-linked,
.editor-code.hover-linked {
    background: rgba(255, 235, 120, .68);
    box-shadow: 0 0 0 2px rgba(216, 169, 0, .32);
}

.editor-token.style-hint {
    text-decoration: underline wavy #c00020;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    text-decoration-color: #c00020;
    text-decoration-thickness: 1.25px;
    text-underline-offset: 3px;
}

.annotation-menu {
    width: min(470px, calc(100vw - 16px));
    max-height: min(620px, calc(100vh - 16px));
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    overflow: auto;
}

.annotation-menu-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.annotation-menu-heading strong {
    color: #18364d;
    font-size: 14px;
}

.annotation-menu-heading span {
    color: #647b8e;
    font-size: 10px;
}

.annotation-menu-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #dce8ef;
    padding-top: 8px;
}

.annotation-explanation {
    display: grid;
    gap: 7px;
}

.annotation-explanation-item {
    border-left: 3px solid #b00020;
    border-radius: 4px;
    background: #fffaf0;
    padding: 7px 9px;
}

.annotation-explanation-item strong,
.annotation-explanation-item span,
.annotation-explanation-item small {
    display: block;
}

.annotation-explanation-item strong {
    color: #8a0018;
    font-size: 13px;
}

.annotation-explanation-item span {
    margin-top: 3px;
    color: #243746;
    font-size: 12px;
    line-height: 1.38;
    white-space: pre-wrap;
}

.annotation-explanation-item small {
    margin-top: 4px;
    color: #647b8e;
    font-size: 10px;
}

.annotation-explanation-empty {
    margin: 0;
    color: #647b8e;
    font-size: 12px;
}

.annotation-tooltip {
    position: fixed;
    z-index: 1100;
    width: min(430px, calc(100vw - 24px));
    max-height: min(480px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid #d6b600;
    border-radius: 9px;
    background: #fffbe6;
    box-shadow: 0 6px 22px rgba(25, 65, 91, .28);
    padding: 10px;
    pointer-events: none;
}

.annotation-tooltip[hidden] {
    display: none;
}

.annotation-tooltip .annotation-explanation-item {
    background: rgba(255, 255, 255, .62);
}

@media (max-width: 850px) {
    .editor-card-scroll .editor-page,
    .result-card.corrected .editor-card-scroll .editor-page {
        min-width: 0;
        padding: 18px 12px;
        font-size: 13px;
    }

    .editor-card-scroll .editor-line,
    .result-card.corrected .editor-card-scroll .editor-line {
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 7px;
    }

    .editor-codes,
    .result-card.corrected .editor-card-scroll .editor-codes {
        font-size: 9px;
    }
}

@media (max-width: 430px) {
    .editor-card-scroll .editor-page,
    .result-card.corrected .editor-card-scroll .editor-page {
        padding: 15px 9px;
        font-size: 12px;
    }

    .editor-card-scroll .editor-line,
    .result-card.corrected .editor-card-scroll .editor-line {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 6px;
    }

    .editor-codes,
    .result-card.corrected .editor-card-scroll .editor-codes {
        font-size: 8px;
    }

    .editor-code-line {
        gap: 2px;
    }

    .editor-code-line::before {
        flex-basis: 3px;
    }

    .annotation-menu {
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        top: auto !important;
        width: auto;
        max-height: min(72vh, 620px);
    }

    .annotation-menu-controls {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .annotation-menu-controls label {
        width: 100%;
    }

    .annotation-menu-controls select {
        min-width: 0;
        flex: 1 1 210px;
    }

    .annotation-tooltip {
        display: none !important;
    }
}