/**
 * Phone Sold ledger.
 *
 * Loaded after pocket.css. Species is its own row. Sex, age, house,
 * and price stay on the next row. The house cell is the sale identity
 * (barn + year-month, "WLP 2026-09"). A separate date cell was only
 * "Sep 2026", a date with no sale name, so it is not rendered.
 */
.pocket-auction-ledger-header,
.pocket-auction-ledger-row {
    display: grid !important;
    /* Sized for the readable scale (UX audit 2026-09-29): a 15px bold
       "Yearling" and a 17px "$110,000" fit without spilling. Fixed widths
       keep the header and every row on the same columns. */
    grid-template-columns: calc(35.2 * var(--pocket-unit)) calc(73.6 * var(--pocket-unit)) minmax(0, 1fr) calc(102.4 * var(--pocket-unit));
    /* Third line (owner 2026-09-29): sire, own horn, bred-to, seller on the
       left; the hammer against today's typical price on the right. Rows
       without either leave the line empty and collapse it. */
    grid-template-areas:
        "species species species price"
        "sex age house delta"
        "detail detail detail detail";
    column-gap: 6px;
    row-gap: 3px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px;
}

.pocket-auction-col-detail {
    grid-area: detail;
    display: flex;
    gap: 6px;
    min-width: 0;
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    white-space: nowrap;
    overflow: hidden;
}

.pocket-auction-detail-pedigree {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--pocket-text-primary);
}

.pocket-auction-detail-ranch {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pocket-text-muted);
}

.pocket-auction-detail-pedigree + .pocket-auction-detail-ranch::before {
    content: "\00b7 ";
}

.pocket-auction-col-delta {
    grid-area: delta;
    justify-self: end;
    align-self: start;
    margin: 0;
    font-size: var(--pocket-font-size-xs);
    white-space: nowrap;
}

.pocket-auction-ledger-row .pocket-auction-col-price {
    align-self: start;
}

.pocket-auction-per-head {
    display: block;
    font-family: var(--pocket-font-family);
    font-size: var(--pocket-font-size-xs);
    font-weight: 500;
    color: var(--pocket-text-muted);
    line-height: 1.2;
}

.pocket-auction-col-species {
    grid-area: species;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

/* Sale headings (date sort): the house column is redundant under them. */
.pocket-auction-sale-heading {
    margin: 0;
    padding: 10px 8px 6px;
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pocket-active);
    background: var(--pocket-bg);
    border-top: 1px solid var(--pocket-border-light);
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-auction-ledger--grouped .pocket-auction-ledger-row .pocket-auction-col-house {
    visibility: hidden;
}

/* Medal is a fixed flex item beside the species name, same place My Herd
   parks it. Only rows with a gold or silver rank get this wrapper, so
   unmarked rows keep today's single text node and the sex/age/house/price
   tracks do not move. */
.pocket-auction-col-species:has(> .pocket-pedigree-rank) {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pocket-auction-species-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pocket-auction-col-species > .pocket-pedigree-rank {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

.pocket-auction-col-sex {
    grid-area: sex;
    box-sizing: border-box;
    min-width: 0;
    text-align: center;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 1px 0;
    border-radius: 4px;
    background: var(--pocket-border);
    color: var(--pocket-text-secondary);
}

.pocket-auction-col-age {
    grid-area: age;
    min-width: 0;
    text-align: left;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    color: var(--pocket-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pocket-auction-col-house {
    grid-area: house;
    min-width: 0;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pocket-auction-col-price {
    grid-area: price;
    min-width: 0;
    text-align: right;
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* Whole-sale gross next to the sale name (owner 2026-09-30). */
.pocket-auction-sale-total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pocket-text-muted);
    margin-left: 6px;
}

/* One sale grouped by species + sex (owner 2026-09-30). A row opens to its lots. */
.pocket-auction-sale-meta {
    margin: 0 0 var(--pocket-space-sm);
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
}

.pocket-auction-groups {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--pocket-border-light);
}

.pocket-auction-group {
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-auction-group-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
        "species sex total"
        "meta meta trend";
    align-items: baseline;
    column-gap: var(--pocket-space-sm);
    row-gap: 2px;
    padding: var(--pocket-space-sm) 0;
    cursor: pointer;
    list-style: none;
}

.pocket-auction-group-row::-webkit-details-marker { display: none; }

.pocket-auction-group-species { grid-area: species; font-weight: 600; }
.pocket-auction-group-row .pocket-auction-col-sex { grid-area: sex; }
.pocket-auction-group-total {
    grid-area: total;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.pocket-auction-group-meta {
    grid-area: meta;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    font-variant-numeric: tabular-nums;
}
.pocket-auction-group-trend { grid-area: trend; justify-self: end; }

.pocket-auction-group-species::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    color: var(--pocket-text-muted);
    transition: transform 0.15s ease;
}
.pocket-auction-group[open] .pocket-auction-group-species::before { transform: rotate(90deg); }
.pocket-auction-group .pocket-auction-ledger { padding-left: 1em; }

/* Announced sales at the top of Auctions (owner 2026-09-30). */
.pocket-upcoming {
    margin-bottom: var(--pocket-space-md);
}
.pocket-upcoming-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "date name" ". context";
    column-gap: var(--pocket-space-sm);
    padding: var(--pocket-space-sm) 0;
    border-bottom: 1px solid var(--pocket-border-light);
}
.pocket-upcoming-row--link {
    color: inherit;
    text-decoration: none;
    min-height: var(--pocket-row-height);
}
.pocket-upcoming-row--link .pocket-upcoming-name { color: var(--pocket-active); }
.pocket-upcoming-row--link .pocket-upcoming-name::after { content: " \203A"; }
.pocket-upcoming-date { grid-area: date; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pocket-upcoming-name { grid-area: name; font-weight: 600; }
.pocket-upcoming-place { font-weight: 400; color: var(--pocket-text-muted); }
.pocket-upcoming-context {
    grid-area: context;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    font-variant-numeric: tabular-nums;
}
.pocket-upcoming-market {
    margin: 0 0 var(--pocket-space-xs);
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    font-variant-numeric: tabular-nums;
}

/* One row of the Auctions list: the sale (a link or plain) and, for a sold sale, its Analytics button
   (docs/features/AUCTIONS_ONE_LIST.md). */
.pocket-sale-row {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
}
.pocket-sale-row > .pocket-upcoming-row { flex: 1; min-width: 0; }
.pocket-sale-row > .pocket-herd-analytics-btn { flex-shrink: 0; align-self: center; }