/* The landing door (docs/features/LANDING_DOOR.md goal 1; templates/pocket/door.html), drawn as the owner-approved v2
   mockup (docs/ux/LANDING_DOOR door_v2): an edge-to-edge green hero, square on top and rounded at the bottom, that
   carries the page's own name bar; a dark toggle track with the gold lit tab; a tall search field with its
   magnifier; two-line chips (the name over one sex's price); the ticker panel; then the next-sale ask. Colours are
   the --door-* tokens (static/css/tokens.css). */

.pocket-main:has(.pocket-door-hero) {
    /* The green starts at the top of the page: no paper above the name bar. */
    padding-top: 0;
}

/* The app's status-bar strip is the hero's green on the door. */
.pocket:has(.pocket-door-hero)::before {
    background: var(--door-deep);
}

/* The page's root head (the RAFIKI name and the ⋮ menu) sits on the hero's green, edge to edge. */
.pocket-main:has(.pocket-door-hero) .pocket-root-head {
    margin: 0 calc(-1 * var(--pocket-space-lg));
    padding: var(--pocket-space-sm) var(--pocket-space-lg) 0;
    background: var(--door-deep);
    /* Focus shows on the green as on the other dark surfaces. */
    --pocket-focus-ring: var(--on-chrome);
}

.pocket-main:has(.pocket-door-hero) .pocket-root-head .pocket-overflow-btn:hover,
.pocket-main:has(.pocket-door-hero) .pocket-root-head .pocket-overflow-btn:active {
    background: var(--door-track);
}

.pocket-main:has(.pocket-door-hero) .pocket-root-head .pocket-page-title,
.pocket-main:has(.pocket-door-hero) .pocket-root-head .pocket-overflow-btn {
    color: var(--on-chrome);
}

.pocket-door-hero {
    /* The v2 mockup's sizes that no shared token holds: the search field's height, the toggle track's padding, the
       hero's bottom corners. */
    --door-field-height: 56px;
    --door-track-pad: 5px;
    --door-hero-radius: 28px;
    --pocket-focus-ring: var(--on-chrome);
    background: linear-gradient(180deg, var(--door-deep), var(--door-green));
    color: var(--on-chrome);
    border-radius: 0 0 var(--door-hero-radius) var(--door-hero-radius);
    padding: var(--pocket-space-sm) var(--pocket-space-lg) var(--pocket-space-lg);
    margin: 0 calc(-1 * var(--pocket-space-lg)) var(--pocket-space-lg);
}

.pocket-door-hero .pocket-door-eyebrow {
    color: var(--on-chrome);
    letter-spacing: 0.14em;
    margin: var(--pocket-space-md) 0 var(--pocket-space-sm);
}

.pocket-door-headline {
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-hero);
    font-weight: var(--pocket-font-weight-hero);
    line-height: 1.05;
    color: var(--on-chrome);
    margin: 0 0 var(--pocket-space-md);
    text-wrap: balance;
}

/* The toggle: a dark track on the green, white labels on one line each, the gold lit tab with dark ink. */
.pocket-seg.pocket-door-toggle {
    margin: 0 0 var(--pocket-space-md);
    padding: var(--door-track-pad);
    gap: 0;
    background: var(--door-track);
    box-shadow: none;
    border: 0;
    border-radius: var(--pocket-radius-xl);
}

.pocket-door-toggle .pocket-seg-item {
    min-height: var(--pocket-control-height);
    border: 0;
    border-radius: var(--pocket-radius-lg);
    background: transparent;
    color: var(--on-chrome);
    font-size: var(--pocket-font-size-base);
    font-weight: 700;
}

/* One line each where the two labels fit (the narrowest phones wrap rather than spill into the other tab). */
@media (min-width: 361px) {
    .pocket-door-toggle .pocket-seg-item {
        white-space: nowrap;
    }
}

.pocket-door-toggle .pocket-seg-item.active {
    background: var(--door-gold);
    box-shadow: none;
    color: var(--door-gold-ink);
}

/* The search field: white, borderless on the green, the magnifier inside on the left. */
.pocket-door-search {
    position: relative;
}

.pocket-door-search-icon {
    position: absolute;
    left: var(--pocket-space-lg);
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    color: var(--pocket-text-secondary);
    pointer-events: none;
    /* Above the type-ahead's wrapper, a positioned element that comes later and would paint over it. */
    z-index: 1;
}

.pocket-door-search .pocket-search-input {
    display: block;
    width: 100%;
    min-height: var(--door-field-height);
    border: 0;
    border-radius: var(--pocket-radius-xl);
    padding-left: calc(var(--pocket-space-lg) + 22px + var(--pocket-space-sm));
    font-size: var(--pocket-font-size-lg);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
}

/* The chips: pills with the species name over one sex's typical price in gold. */
.pocket-door-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--pocket-space-sm);
    margin: var(--pocket-space-md) 0 var(--pocket-space-sm);
}

.pocket-door-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: var(--pocket-chip-height);
    padding: 3px 14px 4px;
    border: 1.5px solid var(--door-chip-line);
    border-radius: var(--pocket-radius-full);
    color: var(--on-chrome);
    text-decoration: none;
    line-height: 1.15;
}

.pocket-door-chip b {
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
}

.pocket-door-chip span {
    font-family: var(--pocket-font-numeric);
    font-size: var(--pocket-font-size-xs);
    color: var(--door-gold-fig);
    white-space: nowrap;
}

/* The sex mark comes from a symbol font taller than the digits: zero line height keeps it from growing the chip's
   second line, and the baseline keeps it level with the price. */
.pocket-door-chip-mark {
    font-style: normal;
    line-height: 0;
}

.pocket-door-chip-all {
    justify-content: center;
    border-style: dashed;
    color: var(--on-chrome);
}

.pocket-door-source {
    font-size: var(--pocket-font-size-sm);
    color: var(--on-chrome);
    margin: var(--pocket-space-xs) 0 0;
}

/* The ticker: a darker panel inside the hero; the label in small capitals, figures in gold. */
.pocket-door-ticker {
    background: var(--door-panel);
    border-radius: var(--pocket-radius-lg);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    margin-top: var(--pocket-space-sm);
    line-height: 1.45;
}

.pocket-door-ticker a {
    color: var(--on-chrome);
    text-decoration: none;
}

.pocket-door-ticker b {
    color: var(--door-gold-fig);
}

.pocket-door-ticker-label {
    margin-right: 6px;
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-chrome);
}

.pocket-door-ticker-tag {
    font-size: var(--pocket-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-chrome);
}

.pocket-door-ticker a.pocket-door-ticker-sale {
    display: block;
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    color: var(--on-chrome);
    margin-top: var(--pocket-space-xs);
}

/* Below the hero: the next sale as the door's ask, a gold-edged card with its Watch. */
.pocket-door-below [data-field="next-sale"] {
    border: 2px solid var(--door-gold);
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-card-bg);
    overflow: hidden;
}

.pocket-door-below [data-field="watch-sale"],
.pocket-door-below a[data-field="watch-sale"]:active {
    background: var(--door-green);
    color: var(--on-chrome);
}

.pocket-door-below a[data-field="watch-sale"]:hover {
    background: var(--door-deep);
}

.pocket-door-below [data-field="watch-sale"] .pocket-aa-row-name,
.pocket-door-below [data-field="watch-sale"] .pocket-aa-row-sub {
    color: var(--on-chrome);
}

.pocket-door-lead,
.pocket-door-line {
    display: block;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    margin: var(--pocket-space-md) 0;
    color: var(--pocket-text-primary);
    text-decoration: none;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-door-lead b {
    display: block;
    font-size: var(--pocket-font-size-lg);
}

.pocket-door-lead span {
    color: var(--pocket-text-secondary);
}