/**
 * Shared sold-lot comps table.
 *
 * One stylesheet for every surface that lists comparable sales
 * (mobile Prices / Appraise and desktop Animal Appraisal).
 * Tokens fall back to the pocket palette so desktop pages that do
 * not load pocket.css still match the dense PR #90 layout:
 * badge 20px | price 65px | details (house, then age/ranch), nowrap.
 * A pedigree medal sits in a fixed 16px slot at the start of the
 * details track. A blank rank keeps the same empty slot so the icons
 * share one vertical line. It is not a fourth grid column.
 *
 * Vertical size follows the text. A 44px content-box min-height plus
 * 8px padding used to paint ~61px rows with empty bands above and
 * below the two detail lines. Desktop body line-height is 1.7, so
 * the row sets its own leading.
 *
 * The fallback tokens below are for desktop pages only. This sheet loads
 * after pocket.css on every pocket page, so a :root block here silently
 * replaced the pocket type scale and grays (UX audit 2026-09-29: 42% of
 * phone text stayed 11px after the scale moved to 13px). Scoping them to
 * body:not(.pocket) leaves pocket.css the only source on phone pages.
 */

body:not(.pocket) {
    --pocket-card-bg: #ffffff;
    --pocket-text-secondary: #5c6660;
    --pocket-text-muted: #6b6b6b;
    --pocket-border-light: #f0f0f0;
    --pocket-green: var(--color-delta-up, #2e7d32);
    --pocket-active: #00695c;
    --pocket-male: var(--color-sex-male, #1565c0);
    --pocket-male-bg: var(--color-sex-male-bg, #e3f2fd);
    --pocket-female: var(--color-sex-female, #c2185b);
    --pocket-female-bg: var(--color-sex-female-bg, #fce4ec);
    --pocket-mixed: var(--color-sex-mixed, #e67e22);
    --pocket-mixed-bg: var(--color-sex-mixed-bg, #fff3e0);
    --pocket-bg: #f8f8f8;
    --pocket-space-xs: 4px;
    --pocket-space-sm: 8px;
    --pocket-space-md: 12px;
    --pocket-font-size-xs: 13px;
    --pocket-font-size-sm: 15px;
    --pocket-radius-sm: 6px;
    --pocket-radius-lg: 12px;
    --pocket-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pocket-card-radius: var(--pocket-radius-lg);
    --pocket-card-shadow: var(--pocket-shadow-md);
}

.pocket-comps-section {
    margin-bottom: var(--pocket-space-md);
}

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

.pocket-comps-see-all {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-active);
    font-weight: 500;
    text-decoration: none;
}

.pocket-comps-list {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    overflow: hidden;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-comp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-bottom: 1px solid var(--pocket-border-light);
    font-size: var(--pocket-font-size-sm);
    line-height: 1.15;
    min-height: 0;
    box-sizing: border-box;
}

.pocket-comp-row:last-child {
    border-bottom: none;
}

a.pocket-comp-row,
a.pocket-comp-row:hover,
a.pocket-comp-row:focus {
    color: inherit;
    text-decoration: none;
}

a.pocket-comp-row:hover,
a.pocket-comp-row:focus {
    background: var(--pocket-border-light);
}

.pocket-comp-sex {
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 4px;
    border-radius: var(--pocket-radius-sm);
    min-width: 18px;
    line-height: 1.15;
    text-align: center;
}

.pocket-comp-sex.pocket-sex-male {
    background: var(--pocket-male-bg);
    color: var(--pocket-male);
}

.pocket-comp-sex.pocket-sex-female {
    background: var(--pocket-female-bg);
    color: var(--pocket-female);
}

.pocket-comp-sex.pocket-sex-mixed {
    background: var(--pocket-mixed-bg);
    color: var(--pocket-mixed);
}

.pocket-comp-price {
    font-weight: 600;
    color: var(--ink);
}

.pocket-comp-house {
    color: var(--pocket-text-muted);
    font-size: var(--pocket-font-size-sm);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

/* Dense grid: one row per lot. Badge | price | house/age/ranch.
   Padding is vertical-then-horizontal. min-height 0 overrides the
   content-box floor so padding cannot stack into an empty band.
   The medal is a flex item in the details track, not a grid column. */
.pocket-comps-dense .pocket-comp-row,
.pocket-comp-row.pocket-comp-dense {
    display: grid;
    grid-template-columns: 20px 65px 1fr;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: var(--pocket-font-size-xs, 13px);
    line-height: 1.15;
    min-height: 0;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

.pocket-comp-dense .pocket-comp-sex {
    font-size: var(--pocket-font-size-xs, 13px);
    padding: 0 3px;
    line-height: 1.15;
    min-width: 16px;
    max-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.pocket-comp-dense .pocket-comp-price {
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pocket-comp-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
}

/* Fixed slot. justify-content flex-end used to pack this against the
   house text, so a longer ranch shoved the medal sideways. */
.pocket-comp-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* House over age/ranch. flex-grow fills the track so the medal slot
   stays at the leading edge on every row. */
.pocket-comp-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 1 1 auto;
    line-height: 1.15;
}

.pocket-comp-dense .pocket-comp-house {
    font-size: var(--pocket-font-size-xs, 13px);
    color: var(--pocket-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pocket-comp-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    font-size: var(--pocket-font-size-xs, 13px);
    line-height: 1.15;
    color: var(--pocket-text-muted);
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.pocket-comp-age {
    color: var(--pocket-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    width: 4.6rem;
    min-width: 4.6rem;
    max-width: 4.6rem;
    text-align: right;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Asterisk marks a notes cue. It is not the stored age column. */
.pocket-age-from-notes {
    font-style: italic;
    font-weight: 500;
}

.pocket-comp-ranch {
    color: var(--pocket-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    text-align: right;
}

.pocket-comps-page-info {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
}

.pocket-comps-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    background: var(--pocket-bg);
    border-top: 1px solid var(--pocket-border-light);
}

/* Desktop appraisal expands this list inside a table cell. */
.detail-container .detail-comps-list {
    margin: 0 0.5rem;
}

/* The expanded appraisal cell pads 0.75rem, .breakdown-table td
   pads 0.4em, then .detail-container pads another 0.75rem.
   appraisal-modal.css loads after this file, so the cell rule
   has to outrank .breakdown-table td. Collapse vertical inset only. */
.breakdown-table .detail-row > td,
.detail-row > td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.15;
}

.detail-row > td > .detail-container {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 360px) {
    .pocket-comps-dense .pocket-comp-row,
    .pocket-comp-row.pocket-comp-dense {
        grid-template-columns: 18px 55px 1fr;
        gap: 4px;
        padding: 2px 6px;
        font-size: var(--pocket-font-size-xs, 13px);
        line-height: 1.15;
    }

    .pocket-comp-dense .pocket-comp-sex {
        font-size: var(--pocket-font-size-xs, 13px);
        padding: 0 2px;
        min-width: 14px;
        max-width: 18px;
    }

    .pocket-comp-dense .pocket-comp-price {
        font-size: var(--pocket-font-size-xs, 13px);
    }

    .pocket-comp-dense .pocket-comp-house {
        font-size: var(--pocket-font-size-xs, 13px);
    }

    .pocket-comp-meta {
        font-size: var(--pocket-font-size-xs, 13px);
        gap: 3px;
    }

    .pocket-comp-age {
        width: 4.2rem;
        min-width: 4.2rem;
        max-width: 4.2rem;
    }
}

/* Same medal as the pedigree price table. Sized here so desktop comps,
   which do not load pocket.css, stay 16px. Block display drops the
   inline baseline gap that would stretch the row. */
.pocket-comp-row .pocket-pedigree-rank {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    align-self: center;
}

/* Phone rows (owner 2026-09-29: "small text"): 15px body, 17px price; two
   text lines plus padding already clear a fingertip. Desktop appraisal
   keeps the dense 13px rows above. */
body.pocket .pocket-comp-row.pocket-comp-dense {
    grid-template-columns: 24px 88px 1fr;
    gap: 8px;
    padding: 8px 10px;
    font-size: var(--pocket-font-size-sm, 15px);
    line-height: 1.2;
}

body.pocket .pocket-comp-dense .pocket-comp-price {
    font-size: var(--pocket-font-size-base, 17px);
    font-family: var(--pocket-font-numeric);
    font-weight: 700;
}

body.pocket .pocket-comp-dense .pocket-comp-sex {
    font-size: var(--pocket-font-size-xs, 13px);
    min-width: 24px;
    max-width: 24px;
    padding: 2px 0;
    border-radius: 6px;
}

body.pocket .pocket-comp-dense .pocket-comp-house,
body.pocket .pocket-comp-meta,
body.pocket .pocket-comp-age {
    font-size: var(--pocket-font-size-sm, 15px);
    line-height: 1.2;
}

body.pocket .pocket-comp-age {
    width: 5.2rem;
    min-width: 5.2rem;
    max-width: 5.2rem;
}