/* Protocol replies in the incident narrative.
 * Markup: src/Protocol/ProtocolTaskFormatter.php.
 * Tune these variables for the entire component; override the selectors below
 * for layout. Styling also applies to older replies adapted when displayed.
 */
.protocol-response {
    --protocol-response-accent: #61728b;
    --protocol-response-question-font: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --protocol-response-question-size: .9em;
    --protocol-response-question-background: #eef1f5;
    --protocol-response-row-gap: 3px;
    display: flex;
    flex-direction: column;
    gap: var(--protocol-response-row-gap);
    line-height: 1.4;
}

.protocol-response__heading {
    display: block;
}

.protocol-response__icon {
    color: var(--protocol-response-accent);
    margin-inline-end: 6px;
}

/* WhatsApp-style code typography: only the protocol question is monospaced. */
.protocol-response__question {
    font-family: var(--protocol-response-question-font);
    font-size: var(--protocol-response-question-size);
    font-weight: 400;
    color: inherit;
    background: var(--protocol-response-question-background);
    border-radius: 3px;
    padding: 1px 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
}

.protocol-response__detail { overflow-wrap: anywhere; }
.protocol-response__label { font-weight: 600; }
.protocol-response__value { white-space: pre-wrap; }

/* Keep non-completion transitions explicit; completed replies need no badge. */
.protocol-response__status {
    color: var(--protocol-response-accent);
    font-size: .85em;
    margin-inline-start: 6px;
}

/* Accessible equivalent of the icon, hidden visually without losing its label. */
.protocol-response__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}