/* ============================================================================
   window-record.css
   ----------------------------------------------------------------------------
   The readable window record. Loaded AFTER offering.css, which this file does
   not modify. One new class family - op-record.
   ============================================================================ */

/* Label-and-value pairs. A definition list rather than a table: these are facts
   about one thing, not rows of comparable items. */
.op-record {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: .4rem 1.5rem;
    margin: .75rem 0;
}

.op-record dt {
    font-size: .85rem;
    color: var(--op-muted, #64748B);
}

.op-record dd {
    margin: 0;
    font-size: .95rem;
}

.op-record dd code {
    font-family: ui-monospace, monospace;
    font-size: .8rem;
    margin-left: .4rem;
    opacity: .75;
}

.op-record__trade {
    padding: 1rem 0;
    border-bottom: 1px solid var(--op-border, #E2E8F0);
}

.op-record__trade:last-child {
    border-bottom: none;
}

.op-record__trade > span {
    display: block;
    margin-top: .15rem;
}

/* Eligibility evidence is collapsed. It is the most important content on the page
   and the least often needed - a reader wants it when a specific order is in
   question, not while scanning what happened. */
.op-record__snapshot {
    margin: .5rem 0;
    padding: .5rem 0;
    border-bottom: 1px solid var(--op-border, #E2E8F0);
}

.op-record__snapshot summary {
    cursor: pointer;
    font-size: .95rem;
    user-select: none;
}

.op-record__rules,
.op-record__audit {
    width: 100%;
    border-collapse: collapse;
    margin-top: .75rem;
    font-size: .85rem;
}

.op-record__rules th,
.op-record__rules td,
.op-record__audit td {
    text-align: left;
    padding: .4rem .6rem;
    vertical-align: top;
    border-bottom: 1px solid var(--op-border, #E2E8F0);
}

.op-record__rules th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--op-muted, #64748B);
}

/* A failed rule is tinted, not reddened. Most snapshots are entirely passes, and a
   row that stands out is easier to find than a colour scheme that shouts. */
.op-record__rules tr.is-fail {
    background: #FEF2F2;
}

.op-record__rules code,
.op-record__audit code {
    font-family: ui-monospace, monospace;
    font-size: .78rem;
    color: var(--op-muted, #64748B);
}

.op-record__audit td:first-child {
    white-space: nowrap;
    color: var(--op-muted, #64748B);
}

.op-record__flag {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--op-border, #E2E8F0);
}

.op-record__flag:last-child {
    border-bottom: none;
}

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

    .op-record dd {
        margin-bottom: .6rem;
    }

    .op-record__rules,
    .op-record__audit {
        font-size: .78rem;
    }
}