/* A list page's search band and location pill (templates/pocket/_near_pill.html, static/pocket/near-pill.js): Ranches
   and the Auctions list. The band continues the root head's chrome band below 840px. A sheet of its own, linked by
   those pages only, because the band sets --pocket-focus-ring on the chrome. */
.pocket-ranch-band {
    display: grid;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-md);
}
@media (max-width: 839px) {
    .pocket-main:has(.pocket-ranch-band) > .pocket-root-head { margin-bottom: 0; padding-bottom: var(--pocket-space-sm); }
    .pocket-ranch-band {
        margin: 0 calc(-1 * var(--pocket-space-lg)) 0;
        padding: 0 var(--pocket-space-lg) var(--pocket-space-md);
        background: var(--chrome);
        color: var(--on-chrome);
        --pocket-focus-ring: var(--on-chrome);
    }
}
.pocket-ranch-search .typeahead-filter { position: relative; }
.pocket-ranch-search .pocket-ranch-search-input,
.pocket-ranch-near .pocket-ranch-near-input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--pocket-target-min);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    border: 2px solid var(--accent-fill-line);
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    font: inherit;
    font-size: var(--pocket-font-size-field);
}
.pocket-ranch-place-row { display: flex; flex-wrap: wrap; gap: var(--pocket-space-sm); }
.pocket-ranch-pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--pocket-target-min);
    box-sizing: border-box;
    padding: 0 var(--pocket-space-md);
    border: 1px solid var(--chrome-text);
    border-radius: var(--pocket-radius-full);
    background: none;
    color: var(--on-chrome);
    font: inherit;
    font-size: var(--pocket-font-size-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.pocket-ranch-pill.is-active,
.pocket-ranch-pill.is-set { background: var(--pocket-bg); border-color: var(--pocket-bg); color: var(--pocket-text-primary); }
.pocket-ranch-pill.is-set { padding: 0; gap: 0; }
.pocket-ranch-pill-text,
.pocket-ranch-pill-clear {
    min-height: var(--pocket-target-min);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--pocket-space-sm) 0 var(--pocket-space-md);
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.pocket-ranch-pill-clear { padding: 0 var(--pocket-space-md) 0 var(--pocket-space-xs); }
.pocket-ranch-near { display: flex; flex-wrap: wrap; gap: var(--pocket-space-sm); align-items: center; }
.pocket-ranch-near[hidden] { display: none; }
.pocket-ranch-near-input { flex: 1 1 10rem; min-width: 0; }
.pocket-ranch-near-status { flex: 0 0 100%; margin: 0; font-size: var(--pocket-font-size-sm); color: var(--chrome-text); }
.pocket-ranch-near-status:empty { display: none; }
@media (min-width: 840px) {
    .pocket-ranch-pill { border-color: var(--pocket-border); color: var(--pocket-text-primary); }
    .pocket-ranch-near-status { color: var(--pocket-text-secondary); }
}