/* ============================================================================
   records-export.css
   ----------------------------------------------------------------------------
   Export receipts on the books-and-records page. Loaded AFTER offering.css,
   which this file does not modify. One new class family - op-export.
   ============================================================================ */
.op-export {
    padding: 1rem 0;
    border-bottom: 1px solid var(--op-border, #E2E8F0);
}

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

.op-export__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .6rem;
}

.op-export__head > div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/* The hash is the mechanism, not a technical footnote. The operator records it
   on receipt and compares later; if the two differ, one copy changed. It gets
   its own row and a selectable monospace face so copying it is trivial. */
.op-export__hash {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: .5rem 0;
    padding: .5rem .75rem;
    background: var(--op-surface, #F8FAFC);
    border-radius: var(--op-radius, 8px);
}

.op-export__hash label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--op-muted, #64748B);
    flex: 0 0 auto;
}

.op-export__hash code {
    font-family: ui-monospace, monospace;
    font-size: .78rem;
    word-break: break-all;
    user-select: all;
}

.op-export__counts {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0;
}

.op-export__counts span {
    font-size: .78rem;
    color: var(--op-muted, #64748B);
    background: var(--op-surface, #F8FAFC);
    border-radius: 999px;
    padding: .15rem .6rem;
}

@media (max-width: 640px) {
    .op-export__head {
        flex-direction: column;
    }

    .op-export__hash {
        flex-direction: column;
        gap: .2rem;
    }
}