/**
 * Phone lot detail (/m/lots/<id>): lot hero, field list, pedigree block,
 * origin. My Herd animal detail reuses the same hero and field list, so
 * pocket/my_herd_detail.html links this sheet too.
 *
 * Loaded through {% block page_css %}, right after pocket.css.
 */

.pocket-lot-price-amount .price-stale-mark {
    text-align: center;
}

/* Hero reads like a sale ticket: label, hammer, then the facts in chips.
   Left-aligned so the number and the title share one edge. */
.pocket-lot-hero {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-lg) var(--pocket-space-xl);
    margin-bottom: var(--pocket-space-lg);
    box-shadow: var(--pocket-card-shadow);
    border-left: 4px solid var(--pocket-active);
}

.pocket-lot-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pocket-space-xs);
}

.pocket-lot-meta-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pocket-bg);
    color: var(--pocket-text-secondary);
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.pocket-lot-hero-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: var(--pocket-space-sm) 0 0;
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

.pocket-lot-hero-tier .pocket-pedigree-rank {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* The field list is folded: the page leads with the answer. */
.pocket-lot-fold-summary {
    cursor: pointer;
    margin: 0;
    padding-block: 12px;
    display: list-item;
}

.pocket-lot-fold[open] .pocket-lot-fold-summary {
    margin-bottom: var(--pocket-space-sm);
}


.pocket-lot-price-label {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pocket-lot-price-amount {
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pocket-lot-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pocket-space-sm);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    margin-top: var(--pocket-space-xs);
}

.pocket-lot-details {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-md);
    margin-bottom: var(--pocket-space-xl);
}

.pocket-lot-section {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-lg);
    box-shadow: var(--pocket-card-shadow);
}

.pocket-lot-section-title {
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pocket-text-muted);
    margin: 0 0 var(--pocket-space-md) 0;
}

.pocket-lot-pedigree {
    border-left: 4px solid var(--pocket-border);
    background: var(--pocket-card-bg);
}

.pocket-lot-pedigree-text {
    font-size: var(--pocket-font-size-base);
    line-height: 1.6;
    color: var(--pocket-text-primary);
    margin: 0;
}

.pocket-lot-pedigree-tier {
    margin-top: var(--pocket-space-sm);
    padding-top: var(--pocket-space-sm);
    border-top: 1px solid var(--pocket-border-light);
}

.pocket-lot-pedigree-tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--pocket-space-md);
    min-width: 0;
}

.pocket-lot-pedigree-tier-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

.pocket-lot-pedigree-tier-value > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pocket-lot-pedigree-tier-value .pocket-pedigree-rank,
.pocket-lot-pedigree-tier-value .pocket-pedigree-horn {
    flex: 0 0 auto;
    margin: 0;
}

.pocket-lot-pedigree-tier-note {
    margin: 4px 0 0;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    text-align: right;
}

/* Own / bred-to horn: label-value rows, never a tier. Own horn may carry a star. */
.pocket-lot-horn-roles {
    gap: 0;
    min-width: 0;
}

.pocket-lot-own-horn-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pocket-lot-own-horn-value .pocket-pedigree-rank {
    flex: 0 0 16px;
    margin: 0;
}

/* Horn rows that open /m/pedigree (pocket/_pedigree_page_link.html).
   Lot detail and My Herd detail both load this sheet. */
.pocket-pedigree-page-link {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    min-height: var(--pocket-target-min);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.pocket-pedigree-page-link:focus-visible {
    border-radius: var(--pocket-radius-sm);
}

.pocket-pedigree-page-link .pocket-lot-field-value {
    margin-left: auto;
}

/* Chevron in CSS, not markup, so the row's text (and aria-label) stay the row value. */
.pocket-pedigree-page-link::after {
    content: "\203A";
    flex: 0 0 auto;
    font-size: var(--pocket-font-size-lg);
    line-height: 1;
    color: var(--pocket-active);
}

/* Own horn sits above the sire tier. A lineage sentence above the horn
   rows keeps a divider; the tier's own border splits it from the rows. */
.pocket-lot-pedigree-text + .pocket-lot-horn-roles {
    margin-top: var(--pocket-space-sm);
    border-top: 1px solid var(--pocket-border-light);
}

.pocket-lot-description-text {
    font-size: var(--pocket-font-size-sm);
    line-height: 1.6;
    color: var(--pocket-text-secondary);
    margin: 0;
}

.pocket-lot-fields {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-sm);
}

.pocket-lot-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-sm) 0;
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-lot-field:last-child {
    border-bottom: none;
}

.pocket-lot-field-label {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
}

.pocket-lot-field[data-field="pedigree"] .pocket-pedigree-rank {
    margin-right: 4px;
    vertical-align: -3px;
    flex: 0 0 16px;
}

.pocket-lot-missing {
    color: var(--pocket-text-muted);
    font-weight: 400;
    font-style: italic;
}

.pocket-lot-age-cue {
    margin: -4px 0 8px;
    font-size: var(--pocket-font-size-xs);
    font-style: italic;
    color: var(--pocket-text-muted);
    text-align: right;
}

.pocket-lot-price-amount.pocket-lot-missing {
    font-size: var(--pocket-font-size-xl);
    font-weight: 500;
}

/* A mixed lot's or a package's head-group lines: one block under its heading, no paragraph gaps. */
.pocket-estimate-lines {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-xs);
    margin-top: var(--pocket-space-sm);
}

.pocket-lot-per-head {
    font-size: var(--pocket-font-size-base);
    color: var(--pocket-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pocket-lot-origin {
    border-left: 4px solid var(--pocket-header-bg);
}

.pocket-lot-origin-name,
.pocket-lot-origin-text {
    margin: 0;
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    color: var(--pocket-text-primary);
    line-height: 1.3;
}

.pocket-lot-origin-place {
    margin: var(--pocket-space-xs) 0 0 0;
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

.pocket-lot-origin-text.pocket-lot-missing {
    font-size: var(--pocket-font-size-base);
    font-weight: 400;
}

/* Share and Appraise. Half of a 390px row stays above the 44px tap floor. */
.pocket-detail-actions .pocket-btn {
    flex: 1 1 0;
    min-width: var(--pocket-target-min);
    min-height: var(--pocket-target-min);
    line-height: 1.2;
}

/* Price estimate box (templates/pocket/_price_estimate.html). */
.pocket-price-estimate-value {
    font-size: var(--pocket-font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.pocket-price-estimate-range {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
    margin: var(--pocket-space-xs) 0;
}

.pocket-price-estimate-comps summary {
    cursor: pointer;
    font-size: var(--pocket-font-size-sm);
    margin-top: var(--pocket-space-xs);
    /* 44px tall and still a list-item, so the disclosure triangle stays. */
    display: list-item;
    padding-block: 12px;
}

/* Horn potential worked example (templates/pocket/_lot_pedigree.html). */
.pocket-horn-potential {
    margin: var(--pocket-space-xs) 0 var(--pocket-space-sm);
    padding: var(--pocket-space-sm);
    border-radius: var(--pocket-radius-md, 8px);
    background: var(--surface-muted);
}

.pocket-horn-potential-headline {
    margin: 0 0 var(--pocket-space-xs);
    font-weight: 700;
}

.pocket-horn-potential-steps {
    margin: 0;
    padding-left: 1.2rem;
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

.pocket-horn-potential-steps li + li {
    margin-top: 2px;
}

.pocket-price-estimate-note {
    text-align: left;
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
    margin: var(--pocket-space-xs) 0;
}

.pocket-price-estimate-floor {
    color: var(--pocket-text-primary);
    font-weight: 600;
}


/* Which kind of page this is (owner 2026-09-29): the hero's left rule follows the
   kind toolbar's kind (services/pocket/nav.py). */
.pocket-detail[data-context="lot"] .pocket-lot-hero { border-left-color: var(--kind-lot); }
.pocket-detail[data-context="yours"] .pocket-lot-hero { border-left-color: var(--kind-yours); }
.pocket-detail[data-context="shared"] .pocket-lot-hero { border-left-color: var(--kind-shared); }
.pocket-detail[data-context="sample"] .pocket-lot-hero { border-left-color: var(--kind-sample); }

.pocket-lot-vs-typical {
    margin: 0;
    margin-top: var(--pocket-space-xs);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

/* Origin ranch name opens the ranch page (/m/ranches/<slug>). */
.pocket-lot-origin-link { color: var(--pocket-active); text-decoration: none; }