/* A sale shown short, its details one step away (sale-detail.js): the
   popover a tile opens and the details a row opens in place, and the list
   of label and value inside both (app.js saleDetailList). */

.detail-pop {
    position: fixed;
    z-index: 9;
    width: max-content;
    min-width: 220px;
    max-width: min(340px, calc(100vw - 16px));
    overflow: auto;
    padding: 10px 12px 12px;
    border: 1px solid var(--control-border, var(--border));
    border-radius: var(--radius, 10px);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: 12.5px;
    text-align: left;
    cursor: auto;
}

.detail-pop:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.detail-pop[hidden] {
    display: none;
}

.sale-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--grid, var(--border));
    font-weight: 650;
}

.sale-detail-head .btc {
    font-size: 15px;
}

.sale-detail-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Label and value, side by side. */
.sale-detail {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 5px 12px;
    margin: 0;
}

.sale-detail-item {
    display: contents;
}

.sale-detail dt {
    color: var(--muted);
    font-size: 11.5px;
    white-space: nowrap;
}

.sale-detail dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.sale-detail .sale-parties {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 4px;
}

.sale-detail .sale-with {
    margin-left: 0;
}

/* A row: one line, a button over it all; its details below. */
.detail-row-summary {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.detail-row-summary:hover,
.detail-row.is-open > .detail-row-summary {
    background: var(--hover);
}

.detail-row-summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.detail-row-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 120ms ease;
}

.detail-row.is-open .detail-row-chevron {
    transform: translateY(1px) rotate(-135deg);
}

.detail-row-panel {
    padding: 4px 2px 10px;
    font-size: 12.5px;
}

.detail-row-panel[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .detail-row-chevron {
        transition: none;
    }
}