/* What's my herd worth? (docs/features/HERD_WORTH.md, SPEC v5 and the owner's picker of 2026-10-16;
   templates/pocket/herd_worth.html). The header is the door's green hero (door.css); this sheet draws the badges,
   the total, the quick chips, the species table and the save block from the shared tokens. Every tap
   target is at least --pocket-target-min (SPEC § 9); figures use tabular numbers. */

.pocket-hw-sub {
    margin: 0 0 var(--pocket-space-md);
    color: var(--on-chrome);
    font-size: var(--pocket-font-size-lg);
}

.pocket-hw-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pocket-space-sm);
    margin: 0;
}

.pocket-hw-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--pocket-space-xs) var(--pocket-space-md);
    border-radius: var(--pocket-radius-lg);
    font-size: var(--pocket-font-size-sm);
    font-weight: 700;
}

.pocket-hw-badge-ped {
    background: var(--ped-bg);
    color: var(--ped);
}

.pocket-hw-badge-free {
    background: var(--up-bg);
    color: var(--up);
}

/* The page's shared colours, one declaration each: the hero's green blocks (the total and the Save button), the
   numeric figures, the quiet lines and the picked chip. */
.pocket-hw-total,
.pocket-hw-cta,
.pocket-hw-chip[aria-pressed="true"] {
    background: var(--door-deep);
    color: var(--on-chrome);
}

.pocket-hw-total-value,
.pocket-hw-value:not([data-unpriced]) b {
    font-family: var(--pocket-font-numeric);
}

.pocket-hw-remove,
.pocket-hw-chips-title,
.pocket-hw-table-head,
.pocket-hw-value small,
.pocket-hw-sales,
.pocket-hw-note,
.pocket-hw-ped p,
.pocket-hw-table-note,
.pocket-hw-fine {
    color: var(--pocket-text-secondary);
}

/* The rows' buttons are bare (pocket.css .pocket-bare-button), on the panel's own background. */
.pocket-hw-row-name {
    color: var(--pocket-text-primary);
}

.pocket-hw {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-md);
    font-variant-numeric: tabular-nums;
}

.pocket-hw-panel {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    box-shadow: var(--pocket-card-shadow);
    padding: var(--pocket-space-md);
    scroll-margin-top: var(--pocket-space-sm);
}

/* The herd total: the hero's green card, the figure large, head and species beside it. */
.pocket-hw-total {
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-lg);
}

.pocket-hw-total p {
    margin: 0;
}

.pocket-hw-total-label {
    opacity: 0.8;
    font-size: var(--pocket-font-size-sm);
}

.pocket-hw-total-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pocket-space-sm);
}

.pocket-hw-total-value {
    font-size: var(--pocket-font-size-hero);
    font-weight: 800;
    line-height: 1.1;
}

.pocket-hw-total-summary,
.pocket-hw-total-hint {
    font-size: var(--pocket-font-size-base);
}

.pocket-hw-total .pocket-hw-error {
    margin-top: var(--pocket-space-sm);
}

/* Loading: the figures fade while the server prices the herd (SPEC § 6). */
.pocket-hw.is-loading [data-hw-total],
.pocket-hw.is-loading [data-hw-value],
.pocket-hw.is-loading .pocket-hw-line b {
    opacity: 0.4;
}

/* The species search box is the shared one (pocket.css SPECIES SEARCH); here its text is the large size. */
.pocket-hw-panel .pocket-search-input {
    font-size: var(--pocket-font-size-lg);
}

.pocket-hw-chips-title {
    margin: var(--pocket-space-md) 0 var(--pocket-space-sm);
}

.pocket-hw-chips {
    gap: var(--pocket-space-sm);
}

/* A picked species: the hero's green with a check (SPEC § 4, species chip). */
.pocket-hw-chip[aria-pressed="true"] {
    border-color: var(--door-deep);
}

.pocket-hw-chip[aria-pressed="true"]::before {
    content: "\2713\00a0";
}

/* The species table: one row per species, name · bucks · does · value · remove, so 15 species fit about one
   screen at 390px. The name takes what the four fixed columns leave and wraps. */
.pocket-hw-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pocket-target-min) var(--pocket-target-min) 4.75rem var(--pocket-target-min);
    align-items: center;
    gap: var(--pocket-space-xs);
}

.pocket-hw-table-head {
    padding-bottom: var(--pocket-space-xs);
    border-bottom: 1px solid var(--pocket-border);
    font-size: var(--pocket-font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.pocket-hw-table-head span:nth-child(n+2) {
    text-align: center;
}

.pocket-hw-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pocket-hw-row {
    padding: 2px 0;
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-hw-row-name {
    min-height: var(--pocket-target-min);
    text-align: left;
    overflow-wrap: break-word;
}

.pocket-hw-row-name[aria-expanded="true"] {
    font-weight: 700;
}

/* The count boxes: three digits, no spin arrows (a tap opens the numeric keypad). */
.pocket-hw-count {
    width: 100%;
    min-width: 0;
    min-height: var(--pocket-target-min);
    padding: 0;
    text-align: center;
    font-weight: 700;
    appearance: textfield;
}

.pocket-hw-count::-webkit-inner-spin-button,
.pocket-hw-count::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pocket-hw-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.2;
}

.pocket-hw-value small {
    font-size: var(--pocket-font-size-xs);
}

/* A species we cannot value: its words, quiet, never $0. */
.pocket-hw-value[data-unpriced] b {
    font-size: var(--pocket-font-size-xs);
    font-weight: 500;
}

.pocket-hw-detail {
    padding: 0 0 var(--pocket-space-sm);
}

.pocket-hw-detail[hidden] {
    display: none;
}

.pocket-hw-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pocket-hw-line {
    display: flex;
    justify-content: space-between;
    gap: var(--pocket-space-sm);
    padding: var(--pocket-space-xs) 0;
    font-size: var(--pocket-font-size-sm);
}

.pocket-hw-line[data-unpriced] b {
    color: var(--pocket-text-muted);
    font-weight: 500;
}

.pocket-hw-sales,
.pocket-hw-note,
.pocket-hw-ped p,
.pocket-hw-table-note {
    margin: var(--pocket-space-xs) 0 0;
    font-size: var(--pocket-font-size-sm);
}

.pocket-hw-table-note {
    margin-top: var(--pocket-space-sm);
}

.pocket-hw-save,
.pocket-hw-import {
    margin: 0;
}

.pocket-hw-cta {
    width: 100%;
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
}

.pocket-hw-cta:active {
    background: var(--door-green);
}

/* Muted until the herd has a head, still tappable: a tap goes back to the search (SPEC § 4, CTA). */
.pocket-hw-cta[aria-disabled="true"] {
    opacity: 0.55;
}

.pocket-hw-fine {
    margin: 0;
    text-align: center;
    font-size: var(--pocket-font-size-sm);
}

/* The import link stays prominent: the big-herd rancher's way in (owner 2026-10-16). */
.pocket-hw-import-link {
    display: block;
    width: 100%;
    min-height: var(--pocket-target-min);
    font-size: var(--pocket-font-size-lg);
    font-weight: 700;
}