/**
 * Phone price detail (/m/prices/<id>): M/F appraisal cards, hero median,
 * stats, sire-horn tier table, price-history graph.
 *
 * Loaded by pocket/price_detail.html through {% block page_css %}, right
 * after pocket.css and pedigree-kit.css. The medal, horn, and tier label
 * row come from pedigree-kit.css because auctions, lots, and My Herd draw
 * them too.
 */

/* Appraise cards - tighter vertical spacing for mobile */
.pocket-appraise-cards {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-md);
    min-width: 0;
    max-width: 100%;
}

.pocket-appraise-card {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    box-shadow: var(--pocket-card-shadow);
    /* Column flex item. min-width:auto would lock the card to the
       pedigree table's one-line width and scroll the phone sideways. */
    min-width: 0;
    max-width: 100%;
}

.pocket-appraise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pocket-space-sm);
}

.pocket-appraise-sales {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

.pocket-appraise-card-empty .summary-window-empty,
.pocket-empty .summary-window-empty {
    margin: 0.35rem 0 0.15rem;
    text-align: center;
    color: var(--pocket-text-secondary);
    font-size: var(--pocket-font-size-sm);
    line-height: 1.4;
}

/* Hero median: a sale ticket, left-aligned like the lot page. */
.pocket-appraise-hero {
    text-align: left;
    padding: var(--pocket-space-sm) 0;
    margin-bottom: var(--pocket-space-sm);
}

.pocket-appraise-hero .pocket-stale-note {
    text-align: left;
}

.pocket-appraise-hero-label {
    display: block;
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pocket-text-secondary);
    margin-bottom: 2px;
}

.pocket-appraise-hero-value {
    display: block;
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.pocket-appraise-hero .pocket-price-change {
    font-size: var(--pocket-font-size-sm);
    margin-top: var(--pocket-space-xs);
}

/* Low to high bar under the typical price. */
.pocket-appraise-range {
    padding-bottom: var(--pocket-space-sm);
}

.pocket-appraise-range .pocket-range-bar {
    margin-top: var(--pocket-space-xs);
}

/* Stats row (legacy): Low · High · n · Last */
.pocket-appraise-stats {
    display: flex;
    justify-content: space-between;
    gap: var(--pocket-space-xs);
    padding-top: var(--pocket-space-sm);
    border-top: 1px solid var(--pocket-border-light);
}

.pocket-appraise-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.pocket-appraise-stat-label {
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: var(--pocket-text-muted);
}

.pocket-appraise-stat-value {
    font-family: var(--pocket-font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
    color: var(--pocket-text-primary);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pocket-pedigree-prices {
    margin-top: var(--pocket-space-sm);
    padding-top: var(--pocket-space-sm);
    border-top: 1px solid var(--pocket-border-light);
    min-width: 0;
    max-width: 100%;
}

.pocket-pedigree-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--pocket-font-size-sm);
}

/* Three columns: Horn | Typical price | Sales. Cells stay table cells
   (a flex <td> breaks column alignment); the flex row lives in a div
   inside the horn cell. Price and sales never wrap; the horn column
   takes the rest and wraps its own lines. */
.pocket-pedigree-col-price {
    width: calc(104 * var(--pocket-unit));
}

.pocket-pedigree-col-sales {
    width: calc(52 * var(--pocket-unit));
}

.pocket-pedigree-table th {
    text-align: left;
    font-weight: 600;
    color: var(--pocket-text-muted);
    padding: 2px 4px 4px 0;
    box-sizing: border-box;
}

.pocket-pedigree-table td {
    padding: 8px 4px 8px 0;
    border-top: 1px solid var(--pocket-border-light);
    vertical-align: top;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.pocket-pedigree-table .pocket-pedigree-label .pocket-pedigree-horn,
.pocket-pedigree-table .pocket-pedigree-label .pocket-pedigree-rank {
    align-self: flex-start;
}

.pocket-pedigree-sub {
    margin-top: 2px;
    color: var(--pocket-text-muted);
    font-size: var(--pocket-font-size-xs);
    overflow-wrap: break-word;
}

.pocket-pedigree-sub.pocket-pedigree-own {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pocket-pedigree-table .num {
    text-align: right;
    font-family: var(--pocket-font-numeric);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow-wrap: normal;
}

.pocket-pedigree-below-cutoff td {
    color: var(--pocket-text-secondary);
    font-style: italic;
}

.pocket-price-graph {
    margin-top: var(--pocket-space-md);
    padding: var(--pocket-space-sm) 0 0;
    border-top: 1px solid var(--pocket-border-light);
}

.pocket-graph-label {
    display: block;
    font-size: var(--pocket-font-size-xs, 13px);
    color: var(--pocket-text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-history-sparkline {
    width: 100%;
    height: 40px;
    color: var(--pocket-active);
}

.pocket-price-graph-empty {
    opacity: 0.6;
}

.pocket-price-graph-empty .pocket-graph-label {
    font-style: italic;
}

/* One accent for every trend line, same as the herd value chart. */
.price-history-with-axis {
    height: 72px;
    width: 100%;
}

.price-axis-label {
    font-size: var(--pocket-font-size-xs, 13px);
    fill: var(--pocket-text-muted);
    font-family: var(--pocket-font-family, -apple-system, BlinkMacSystemFont, sans-serif);
}

.price-axis-line {
    stroke: var(--pocket-border);
}

/* Adjust sparkline container for axis */
.pocket-price-graph .price-history-with-axis {
    margin-left: -5px;
}

/* Number face (design direction 2026-09-29): the hero value lines up with the ledger. */
.pocket-appraise-hero-value {
    font-family: var(--pocket-font-numeric);
    font-variant-numeric: tabular-nums;
}