/* Starter exotics (docs/features/STARTER_SETS.md): the set card (templates/pocket/_starter_set_card.html) on the door's
   Buy state and the sets list, and one set's page (templates/pocket/starter_set.html). Cards are the door's deep green
   with the photo on top and the total in gold, as the S1–S3 mockup; --door-* tokens are fills here, text on paper
   reads the theme's text tokens (tests/test_pocket_contrast.py). */

.pocket-starter {
    --starter-photo-ratio: 16 / 7;
    margin: var(--pocket-space-lg) 0;
}

.pocket-starter-eyebrow {
    letter-spacing: 0.14em;
    color: var(--pocket-text-secondary);
}

.pocket-starter-title {
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
    line-height: 1.05;
    margin: 0 0 var(--pocket-space-sm);
    text-wrap: balance;
}

.pocket-starter-lead {
    color: var(--pocket-text-secondary);
    margin: 0 0 var(--pocket-space-md);
}

/* The card: photo, then the name with its gold total, the species line, the fence and head badges, the blurb. */
.pocket-starter-card {
    display: block;
    overflow: hidden;
    margin: 0 0 var(--pocket-space-md);
    border-radius: var(--pocket-radius-lg);
    background: var(--door-deep);
    color: var(--on-chrome);
    text-decoration: none;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-starter-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--starter-photo-ratio);
    object-fit: cover;
    background: var(--door-panel);
}

.pocket-starter-card-body {
    padding: var(--pocket-space-md) var(--pocket-space-lg) var(--pocket-space-lg);
}

.pocket-starter-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pocket-space-md);
}

.pocket-starter-name {
    margin: 0;
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-xl);
    font-weight: 700;
    color: var(--on-chrome);
}

.pocket-starter-total {
    font-family: var(--pocket-font-numeric);
    font-size: var(--pocket-font-size-xl);
    color: var(--door-gold-fig);
    white-space: nowrap;
}

.pocket-starter-total.pocket-starter-unpriced {
    font-size: var(--pocket-font-size-sm);
    color: var(--on-chrome);
}

.pocket-starter-species,
.pocket-starter-blurb {
    margin: var(--pocket-space-xs) 0 0;
    font-size: var(--pocket-font-size-sm);
    color: var(--on-chrome);
    opacity: 0.85;
}

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

.pocket-starter-badge {
    padding: 2px 10px;
    border-radius: var(--pocket-radius-full);
    background: var(--door-panel);
    font-size: var(--pocket-font-size-xs);
    font-weight: 700;
}

.pocket-starter-badge[data-fence="low"] {
    background: var(--door-green);
}

.pocket-starter-badge[data-fence="high"] {
    background: var(--door-gold);
    color: var(--door-gold-ink);
}

/* The door's way to every set: a gold-edged button. */
.pocket-starter-all {
    display: block;
    padding: var(--pocket-space-md);
    border: 2px solid var(--door-gold);
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* One set's page: the photo edge to edge with its caption, the big total, the lines card, the fact rows. */
.pocket-starter-hero {
    position: relative;
    margin: 0 calc(-1 * var(--pocket-space-lg)) var(--pocket-space-md);
}

.pocket-starter-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--starter-photo-ratio);
    object-fit: cover;
}

.pocket-starter-hero figcaption {
    position: absolute;
    right: var(--pocket-space-sm);
    bottom: var(--pocket-space-sm);
    padding: 1px 8px;
    border-radius: var(--pocket-radius-full);
    background: var(--door-track);
    color: var(--on-chrome);
    font-size: var(--pocket-font-size-xs);
    opacity: 0.85;
}

.pocket-starter-big {
    margin: 0;
    font-family: var(--pocket-font-numeric);
    font-size: var(--pocket-font-size-hero);
    font-weight: 700;
    line-height: 1.1;
    color: var(--up);
}

.pocket-starter-big.pocket-starter-unpriced {
    font-size: var(--pocket-font-size-xl);
    color: var(--pocket-text-secondary);
}

.pocket-starter-total-note {
    margin: 0 0 var(--pocket-space-md);
    color: var(--pocket-text-secondary);
}

.pocket-starter-lines {
    padding: var(--pocket-space-xs) var(--pocket-space-lg) var(--pocket-space-md);
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-card-bg);
    box-shadow: var(--pocket-card-shadow);
}

.pocket-starter-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-md) 0;
    border-bottom: 1px solid var(--pocket-border);
    color: var(--pocket-text-primary);
    text-decoration: none;
}

.pocket-starter-line small {
    display: block;
    margin-top: 2px;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-secondary);
}

.pocket-starter-line-total {
    font-family: var(--pocket-font-numeric);
    font-size: var(--pocket-font-size-lg);
    white-space: nowrap;
}

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

.pocket-starter-facts {
    margin: var(--pocket-space-lg) 0;
}

.pocket-starter-fact {
    padding: var(--pocket-space-sm) 0;
    border-bottom: 1px solid var(--pocket-border);
}

.pocket-starter-fact p {
    margin: var(--pocket-space-xs) 0 0;
    color: var(--pocket-text-secondary);
}

.pocket-starter-fact .pocket-starter-fact-head {
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: var(--pocket-text-primary);
}

.pocket-starter-fact-head span {
    font-weight: 700;
    color: var(--up);
}