/**
 * Phone Prices list (/m/prices): price-row identity and M/F cells,
 * empty-price notes, My Herd hint, tip of the day.
 *
 * Loaded by pocket/prices.html through {% block page_css %}, right after
 * pocket.css. Tokens, chrome, chips, filter/sort menus stay in pocket.css.
 */

/* Left side: Identity (name + star + cue) */
.pocket-price-name,
.pocket-ledger-identity {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    flex: 1;
    min-width: 0;
}

/* Sale count and date cue (48 sales · last Sep 12). Each part stays on one line. */
.pocket-nowrap {
    white-space: nowrap;
}

.pocket-price-cue {
    display: block;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    margin-top: 1px;
}

.pocket-price-identity {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* One grid for every row so the M and F columns line up down the page:
   name | M | F | star. The values wrapper dissolves into the grid.
   Top-aligned, so the name's first line, M and F share one line even when a
   24mo badge or stale mark makes one sex cell taller (Bongo M vs F). */
.pocket-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(82 * var(--pocket-unit)) calc(82 * var(--pocket-unit)) 32px;
    column-gap: var(--pocket-space-sm);
    align-items: start;
}

.pocket-price-values,
.pocket-ledger-values {
    display: contents;
}

.pocket-price-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.pocket-price-label {
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pocket-text-muted);
}

/* Hammer / median amounts. Ink, not a gain color. */
.pocket-price-amount {
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

/* The favorite star is the row link's sibling, drawn over the row's last (empty) track, at its edge and
   out of the reading path. Its right offset and the row grid's last track (32px, 28px at 360px) are one
   placement: change them together. */
.pocket-price-item {
    position: relative;
}

.pocket-price-item .pocket-star-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--pocket-space-lg) - 8px);
    margin: auto 0;
    height: var(--pocket-target-min);
}

/* 24-mo list badge under the sex amount. Hidden by the 5% gate in the partial. */
.pocket-price-cell .pocket-price-change {
    margin-top: 2px;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    line-height: 1.2;
    padding: 1px 4px;
    white-space: nowrap;
}

/* Sex-colored labels (not amounts) */
.pocket-price-male .pocket-price-label {
    color: var(--pocket-male);
}

.pocket-price-female .pocket-price-label {
    color: var(--pocket-female);
}

/* Smaller phones */
@media (max-width: 360px) {
    .pocket-price-row {
        grid-template-columns: minmax(0, 1fr) calc(74 * var(--pocket-unit)) calc(74 * var(--pocket-unit)) 28px;
    }
}

.pocket-my-herd-hint {
    margin: -8px 0 var(--pocket-space-lg);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
}

.pocket-inline-error {
    margin: 0 0 var(--pocket-space-lg);
    padding: var(--pocket-space-md);
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger-ink);
    font-size: var(--pocket-font-size-sm);
}

/* Missing M/F price: one dash plus a one-line note. Do not wrap a sentence. */
.pocket-price-empty-note {
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--pocket-text-muted);
}

.pocket-price-empty-hint {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--pocket-text-muted);
}