/**
 * Pedigree display kit: sire-horn medal, own-horn star, horn mark, and the
 * label and heading rows that hold them. Markup comes only from
 * templates/_pedigree_kit.html; callers pass tier_rank, span, and below.
 *
 * pocket/base.html links this sheet right after pocket.css and before
 * {% block page_css %}, so page sheets that place a mark (flex slot, margin,
 * box size) still load after it and win on placement. A page sheet must not
 * restyle a mark's look (color, fill, stroke); change that here.
 * tests/test_pedigree_kit_wall.py holds both lines.
 *
 * Desktop pages do not load this sheet. Desktop My Herd and comps size the
 * medal in custom.css and comps-table.css.
 */

/* Sire-horn tiers. Only rendered when the sample is adequate.
   The horn mark is the pedigree icon. Span is visual length, not a price. */
.pocket-pedigree-horn {
    display: inline-block;
    width: 16px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--pocket-active);
    vertical-align: -2px;
}

.pocket-pedigree-horn[data-span="1"] {
    width: 12px;
}

.pocket-pedigree-horn[data-span="3"] {
    width: 22px;
}

/* Medal and horn stay on one line. The label text wraps inside the
   cell so a long under-cutoff row cannot widen the phone.
   Keep beside the kit: the is-below/is-gold/is-silver horn colors below
   must override this label's horn color. */
.pocket-pedigree-label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pocket-pedigree-label .pocket-pedigree-horn {
    margin: 0;
    flex: 0 0 auto;
    color: var(--pocket-text-primary);
}

.pocket-pedigree-label .pocket-pedigree-rank {
    margin: 0;
    flex: 0 0 auto;
}

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

.pocket-pedigree-horn.is-below,
.pocket-pedigree-below-cutoff .pocket-pedigree-horn {
    color: var(--pocket-text-muted);
}

/* Top named tier is gold, the next is silver. Literal metal, not ink gray. */
.pocket-pedigree-horn.is-gold {
    color: var(--gold);
}

.pocket-pedigree-horn.is-silver {
    color: var(--silver);
}

.pocket-pedigree-rank {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: -3px;
    flex: 0 0 auto;
}

/* ==========================================================================
   PEDIGREE SECTION HEADING (price detail graph label, lot section title)
   ========================================================================== */
.pocket-graph-label.pocket-pedigree-heading,
.pocket-lot-section-title.pocket-pedigree-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Heading plus the ? disclosure. Shared by the price-card table and the
   lot pedigree box. The panel anchors to this row so it spans the card
   and overlays the content under it. */
.pocket-pedigree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    position: relative;
    margin-bottom: 4px;
}

.pocket-pedigree-head > .pocket-graph-label,
.pocket-pedigree-head > .pocket-lot-section-title {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.pocket-pedigree-help {
    flex: 0 0 auto;
}

.pocket-pedigree-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--pocket-border-light);
    border-radius: var(--pocket-radius-full);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-muted);
    font-size: var(--pocket-font-size-sm);
    font-weight: 700;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

.pocket-pedigree-help-btn::-webkit-details-marker {
    display: none;
}

.pocket-pedigree-help-btn::marker {
    content: "";
}

.pocket-pedigree-help-panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    box-sizing: border-box;
    max-width: 100%;
    padding: 8px 10px;
    background: var(--pocket-card-bg);
    border: 1px solid var(--pocket-border-light);
    border-radius: var(--pocket-radius-md);
    box-shadow: var(--pocket-shadow-md);
    font-size: var(--pocket-font-size-sm);
    line-height: 1.35;
    color: var(--pocket-text-primary);
    overflow-wrap: anywhere;
}

.pocket-pedigree-help-panel p {
    margin: 0 0 6px;
}

.pocket-pedigree-help-panel p:last-child {
    margin-bottom: 0;
}

.pocket-pedigree-help-label {
    font-weight: 700;
}

/* Section heading inside the ? panel; the first one sits flush. */
.pocket-pedigree-help-panel .pocket-pedigree-help-label {
    margin: 10px 0 4px;
    font-size: var(--pocket-font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pocket-text-muted);
}

.pocket-pedigree-help-panel .pocket-pedigree-help-label:first-child {
    margin-top: 0;
}

/* Icon key: the real mark in a fixed column, the words beside it. */
.pocket-pedigree-help-key,
.pocket-pedigree-help-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pocket-pedigree-help-key li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.pocket-pedigree-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 40px;
    min-height: 18px;
}

.pocket-pedigree-help-icon .pocket-pedigree-rank {
    margin-right: 2px;
    vertical-align: middle;
}

.pocket-pedigree-help-list li {
    position: relative;
    padding: 2px 0 2px 14px;
}

.pocket-pedigree-help-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.75em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pocket-text-muted);
}