/* ============================================================================
   surveillance.css
   ----------------------------------------------------------------------------
   Flag cards on the surveillance review page. Loaded AFTER offering.css, which
   this file does not modify. One new class family - op-flag.
   ============================================================================ */

/* A coloured left edge rather than a filled card. A page of red panels reads as
   an emergency and stops being read; the severity should be visible while
   scanning without shouting at someone doing routine review. */
.op-flag {
    border-left: 4px solid var(--op-border, #E2E8F0);
}

.op-flag--serious {
    border-left-color: #DC2626;
}

.op-flag--review {
    border-left-color: #D97706;
}

.op-flag--informational {
    border-left-color: #94A3B8;
}

/* Evidence is collapsed by default. It is needed when judging a flag and noise
   when scanning a list of them. */
.op-flag__evidence {
    margin: .75rem 0;
}

.op-flag__evidence summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--op-muted, #64748B);
    user-select: none;
}

.op-flag__evidence dl {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: .3rem 1rem;
    margin: .75rem 0 0;
    padding: .75rem 1rem;
    background: var(--op-surface, #F8FAFC);
    border-radius: var(--op-radius, 8px);
}

.op-flag__evidence dt {
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    color: var(--op-muted, #64748B);
}

.op-flag__evidence dd {
    margin: 0;
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    word-break: break-word;
}

/* A recorded decision, set apart from the finding it disposes of. */
.op-flag__review {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--op-border, #E2E8F0);
    font-size: .9rem;
}

.op-flag__review p {
    margin: .35rem 0 0;
    color: var(--op-muted, #64748B);
}

@media (max-width: 640px) {
    .op-flag__evidence dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .op-flag__evidence dd {
        margin-bottom: .5rem;
    }
}