/**
 * Pocket CSS - Mobile-first PWA styles for Rafiki
 * 
 * Design system: Dense ledger UI for yard-readable exotic pricing.
 * - Caliche paper, white cards, hammer prices in ink (colours: tokens.css)
 * - Green and red are reserved for a price change (Δ)
 * - iOS-like 390-width density, high contrast
 * - 3 bottom tabs: Prices · Auctions · My Herd
 * - Dual M/F columns with equal weight (never blended)
 * - Condensed ledger rows (identity left, money right)
 *
 * This file holds tokens, chrome (header, tabs, help sheet), and rules
 * that several pages share. A rule only one page (or one page pair) uses
 * goes in that page's sheet beside this file, linked from the template's
 * {% block page_css %}. That block renders right after this file, so a
 * page sheet sees the same cascade its rules had here.
 */

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
    /* Colors: aliases of the tokens.css names (one home for every colour value). */
    --pocket-bg: var(--paper);
    --pocket-card-bg: var(--card);
    --pocket-text-primary: var(--ink);
    /* Owner 2026-09-29 (UX audit): #999 was 2.85:1 and failed contrast on
       most labels. Both grays now pass 4.5:1 on the page background. */
    --pocket-text-secondary: var(--ink-2);
    --pocket-text-muted: var(--muted);
    --pocket-border: var(--line);
    /* A field's or chip's edge is a UI boundary: 3:1 against paper and card in every theme (WCAG 1.4.11). */
    --pocket-border-input: var(--line-input);
    /* The keyboard focus ring; chrome that draws on --chrome sets it to --on-chrome. */
    --pocket-focus-ring: var(--focus);
    --pocket-border-light: var(--line-soft);
    
    /* Δ only. Not a hammer color. */
    --pocket-green: var(--up);
    --pocket-green-light: var(--up-light);
    --pocket-header-bg: var(--header);
    /* One brand-dark-green accent (owner 2026-10-07, docs/features/POCKET_NAV_THEME.md).
       Ink and grays clear 7:1 on the canvas (tests/test_pocket_contrast.py). */
    --pocket-active: var(--brand);
    /* Dock: dark green chrome so it stands out from the light page. */
    --pocket-nav-bg: var(--chrome);
    --pocket-nav-text: var(--chrome-text);
    --pocket-nav-active-text: var(--on-chrome);
    --pocket-active-soft: var(--brand-soft);
    /* Range bars: the band must read against the grey track (owner 2026-09-30). */
    --pocket-range-band: var(--brand-band);
    --pocket-active-dark: var(--brand-dark);
    
    /* Sex colors - high contrast. Shared with the desk via tokens.css. */
    --pocket-male: var(--male);
    --pocket-male-bg: var(--male-bg);
    --pocket-female: var(--female);
    --pocket-female-bg: var(--female-bg);
    --pocket-mixed: var(--mixed);
    --pocket-mixed-bg: var(--mixed-bg);
    
    /* Spacing */
    --pocket-space-xs: 4px;
    --pocket-space-sm: 8px;
    --pocket-space-md: 12px;
    --pocket-space-lg: 16px;
    --pocket-space-xl: 20px;
    --pocket-space-2xl: 24px;
    
    /* Typography */
    --pocket-font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    /* Titles run condensed and uppercase like a catalog heading; every price is set in the semi-condensed number face. */
    --pocket-font-display: 'Barlow Condensed', 'Arial Narrow', var(--pocket-font-family);
    --pocket-font-numeric: 'Barlow Semi Condensed', var(--pocket-font-family);
    /* Type scale (docs/features/POCKET_NAV_THEME.md A4, owner-approved 2026-10-08), read at the iPhone default of 17px:
       labels xs 14, secondary sm 15, body base 17, ledger numbers lg 20, card titles xl 22, page titles 2xl 28,
       hero price 40. Each token is its px in --pocket-unit: 1/17 of the root, which follows the iPhone Text Size setting (below),
       times --pocket-text-scale (Larger text, set by [data-text]). Nothing on a pocket page is smaller than xs;
       tests/test_readable_type_wall.py keeps it that way. Fields read -field: never under 16px, or iOS zooms on focus. */
    --pocket-text-scale: 1;
    /* One px at the iPhone default: 1/17 of the root, times Larger text. Type and text-sized boxes are N units. */
    --pocket-unit: calc(1rem * var(--pocket-text-scale) / 17);
    --pocket-font-size-xs: calc(14 * var(--pocket-unit));
    --pocket-font-size-sm: calc(15 * var(--pocket-unit));
    --pocket-font-size-base: calc(17 * var(--pocket-unit));
    --pocket-font-size-lg: calc(20 * var(--pocket-unit));
    --pocket-font-size-xl: calc(22 * var(--pocket-unit));
    --pocket-font-size-2xl: calc(28 * var(--pocket-unit));
    --pocket-font-size-hero: calc(40 * var(--pocket-unit));
    --pocket-font-size-field: max(16px, var(--pocket-font-size-base));
    /* Hero price weight: every hero price reads it (one place for the A4 hero style). */
    --pocket-font-weight-hero: 800;
    
    /* Border radius */
    --pocket-radius-sm: 6px;
    --pocket-radius-md: 10px;
    --pocket-radius-lg: 12px;
    --pocket-radius-xl: 16px;
    --pocket-radius-full: 9999px;
    
    /* Shadows: cards (sm, md), then each raised surface by role. Night draws them all as one 1px line (below). */
    --pocket-shadow-sm: 0 1px 2px var(--shade-sm);
    --pocket-shadow-md: 0 1px 3px var(--shade-md);
    --pocket-shadow-dropdown: 0 4px 12px var(--shade-pop);
    --pocket-shadow-menu: 0 4px 16px var(--shade-pop);
    --pocket-shadow-popover: 0 4px 20px var(--shade-pop);
    --pocket-shadow-sheet: 0 -4px 20px var(--shade-pop);
    --pocket-shadow-sheet-tall: 0 -8px 24px var(--shade-sheet);
    --pocket-shadow-footer: 0 -2px 8px var(--shade-sm);
    --pocket-shadow-bar: 0 8px 24px var(--shade-bar);
    --pocket-shadow-modal: 0 10px 40px var(--shade-modal);
    --pocket-shadow-xl: var(--pocket-shadow-sheet-tall);
    /* A card surface (docs/features/ONE_UI.md goal 8): lists, heroes and sections drawn on the paper, at every
       width; a soft two-layer lift (the mockups), a 1px line at night (below). */
    --pocket-card-radius: var(--pocket-radius-xl);
    --pocket-card-shadow: 0 1px 2px var(--shade-sm), 0 4px 16px var(--shade-sm);
    
    /* Targets (A4): list rows, buttons and inputs, chips; glyph stroke */
    --pocket-row-height: 56px;
    --pocket-control-height: 52px;
    --pocket-chip-height: 44px;
    /* The minimum fingertip target (docs/UX_RULES.md, Touch): every pocket and Exchange tap target reads it. */
    --pocket-target-min: 44px;
    /* Room a page leaves under its content for the sticky form-action bar (My Herd add and edit). */
    --pocket-sticky-bar-room: 96px;
    --pocket-icon-stroke: 2.25;

    /* The dock's top line (A4: 1.5px at night) */
    --pocket-chrome-line-width: 1px;

    /* The fixed bars' own heights, read by the bars and by scroll-padding (the page scrolls, not the body). */
    --pocket-toolbar-height: 60px;
    --pocket-dock-base-height: 56px;

    /* Layout */
    --pocket-max-width: 390px;
    /* Fixed bars a page draws: the kind toolbar and the dock (System B chrome sets them). */
    --pocket-header-height: 0px;
    --pocket-tab-height: 0px;
    /* The part of the home-indicator zone the bottom chrome keeps clear. */
    --pocket-bottom-inset: env(safe-area-inset-bottom, 0px);
    /* The status-bar zone the top chrome keeps clear, and the notch and rounded corners in landscape the sides
       keep clear: 0 except in the iOS app (below). */
    --pocket-top-inset: 0px;
    --pocket-left-inset: 0px;
    --pocket-right-inset: 0px;
}

/* The iOS app draws under the status bar (viewport-fit=cover, contentInset never; app.py inject_native_app). */
:root[data-surface="pocket"][data-shell="app"] {
    --pocket-top-inset: env(safe-area-inset-top, 0px);
    --pocket-left-inset: env(safe-area-inset-left, 0px);
    --pocket-right-inset: env(safe-area-inset-right, 0px);
}

/* A focused control never hides under the toolbar or the dock (WCAG 2.4.11); page sticky bars (Exchange dock, sell bar) are not counted. Pages with neither bar get it too. */
:root[data-surface="pocket"] {
    scroll-padding-top: calc(var(--pocket-toolbar-height) + var(--pocket-top-inset) + var(--pocket-space-lg));
    scroll-padding-bottom: calc(var(--pocket-dock-base-height) + var(--pocket-bottom-inset) + var(--pocket-space-lg));
}

/* The root is the type unit: 17px, or on iOS the Text Size setting (Dynamic Type), whose default is 17px. */
:root[data-surface="pocket"] {
    font-size: 106.25%; /* 17px at the browser's default size, and it follows a changed default */
}
@supports (font: -apple-system-body) and (hover: none) {
    :root[data-surface="pocket"] {
        font: -apple-system-body;
        font-family: var(--pocket-font-family);
    }
}

/* Larger text (⋮, display.js): three steps on top of the device's size; every type token reads the scale. */
:root[data-surface="pocket"][data-text="large"] { --pocket-text-scale: 1.12; }
:root[data-surface="pocket"][data-text="larger"] { --pocket-text-scale: 1.25; }
:root[data-surface="pocket"][data-text="largest"] { --pocket-text-scale: 1.5; }

/* One keyboard focus ring for every pocket control (WCAG 2.4.7). */
:root[data-surface="pocket"] :focus-visible {
    outline: 3px solid var(--pocket-focus-ring);
    outline-offset: 2px;
}

/* Controls that fill a clipping container (overflow hidden or scrolling) draw the ring inside, or it is cut off. */
:root[data-surface="pocket"] :is(.pocket-tab, .pocket-overflow-item, .pocket-menu-item, .pocket-chip, .pocket-seg-item, a.pocket-ledger-row, .pocket-species-row):focus-visible {
    outline-offset: -3px;
}

/* Night: every shadow becomes a 1px line (docs/features/POCKET_NAV_THEME.md A4). */
:root[data-surface="pocket"][data-theme="dark"] {
    --pocket-edge: 0 0 0 1px var(--line);
    --pocket-chrome-line-width: 1.5px;
    --pocket-shadow-sm: var(--pocket-edge);
    --pocket-shadow-md: var(--pocket-edge);
    --pocket-shadow-dropdown: var(--pocket-edge);
    --pocket-shadow-menu: var(--pocket-edge);
    --pocket-shadow-popup: var(--pocket-edge);
    --pocket-shadow-popover: var(--pocket-edge);
    --pocket-shadow-sheet: var(--pocket-edge);
    --pocket-shadow-sheet-tall: var(--pocket-edge);
    --pocket-shadow-xl: var(--pocket-edge);
    --pocket-shadow-footer: var(--pocket-edge);
    --pocket-shadow-bar: var(--pocket-edge);
    --pocket-shadow-modal: var(--pocket-edge);
    --pocket-card-shadow: var(--pocket-edge);
}

/* ==========================================================================
   BASE
   ========================================================================== */
.pocket {
    /* What the bottom chrome occupies. On body, not :root, so it reads the
       dock's own --pocket-tab-height and --pocket-bottom-inset. */
    --pocket-dock-height: calc(var(--pocket-tab-height) + var(--pocket-bottom-inset));
    /* What the top chrome occupies: where a sticky bar pins under it. */
    --pocket-top-chrome: calc(var(--pocket-header-height) + var(--pocket-top-inset));
    margin: 0;
    padding: var(--pocket-top-inset) var(--pocket-right-inset) 0 var(--pocket-left-inset);
    /* The insets sit inside the 100vh, so a short page does not scroll in the app. */
    box-sizing: border-box;
    font-family: var(--pocket-font-family);
    font-size: var(--pocket-font-size-base);
    font-weight: 500;
    line-height: 1.45;
    color: var(--pocket-text-primary);
    background: var(--pocket-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   SYSTEM B CHROME (docs/features/POCKET_NAV_THEME.md): a root draws a large title with
   the menu, its segments and the dock; any other page one kind toolbar.
   ========================================================================== */
.pocket-has-toolbar {
    --pocket-header-height: var(--pocket-toolbar-height);
}

.pocket-has-dock {
    --pocket-tab-height: var(--pocket-dock-base-height);
    /* Owner 2026-10-08: the full inset under the dock was wasted green. The
       labels still clear the home bar, about 8px off the bottom edge. */
    --pocket-bottom-inset: calc(env(safe-area-inset-bottom, 0px) / 2);
}

/* The bars pinned to the top: a page's kind toolbar, a root's name bar. */
.pocket-toolbar,
.pocket-namebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    border-bottom: 1px solid var(--pocket-border);
    z-index: 100;
}

/* The status-bar strip (iOS app only, 0 tall elsewhere): the page paper, so a root's content never scrolls
   under the clock; the toolbar and the pinned name bar draw their own background over it. */
.pocket::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pocket-top-inset);
    background: var(--pocket-bg);
    z-index: 99;
}

/* Kind toolbar: ‹ Parent · kind · actions · ⋮ */
.pocket-toolbar {
    height: var(--pocket-header-height);
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    padding: var(--pocket-top-inset) calc(var(--pocket-bar-inset, 0px) + var(--pocket-right-inset) + var(--pocket-space-sm)) 0 calc(var(--pocket-bar-inset, 0px) + var(--pocket-left-inset) + var(--pocket-space-lg));
}

.pocket-toolbar-back,
.pocket-toolbar-action {
    display: inline-flex;
    align-items: center;
    min-height: var(--pocket-target-min);
    color: var(--pocket-active);
    text-decoration: none;
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
}

.pocket-toolbar-back {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 8px between adjacent targets (docs/UX_RULES.md), in a toolbar and in a root's head. */
.pocket-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    margin-left: auto;
}

.pocket-toolbar-actions form {
    margin: 0;
}

.pocket-toolbar-action {
    padding: 0 var(--pocket-space-md);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

/* The kind's note under the toolbar ("View only. Not an auction result."). */
.pocket-toolbar-note {
    margin: 0 0 var(--pocket-space-md);
    color: var(--pocket-text-secondary);
    font-size: var(--pocket-font-size-sm);
}

/* The kind pill opens the note line (docs/features/POCKET_PAGE_TOPS.md goal 9), in the kind's colours. A real space
   follows it, so copy and screen readers get "Your animal Valued…"; 4px plus that space keep the 8px gap. */
.pocket-toolbar-kind {
    display: inline-block;
    margin-right: var(--pocket-space-xs);
    padding: 2px var(--pocket-space-sm);
    border-radius: var(--pocket-radius-full);
    font-size: var(--pocket-font-size-xs);
    font-weight: 700;
}

.pocket-toolbar-note[data-kind="lot"] .pocket-toolbar-kind { background: var(--kind-lot-bg); color: var(--kind-lot); }
.pocket-toolbar-note[data-kind="yours"] .pocket-toolbar-kind { background: var(--kind-yours-bg); color: var(--kind-yours); }
.pocket-toolbar-note[data-kind="shared"] .pocket-toolbar-kind { background: var(--kind-shared-bg); color: var(--kind-shared); }
.pocket-toolbar-note[data-kind="listing"] .pocket-toolbar-kind { background: var(--kind-listing-bg); color: var(--kind-listing); }
.pocket-sample-mark { background: var(--kind-sample-bg); color: var(--kind-sample); }

/* Root head (docs/features/POCKET_PAGE_TOPS.md goal 1): the title, its actions and the menu on one row, the
   subtitle an eyebrow on a full-width line right above them (docs/features/ONE_UI.md goal 8); actions wrap under
   the title before anything scrolls sideways. 12px to the first control, 8px to segments (goal 5). The name bar
   pins once it scrolls away. */
.pocket-root-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-md);
}

.pocket-root-head:has(+ .pocket-segments) {
    margin-bottom: var(--pocket-space-sm);
}

/* The title is drawn as .pocket-page-title; the head row carries its spacing. */
.pocket-root-head .pocket-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* The eyebrow: the section title's small capitals (below), on its own line over the title. */
.pocket-root-head .pocket-page-subtitle {
    flex: 0 0 100%;
}

.pocket-namebar {
    height: 40px;
    line-height: 40px;
    padding: var(--pocket-top-inset) calc(var(--pocket-right-inset) + var(--pocket-space-lg)) 0 calc(var(--pocket-left-inset) + var(--pocket-space-lg));
    font-weight: 700;
    text-align: center;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.15s ease, visibility 0.15s;
}

.pocket-namebar.is-pinned {
    transform: translateY(0);
    visibility: visible;
}

/* The segmented control (docs/features/ONE_UI.md goal 8): one tray, the picked segment a raised card in it. Segments
   sit 2px apart, as one control (owner 2026-10-09: the named exception to 8px between targets, docs/UX_RULES.md);
   each stays a 44px target, its fill inset by a 3px clear border (so the picked one draws an inset line: an outer
   shadow would wrap the whole target). The picked one is .active, or the segment
   whose radio is checked (pocket/_record_choice.html with item_class='pocket-seg-item'). */
.pocket-seg {
    display: inline-flex;
    flex: none;
    gap: 2px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-border-light);
    box-shadow: inset 0 0 0 1px var(--pocket-border);
}

.pocket-seg-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pocket-space-xs);
    flex: none;
    min-height: var(--pocket-chip-height);
    box-sizing: border-box;
    margin: 0;
    padding: 0 var(--pocket-space-md);
    border: 3px solid transparent;
    border-radius: var(--pocket-radius-lg);
    background: none;
    background-clip: padding-box;
    color: var(--pocket-text-secondary);
    font: inherit;
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pocket-seg-item.active,
.pocket-seg-item:has(input:checked) {
    background-color: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    box-shadow: inset 0 0 0 1px var(--pocket-border);
}

/* A control across its row: the segments share the width (Exchange sell's radio rows). */
.pocket-seg.pocket-seg-fill {
    display: flex;
}

.pocket-seg-fill > .pocket-seg-item {
    flex: 1 1 0;
    min-width: 0;
    /* A shared third of a phone row: a long label wraps at a larger text size rather than spill. */
    padding: 0 var(--pocket-space-sm);
    white-space: normal;
    text-align: center;
}

.pocket-seg-item:disabled,
.pocket-seg-item[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Segments: the views of one destination (Sold · Upcoming · Ranches · Analytics) as one segmented control across
   the column, 12px above the first control (goal 5); a row too long for the phone scrolls sideways. */
.pocket-segments {
    display: flex;
    overflow-x: auto;
    margin-bottom: var(--pocket-space-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pocket-segments > .pocket-seg-item {
    flex: 1 0 auto;
}

/* A destination's count on its segment (Shared's new herds). */
.pocket-segment-badge {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--pocket-radius-full);
    background: var(--pocket-active);
    color: var(--on-brand);
    font-size: var(--pocket-font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.pocket-overflow-btn {
    background: none;
    border: none;
    color: var(--pocket-text-secondary);
    padding: var(--pocket-space-sm);
    cursor: pointer;
    border-radius: var(--pocket-radius-full);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pocket-target-min);
    min-height: var(--pocket-target-min);
}

.pocket-overflow-btn:hover,
.pocket-overflow-btn:active {
    background: var(--pocket-border-light);
}

/* ==========================================================================
   OVERFLOW MENU
   ========================================================================== */
.pocket-overflow-menu {
    /* pocket.js sets top and right as it opens, under its own ⋮ (pocketMenuPlace). */
    position: fixed;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-md);
    box-shadow: var(--pocket-shadow-menu);
    z-index: 101;
    display: none;
    min-width: 200px;
    overflow: hidden;
}

.pocket-overflow-menu.open {
    display: block;
}

.pocket-overflow-item {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    color: var(--pocket-text-primary);
    text-decoration: none;
    font-size: var(--pocket-font-size-base);
    transition: background 0.2s;
}

.pocket-overflow-item:hover,
.pocket-overflow-item:active {
    background: var(--pocket-bg);
}

.pocket-overflow-item svg {
    flex-shrink: 0;
    color: var(--pocket-text-secondary);
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   INSTALL CTA (OC-11)
   ========================================================================== */
.pocket-install-cta {
    /* In the flow, so on a root it pushes the title down instead of covering its ⋮. */
    position: sticky;
    top: var(--pocket-top-chrome);
    background: linear-gradient(135deg, var(--install-cta-from) 0%, var(--install-cta-to) 100%);
    color: var(--on-chrome);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    z-index: 98;
    box-shadow: var(--pocket-shadow-md);
}

.pocket-install-cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pocket-space-md);
    max-width: var(--pocket-max-width);
    margin: 0 auto;
}

.pocket-install-text {
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    flex: 1;
}

.pocket-install-btn {
    background: var(--on-chrome);
    color: var(--install-cta-from);
    border: none;
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    border-radius: var(--pocket-radius-sm);
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.1s;
}

.pocket-install-btn:active {
    transform: scale(0.95);
}

.pocket-install-dismiss {
    background: none;
    border: none;
    color: var(--on-chrome-80);
    font-size: 24px;
    line-height: 1;
    padding: var(--pocket-space-xs) var(--pocket-space-sm);
    cursor: pointer;
    margin-left: var(--pocket-space-xs);
}

.pocket-install-dismiss:hover {
    color: var(--on-chrome);
}

/* ==========================================================================
   STALE BANNER
   ========================================================================== */
.pocket-stale-banner {
    position: sticky;
    top: var(--pocket-top-chrome);
    background: var(--warning-bg);
    color: var(--warning-ink);
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-sm);
    text-align: center;
    z-index: 99;
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.pocket-main {
    flex: 1;
    margin-top: var(--pocket-header-height);
    margin-bottom: var(--pocket-dock-height);
    padding: var(--pocket-space-lg);
    max-width: var(--pocket-max-width);
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ==========================================================================
   DOCK (roots only): Prices · Auctions · Ranches · Exchange · Herd
   Opaque, 56px plus half the safe area, 15px bold labels, 24px glyphs; it never
   leaves the screen (docs/features/POCKET_DOCK.md).
   ========================================================================== */
/* Owner 2026-10-02: the white bar disappeared against the page. A dark
   bar with light labels; the active button carries a pill. */
.pocket-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--pocket-tab-height);
    background: var(--pocket-nav-bg);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    border-top: var(--pocket-chrome-line-width) solid var(--chrome-line);
    box-shadow: 0 -2px 10px var(--chrome-shadow);
    z-index: 100;
    padding-left: calc(var(--pocket-bar-inset, 0px) + var(--pocket-left-inset));
    padding-right: calc(var(--pocket-bar-inset, 0px) + var(--pocket-right-inset));
    /* Content-box: the 56px buttons sit above the inset and the green fills
       under it. iOS reports the inset late when its toolbar collapses (the
       dock grew on scroll, owner 2026-10-08), so the lift eases. */
    padding-bottom: var(--pocket-bottom-inset);
    transition: padding-bottom 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .pocket-tabs {
        transition: none;
    }
}

.pocket-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--pocket-nav-text);
    font-size: min(var(--pocket-font-size-xs), 18px); /* the 56px dock holds the label only to 18px */
    font-weight: 700;
    line-height: 1.2;
    gap: 2px;
    transition: color 0.2s;
    /* Pill 28 + gap 2 + one 1.2 line (18px at most) fits 56px. */
    padding: 0;
    --pocket-focus-ring: var(--pocket-nav-active-text);
}

.pocket-tab.active {
    color: var(--pocket-nav-active-text);
}

.pocket-tab svg {
    width: 24px;
    height: 24px;
    stroke-width: var(--pocket-icon-stroke);
    flex-shrink: 0;
}

.pocket-tab.active svg {
    background: var(--chrome-pill);
    color: var(--on-chrome-pill);
    border-radius: 999px;
    /* 24px glyph in a 52×28 pill. */
    padding: 2px 14px;
    box-sizing: content-box;
}

/* ==========================================================================
   PAGE HEADERS
   ========================================================================== */
.pocket-page-header {
    margin-bottom: var(--pocket-space-lg);
}

/* Page titles at 2xl (goal 11: one type step under the 3xl they had). */
.pocket-page-title {
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-2xl);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 4px 0;
    color: var(--pocket-text-primary);
    letter-spacing: 0.01em;
}

.pocket-page-subtitle {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    margin: 0;
}

/* Legacy aliases */
.pocket-section-header { margin-bottom: var(--pocket-space-lg); }
.pocket-title { font-size: var(--pocket-font-size-2xl); font-weight: 700; margin: 0 0 2px 0; color: var(--pocket-text-primary); }
.pocket-disclaimer { font-size: var(--pocket-font-size-sm); color: var(--pocket-text-secondary); margin: 0; }

/* ==========================================================================
   SEARCH
   ========================================================================== */
.pocket-search {
    margin-bottom: var(--pocket-space-lg);
}

.pocket-search-input {
    width: 100%;
    min-height: var(--pocket-control-height);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-field);
    border: 1px solid var(--pocket-border-input);
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-card-bg);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: var(--pocket-text-primary);
}

.pocket-search-input::placeholder {
    color: var(--pocket-text-muted);
}

.pocket-search-input:focus {
    outline: none;
    border-color: var(--pocket-active);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.pocket-section {
    margin-bottom: var(--pocket-space-xl);
}

/* One small-caps label: a section's title and a root's eyebrow (docs/features/ONE_UI.md goal 8). */
.pocket-section-title,
.pocket-root-head .pocket-page-subtitle {
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pocket-text-secondary);
}

.pocket-section-title {
    margin: 0 0 var(--pocket-space-sm) 0;
}

/* ==========================================================================
   DENSE LEDGER - Price List (identity left, money right, dual M/F columns)
   ========================================================================== */
.pocket-price-list,
.pocket-ledger {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    overflow: hidden;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-price-row,
.pocket-ledger-row {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--pocket-border-light);
    transition: background 0.15s;
    min-height: var(--pocket-row-height);
}

:not(.pocket-price-item) > .pocket-price-row:last-child,
.pocket-price-item:last-child .pocket-price-row,
.pocket-ledger-row:last-child {
    border-bottom: none;
}

.pocket-price-row:active,
.pocket-ledger-row:active {
    background: var(--pocket-bg);
}

.pocket-species-name {
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    /* Wrap long names ("Wildebeest, White-Bearded") to a second line
       instead of cutting them off; the 17px scale left no room. */
    line-height: 1.25;
    /* Break between words only: "Blesb-ok" is worse than a second line. */
    overflow-wrap: normal;
    hyphens: none;
    color: var(--pocket-text-primary);
}

/* Star button */
.pocket-star-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--pocket-text-muted);
    padding: var(--pocket-space-xs);
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    line-height: 1;
    /* 44px fingertip target; the glyph stays its size. */
    min-width: var(--pocket-target-min);
    min-height: var(--pocket-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pocket-star-btn.starred {
    color: var(--gold);
}

.pocket-star-btn.large {
    font-size: 24px;
}

.pocket-star-btn:active {
    transform: scale(0.9);
}

/* ==========================================================================
   PRICE DETAIL (twin M/F hero blocks)
   ========================================================================== */
.pocket-detail {
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.pocket-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--pocket-space-lg);
    min-width: 0;
    max-width: 100%;
}

.pocket-detail-title {
    font-family: var(--pocket-font-display);
    font-size: var(--pocket-font-size-2xl);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 0 0 4px 0;
    color: var(--pocket-text-primary);
    overflow-wrap: anywhere;
}

.pocket-detail-subtitle {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    margin: 0;
}

/* Twin M/F hero blocks */
.pocket-detail-prices {
    display: flex;
    gap: var(--pocket-space-md);
    margin-bottom: var(--pocket-space-lg);
}

.pocket-detail-price {
    flex: 1;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    padding: var(--pocket-space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pocket-space-xs);
    box-shadow: var(--pocket-card-shadow);
    text-align: center;
}

.pocket-detail-price-label {
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--pocket-space-xs);
}

.pocket-detail-price.pocket-price-male .pocket-detail-price-label {
    color: var(--pocket-male);
}

.pocket-detail-price.pocket-price-female .pocket-detail-price-label {
    color: var(--pocket-female);
}

.pocket-detail-price-amount {
    font-size: var(--pocket-font-size-2xl);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

.pocket-detail-meta {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-secondary);
    margin-top: var(--pocket-space-xs);
}

/* Range display: Low $6,200 · High $11,000 */
.pocket-detail-range-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-secondary);
    width: 100%;
    margin-top: var(--pocket-space-sm);
}

/* Legacy aliases */
.pocket-detail-date,
.pocket-detail-range,
.pocket-detail-count {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-secondary);
}

/* Stats row: Last Sale · Range M · Range F */
.pocket-detail-stats {
    display: flex;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-lg);
}

.pocket-detail-stat {
    flex: 1;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-md);
    padding: var(--pocket-space-md);
    text-align: center;
    box-shadow: var(--pocket-shadow-sm);
}

.pocket-detail-stat-label {
    font-size: var(--pocket-font-size-xs);
    font-weight: 500;
    color: var(--pocket-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.pocket-detail-stat-value {
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

/* Actions: Share + Appraise */
.pocket-detail-actions {
    display: flex;
    gap: var(--pocket-space-md);
    margin-bottom: var(--pocket-space-lg);
}

.pocket-detail-disclaimer {
    text-align: center;
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.pocket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pocket-space-md) var(--pocket-space-xl);
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    border-radius: var(--pocket-radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    min-height: var(--pocket-control-height);
    /* A label too long for its cell wraps inside the button, never spills
       past its edge (the A4 type scale and Larger text widen every label). */
    text-align: center;
    overflow-wrap: anywhere;
    /* A <button> does not inherit type: it fell back to Arial and sat higher
       than the <a> buttons beside it (Clear all next to Share). */
    font-family: inherit;
    line-height: inherit;
}

.pocket-btn-primary {
    background: var(--pocket-active);
    color: var(--on-brand);
}

.pocket-btn-primary:active {
    background: var(--pocket-active-dark);
}

.pocket-btn-secondary {
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    border: 1px solid var(--pocket-border);
}

.pocket-btn-secondary:active {
    background: var(--pocket-bg);
}

/* No global border-box: width 100% plus the button's padding would run past its container (a sideways scroll). */
.pocket-btn-block {
    width: 100%;
    box-sizing: border-box;
}

.pocket-detail-actions .pocket-btn {
    flex: 1;
}

/* ==========================================================================
   TRUE 1-ROW LEDGER (auctions, my herd, appraise pick)
   All elements on ONE horizontal line: species · sex · house · $ · date
   ========================================================================== */
/* Duplicate ledger styles removed - see TRUE 1-ROW LEDGER section above */

/* Sex badges - compact inline */
.pocket-card-sex,
.pocket-sex-badge {
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--pocket-border);
    color: var(--pocket-text-secondary);
    letter-spacing: 0;
    flex-shrink: 0;
}

.pocket-card-sex.pocket-sex-male,
.pocket-sex-badge.pocket-sex-male {
    background: var(--pocket-male-bg);
    color: var(--pocket-male);
}

.pocket-card-sex.pocket-sex-female,
.pocket-sex-badge.pocket-sex-female {
    background: var(--pocket-female-bg);
    color: var(--pocket-female);
}

.pocket-card-sex.pocket-sex-mixed,
.pocket-sex-badge.pocket-sex-mixed {
    background: var(--pocket-mixed-bg);
    color: var(--pocket-mixed);
}

/* ==========================================================================
   LEGACY AUCTION CARDS (kept for backwards compatibility)
   ========================================================================== */
.pocket-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-sm);
}

.pocket-auction-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-md);
    box-shadow: var(--pocket-shadow-sm);
    min-height: var(--pocket-row-height);
}

.pocket-card-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pocket-card-header {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
}

.pocket-card-species {
    font-size: var(--pocket-font-size-base);
    font-weight: 500;
    color: var(--pocket-text-primary);
}

.pocket-card-footer {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
}

.pocket-card-house {
    font-weight: 400;
    color: var(--pocket-text-secondary);
}

.pocket-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.pocket-card-price {
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    color: var(--ink);
}

.pocket-card-date {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
}

.pocket-card-body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--pocket-space-sm);
}

.pocket-card-meta {
    display: flex;
    gap: var(--pocket-space-sm);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

/* ==========================================================================
   CHIPS (filter tabs, removable filter chips)
   ========================================================================== */
.pocket-chips {
    display: flex;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-lg);
    flex-wrap: wrap;
}

.pocket-chip {
    min-height: var(--pocket-chip-height);
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    border-radius: var(--pocket-radius-full);
    border: 1px solid var(--pocket-border-input);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.pocket-chip.active,
.pocket-chip:has(input:checked) {
    /* The ring sits inside a chip, on its brand fill: draw it in the text colour of that fill. */
    --pocket-focus-ring: var(--on-brand);
    background: var(--pocket-active);
    border-color: var(--pocket-active);
    color: var(--on-brand);
}

.pocket-chip:disabled,
.pocket-chip[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.45;
    color: var(--pocket-text-muted);
    background: var(--pocket-bg);
}

/* Ghost/outline chip for Filter button. A solid border and the
   secondary gray: the dashed muted version read as disabled. */
.pocket-chip.pocket-chip-ghost {
    background: transparent;
    border: 1px solid var(--pocket-border-input);
    color: var(--pocket-text-secondary);
}

.pocket-chip.pocket-chip-ghost:hover {
    border-color: var(--pocket-text-secondary);
    color: var(--pocket-text-secondary);
}

/* Removable filter chip (with × close button) */
.pocket-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    border-radius: var(--pocket-radius-full);
    background: var(--pocket-active);
    color: var(--on-brand);
}

.pocket-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--on-brand-20);
    border: none;
    border-radius: 50%;
    color: var(--on-brand);
    font-size: var(--pocket-font-size-xs);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}

.pocket-chip-remove:hover {
    background: var(--on-brand-30);
}

/* One chip row that scrolls sideways instead of wrapping (docs/features/POCKET_PAGE_TOPS.md refactor (g), goals
   6 and 8): Select to sell's species chips. */
.pocket-chips.pocket-chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.pocket-chips-scroll > .pocket-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */
.pocket-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    margin-bottom: var(--pocket-space-lg);
}

/* The bar's chip row (Filter, then the page's chips) takes the width left of Sort and scrolls; it keeps no
   margin of its own, so the bar is one 44px row (goal 8). */
.pocket-filter-bar > .pocket-chips {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.pocket-filter-active {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
    background: var(--pocket-active);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    border-radius: var(--pocket-radius-full);
    font-size: var(--pocket-font-size-sm);
    color: var(--on-brand);
}

.pocket-clear-filter {
    color: var(--on-brand);
    font-weight: 600;
    text-decoration: none;
    opacity: 0.9;
}

.pocket-clear-filter:hover {
    opacity: 1;
}

/* Sort separate from filter */
.pocket-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pocket-space-xs);
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    color: var(--pocket-active);
    background: none;
    border: none;
    cursor: pointer;
    min-height: var(--pocket-target-min);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ==========================================================================
   MORE / PAGINATION
   ========================================================================== */
.pocket-more {
    margin-top: var(--pocket-space-lg);
    text-align: center;
}

/* ==========================================================================
   MY HERD (total $ header, condensed rows: name · species · sex · value)
   Page rules live in my-herd.css. The two below stay here because shared
   rules later in this file (.pocket-btn-sm, .pocket-empty) must still
   override them; a page sheet loads after this file and would flip that.
   ========================================================================== */
/* Compact secondary control beside the page's tools (the Analytics button: shared herd, each sold sale; templates/pocket/_analytics_button.html).
   border-box keeps padding inside the 36px height; content-box would inflate it. */
.pocket-herd-analytics-btn {
    align-self: flex-start;
    box-sizing: border-box;
    width: auto;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    line-height: 1.2;
}

.pocket-herd-analytics-btn svg {
    flex-shrink: 0;
}

.pocket-herd-list {
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-card-radius);
    overflow: hidden;
    box-shadow: var(--pocket-card-shadow);
}

.pocket-herd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-herd-row:last-child {
    border-bottom: none;
}

.pocket-herd-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pocket-herd-name-row {
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
}

.pocket-herd-name {
    font-size: var(--pocket-font-size-base);
    font-weight: 500;
    color: var(--pocket-text-primary);
}

.pocket-herd-species {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--pocket-space-sm);
}

.pocket-herd-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.pocket-herd-sex {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
}

.pocket-herd-empty {
    text-align: center;
    padding: var(--pocket-space-2xl) var(--pocket-space-xl);
}

.pocket-desktop-cta-section {
    margin-top: var(--pocket-space-lg);
    text-align: center;
    padding: var(--pocket-space-lg);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
}

.pocket-desktop-cta-section a {
    color: var(--pocket-active);
    font-weight: 500;
    text-decoration: none;
}

.pocket-desktop-cta-section p {
    margin: 0 0 var(--pocket-space-md) 0;
    color: var(--pocket-text-secondary);
    font-size: var(--pocket-font-size-sm);
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.pocket-form-group {
    margin-bottom: var(--pocket-space-lg);
}

.pocket-label {
    display: block;
    font-size: var(--pocket-font-size-sm);
    font-weight: 600;
    color: var(--pocket-text-primary);
    margin-bottom: var(--pocket-space-sm);
}

/* A typed field and its button on one row (Shared's ask, Exchange Selling's invite). */
.pocket-field-row { display: flex; gap: var(--pocket-space-sm); }
.pocket-field-row .pocket-input { flex: 1; min-width: 0; }
.pocket-field-row .pocket-btn { min-height: var(--pocket-control-height); }

.pocket-input {
    width: 100%;
    min-height: var(--pocket-control-height);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-field);
    border: 1px solid var(--pocket-border-input);
    border-radius: var(--pocket-radius-md);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pocket-input:focus {
    outline: none;
    border-color: var(--pocket-active);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.pocket-alert {
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    border-radius: var(--pocket-radius-md);
    margin-bottom: var(--pocket-space-lg);
    font-size: var(--pocket-font-size-sm);
}

.pocket-alert-error {
    background: var(--alert-error-bg);
    color: var(--alert-error);
}

.pocket-alert-success {
    background: var(--alert-success-bg);
    color: var(--alert-success);
}

.pocket-alert-warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning);
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.pocket-empty {
    text-align: center;
    padding: var(--pocket-space-2xl) var(--pocket-space-xl);
    color: var(--pocket-text-secondary);
}

.pocket-empty p {
    margin: 0 0 var(--pocket-space-lg) 0;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Smaller phones */
@media (max-width: 360px) {
    :root {
        --pocket-space-lg: 12px;
        --pocket-font-size-2xl: 24px;
    }
    
    .pocket-main {
        padding: var(--pocket-space-md);
    }
}

/* Standard phones (390px target) */
@media (min-width: 361px) and (max-width: 430px) {
    .pocket-main {
        padding: var(--pocket-space-lg);
    }
}

/* Larger phones / small tablets */
@media (min-width: 431px) {
    .pocket-main {
        max-width: var(--pocket-max-width);
    }

    /* iPad and wider: the fixed bars keep their full-width fill, but their
       controls line up with the content column instead of the screen edges.
       100% resolves where it is used: the fixed bar's containing block, the viewport. */
    :root {
        --pocket-bar-inset: max(0px, calc((100% - var(--pocket-max-width)) / 2));
    }
}

/* ==========================================================================
   PRICE BADGES (stale mark, 24-mo Δ)
   Drawn on Prices, price detail, lots, auctions, and My Herd. The sire-horn
   medal and horn marks live in pedigree-kit.css.
   ========================================================================== */

.price-stale-mark {
    display: inline-block;
    margin-left: 4px;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 700;
    line-height: 1.2;
    padding: 1px 4px;
    border-radius: 4px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--stale);
    background-color: var(--stale-bg);
}

.pocket-price-amount .price-stale-mark,
.pocket-ledger-price .price-stale-mark,
.pocket-lot-price-amount .price-stale-mark {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    text-align: right;
}

.pocket-stale-note {
    margin: 4px 0 0;
    font-size: var(--pocket-font-size-xs, 13px);
    font-weight: 500;
    line-height: 1.35;
    color: var(--stale);
}

/* 24-Month Price Change Indicator (FIFO #9) - compact */
.pocket-price-change {
    display: inline-block;
    max-width: 100%;
    font-size: var(--pocket-font-size-xs);
    font-weight: 500;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 3px;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.pocket-price-up {
    color: var(--up);
    background-color: var(--up-bg);
}

.pocket-price-down {
    color: var(--down);
    background-color: var(--down-bg);
}

/* ▲/▼ on every Δ badge (docs/features/ONE_UI.md goal 8; owner 2026-10-09: the arrow goes before the signed label,
   which keeps its sign). Drawn from the direction class Python set; the second content line gives it empty alt text
   so screen readers read the label alone (a browser without the alt syntax keeps the first line). */
:is(.pocket-price-change.pocket-price-up, .pocket-aa-delta.up, .pocket-portfolio-change.up, .pocket-chart-change.up, .pocket-mover-change.up)::before {
    content: "\25B2\00A0";
    content: "\25B2\00A0" / "";
}

:is(.pocket-price-change.pocket-price-down, .pocket-aa-delta.down, .pocket-portfolio-change.down, .pocket-chart-change.down, .pocket-mover-change.down)::before {
    content: "\25BC\00A0";
    content: "\25BC\00A0" / "";
}

.pocket-price-flat {
    color: var(--pocket-text-secondary);
    background-color: var(--flat-bg);
}

.pocket-price-na {
    color: var(--pocket-text-muted);
    background-color: var(--na-bg);
    font-size: var(--pocket-font-size-xs);
}

/* ==========================================================================
   SHARE BUTTON
   ========================================================================== */
.pocket-share-btn {
    background: none;
    border: none;
    padding: var(--pocket-space-sm);
    cursor: pointer;
    color: var(--pocket-text-secondary);
    border-radius: var(--pocket-radius-full);
    transition: background 0.15s, color 0.15s;
}

.pocket-share-btn:hover,
.pocket-share-btn:active {
    background: var(--pocket-border-light);
    color: var(--pocket-active);
}

/* Sold-lot comps table styles: static/css/comps-table.css */


.pocket-btn-sm {
    padding: 6px 12px;
    font-size: var(--pocket-font-size-sm);
    min-width: 60px;
}

.pocket-btn-pagination {
    background: var(--pocket-card-bg);
    border: 1px solid var(--pocket-border);
    color: var(--pocket-text-primary);
    border-radius: var(--pocket-radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pocket-btn-pagination:hover:not(:disabled) {
    background: var(--pocket-bg);
    border-color: var(--pocket-active);
    color: var(--pocket-active);
}

.pocket-btn-pagination:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pocket-pagination-info {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    font-weight: 500;
    min-width: 50px;
    text-align: center;
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */
.pocket-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--pocket-border);
    border-top-color: var(--pocket-active);
    border-radius: 50%;
    animation: pocket-spin 0.7s linear infinite;
}

@keyframes pocket-spin {
    to { transform: rotate(360deg); }
}

/* "In progress" dialog: shown by pocket.js for a link or form with data-busy. */
.pocket-busy {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim-busy);
}

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

.pocket-busy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pocket-space-md);
    max-width: 280px;
    padding: var(--pocket-space-lg) var(--pocket-space-lg);
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-card-bg);
    color: var(--pocket-text-primary);
    font-size: var(--pocket-font-size-sm);
    text-align: center;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
/* Positive Δ only. A purchase price or hammer must not use this class. */
.pocket-text-green {
    color: var(--up);
}

.pocket-text-muted {
    color: var(--pocket-text-muted);
}

/* Warnings and inline errors (My Herd modals and forms). */
.pocket-text-warning {
    color: var(--danger-strong);
    font-size: var(--pocket-font-size-xs);
    font-weight: 500;
}

.pocket-text-center {
    text-align: center;
}

.pocket-mb-0 {
    margin-bottom: 0;
}

.pocket-mt-lg {
    margin-top: var(--pocket-space-lg);
}

/* ==========================================================================
   MY HERD - IMPORT SECTION
   ========================================================================== */
.pocket-import-section {
    margin: var(--pocket-space-md) 0;
    padding: var(--pocket-space-md);
    background: var(--pocket-surface);
    border-radius: var(--pocket-radius);
}

.pocket-import-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pocket-space-sm);
}

.pocket-import-form {
    margin-top: var(--pocket-space-md);
}

.pocket-form-label {
    display: block;
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    color: var(--pocket-text-primary);
    margin-bottom: var(--pocket-space-sm);
}

/* A form's actions in a bar fixed above the dock (thumb reach): My Herd add and edit. */
.pocket-form-actions-sticky {
    position: fixed;
    bottom: var(--pocket-dock-height);
    left: 0;
    right: 0;
    padding: var(--pocket-space-md) calc(var(--pocket-right-inset) + var(--pocket-space-lg)) var(--pocket-space-md) calc(var(--pocket-left-inset) + var(--pocket-space-lg));
    background: var(--pocket-card-bg);
    border-top: 1px solid var(--pocket-border);
    z-index: 50;
}

.pocket-detail-edit .pocket-form-actions-sticky {
    display: flex;
    gap: var(--pocket-space-sm);
}

.pocket-detail-edit .pocket-form-actions-sticky .pocket-btn {
    flex: 1;
}

/* A catalog listing's head-group lines (_estimate_lines.html): lot page and bid card. */
.pocket-estimate-lines p {
    margin: 0;
}

.pocket-form-help {
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    margin: var(--pocket-space-sm) 0;
    line-height: 1.4;
}

.pocket-empty-hint {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-muted);
    margin-top: var(--pocket-space-sm);
}

/* ==========================================================================
   MY HERD - ACTIONS ROW
   ========================================================================== */
.pocket-herd-actions {
    margin-bottom: var(--pocket-space-lg);
}

.pocket-herd-actions .pocket-btn {
    gap: var(--pocket-space-sm);
}

/* ==========================================================================
   HELP MODAL (mobile-friendly bottom sheet)
   ========================================================================== */
.pocket-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

.pocket-help-modal.open {
    visibility: visible;
    pointer-events: auto;
}

.pocket-help-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim-help);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pocket-help-modal.open .pocket-help-backdrop {
    opacity: 1;
}

.pocket-help-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* The iOS app in landscape: the rows clear the notch (0 elsewhere). */
    padding-left: var(--pocket-left-inset);
    padding-right: var(--pocket-right-inset);
    max-height: 85vh;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-lg) var(--pocket-radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pocket-shadow-sheet);
}

.pocket-help-modal.open .pocket-help-sheet {
    transform: translateY(0);
}

.pocket-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pocket-space-lg);
    border-bottom: 1px solid var(--pocket-border);
    flex-shrink: 0;
}

.pocket-help-title {
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    margin: 0;
    color: var(--pocket-text-primary);
}

.pocket-help-close {
    background: none;
    border: none;
    padding: var(--pocket-space-sm);
    cursor: pointer;
    color: var(--pocket-text-secondary);
    border-radius: var(--pocket-radius-full);
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pocket-help-close:hover,
.pocket-help-close:active {
    background: var(--pocket-bg);
    color: var(--pocket-text-primary);
}

.pocket-help-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--pocket-space-lg);
    -webkit-overflow-scrolling: touch;
}

.pocket-help-content h1,
.pocket-help-content h2,
.pocket-help-content h3 {
    font-size: var(--pocket-font-size-base);
    font-weight: 600;
    margin: var(--pocket-space-lg) 0 var(--pocket-space-sm);
    color: var(--pocket-text-primary);
}

.pocket-help-content h1:first-child,
.pocket-help-content h2:first-child,
.pocket-help-content h3:first-child {
    margin-top: 0;
}

.pocket-help-content p {
    font-size: var(--pocket-font-size-sm);
    line-height: 1.6;
    color: var(--pocket-text-secondary);
    margin: 0 0 var(--pocket-space-md);
}

.pocket-help-content ul,
.pocket-help-content ol {
    font-size: var(--pocket-font-size-sm);
    line-height: 1.6;
    color: var(--pocket-text-secondary);
    margin: 0 0 var(--pocket-space-md);
    padding-left: var(--pocket-space-xl);
}

.pocket-help-content li {
    margin-bottom: var(--pocket-space-xs);
}

.pocket-help-content strong {
    color: var(--pocket-text-primary);
    font-weight: 600;
}

/* Safe area for bottom sheet */
@supports (padding: env(safe-area-inset-bottom)) {
    .pocket-help-sheet {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Help and the display settings are buttons in the menu, drawn as its links */
.pocket-overflow-item.pocket-help-btn,
.pocket-overflow-item.pocket-display-setting {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: none;
    border: none;
    font-size: var(--pocket-font-size-base);
    font-family: var(--pocket-font-family);
    cursor: pointer;
}

/* A setting's value (Auto, On, Off) sits at the row's end. */
.pocket-display-value {
    margin-left: auto;
    color: var(--pocket-text-secondary);
    font-weight: 700;
}

/* ==========================================================================
   SORT & FILTER MENUS (Auctions)
   ========================================================================== */
.pocket-sort-menu,
.pocket-filter-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.pocket-menu-backdrop {
    position: absolute;
    inset: 0;
    background: var(--scrim-menu);
}

.pocket-menu-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* The iOS app in landscape: the rows clear the notch (0 elsewhere). */
    padding-left: var(--pocket-left-inset);
    padding-right: var(--pocket-right-inset);
    display: flex;
    flex-direction: column;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-xl) var(--pocket-radius-xl) 0 0;
    max-height: 85vh;
    max-height: 85dvh;
    overflow: hidden;
    box-shadow: var(--pocket-shadow-xl);
}

/* Sheet bar (owner 2026-09-30): stays put with a Done button; only the body
   scrolls, and the page behind it does not. static/pocket/sheets.js. */
.pocket-sheet-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-lg) var(--pocket-space-lg) var(--pocket-space-sm);
    border-bottom: 1px solid var(--pocket-border-light);
    flex: 0 0 auto;
}

.pocket-sheet-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--pocket-border);
}

.pocket-sheet-bar-title {
    flex: 1;
    margin: 0;
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

.pocket-sheet-done {
    min-height: var(--pocket-target-min);
    padding: 0 var(--pocket-space-md);
    border: none;
    border-radius: var(--pocket-radius-md);
    background: var(--pocket-active);
    color: var(--on-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pocket-menu-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--pocket-space-xl) + env(safe-area-inset-bottom, 0px));
}

/* A sheet whose body is a form (docs/features/POCKET_PAGE_TOPS.md goal 7, refactor (g)): Near, Filter, Mark sold.
   Top and side padding only: .pocket-menu-body keeps its safe-area bottom padding. */
.pocket-sheet-form {
    display: flex;
    flex-direction: column;
    gap: var(--pocket-space-sm);
    padding-top: var(--pocket-space-md);
    padding-inline: var(--pocket-space-lg);
}

.pocket-sheet-form .pocket-chips {
    margin-bottom: var(--pocket-space-sm);
}

body.pocket-sheet-open {
    overflow: hidden;
}

.pocket-menu-header {
    padding: var(--pocket-space-sm) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pocket-text-muted);
}

.pocket-menu-item {
    display: block;
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    font-size: var(--pocket-font-size-base);
    color: var(--pocket-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--pocket-border-light);
}

.pocket-menu-item:last-child {
    border-bottom: none;
}

.pocket-menu-item:hover,
.pocket-menu-item:active {
    background: var(--pocket-bg);
}

.pocket-menu-item.active {
    color: var(--pocket-active);
    font-weight: 500;
    background: var(--pocket-bg);
}

.pocket-menu-item.active::before {
    content: '✓ ';
}

/* Active filters section */
.pocket-active-filters {
    flex-wrap: wrap;
    gap: var(--pocket-space-xs);
    margin-bottom: var(--pocket-space-sm);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pocket-btn-pagination {
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    background: var(--pocket-card-bg);
    border: 1px solid var(--pocket-border);
    color: var(--pocket-text-primary);
    border-radius: var(--pocket-radius-md);
    text-decoration: none;
    min-width: 70px;
    text-align: center;
}

.pocket-btn-pagination:hover:not(:disabled) {
    background: var(--pocket-bg);
    border-color: var(--pocket-active);
    color: var(--pocket-active);
}

.pocket-btn-pagination:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pocket-pagination-info {
    font-size: var(--pocket-font-size-sm);
    font-weight: 500;
    color: var(--pocket-text-secondary);
    min-width: 70px;
    text-align: center;
}

/* ==========================================================================
   LOT FIELD VALUE
   The rest of the lot layout lives in lot-detail.css. This rule stays here
   because .pocket-text-down (later in this file) must keep winning on the
   My Herd detail market-change row, which carries both classes.
   ========================================================================== */
.pocket-lot-field-value {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-primary);
    font-weight: 500;
    text-align: right;
    max-width: 62%;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   SPECIES NAME (Prices rows and My Herd species groups)
   ========================================================================== */
.pocket-species-name {
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

/* ==========================================================================
   CLEAR ALL BUTTON STYLES
   ========================================================================== */
.pocket-btn-danger-outline {
    color: var(--danger);
    border-color: var(--danger);
    background: transparent;
}

.pocket-btn-danger-outline:active {
    background: var(--danger-press-bg);
}

.pocket-btn-danger {
    background: var(--danger);
    color: var(--on-fill);
    border: none;
}

.pocket-btn-danger:active {
    background: var(--danger-press);
}

/* ==========================================================================
   CONFIRMATION MODAL (Clear All)
   ========================================================================== */
.pocket-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pocket-space-lg);
}

.pocket-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--scrim);
}

.pocket-modal-content {
    position: relative;
    background: var(--pocket-card-bg);
    border-radius: var(--pocket-radius-lg);
    max-width: 320px;
    width: 100%;
    box-shadow: var(--pocket-shadow-modal);
    overflow: hidden;
}

.pocket-modal-header {
    padding: var(--pocket-space-lg);
    border-bottom: 1px solid var(--pocket-border);
}

.pocket-modal-header h3 {
    margin: 0;
    font-size: var(--pocket-font-size-lg);
    font-weight: 600;
    color: var(--pocket-text-primary);
}

.pocket-modal-body {
    padding: var(--pocket-space-lg);
}

.pocket-modal-body p {
    margin: 0 0 var(--pocket-space-sm) 0;
}

/* Default modal copy at zero specificity, so a .pocket-text-* utility on a
   paragraph (warning red, muted grey) keeps its colour and size. */
:where(.pocket-modal-body p) {
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-primary);
}

.pocket-modal-body p:last-child {
    margin-bottom: 0;
}

.pocket-modal-actions {
    display: flex;
    gap: var(--pocket-space-sm);
    padding: var(--pocket-space-lg);
    border-top: 1px solid var(--pocket-border);
    background: var(--pocket-bg);
}

.pocket-modal-actions .pocket-btn {
    flex: 1;
}

/* ==========================================================================
   BUILD VERSION DISPLAY
   Tiny muted text showing git SHA at bottom of page.
   ========================================================================== */

.build-version {
    text-align: center;
    font-family: var(--pocket-font-numeric, monospace);
    font-size: var(--pocket-font-size-sm, 15px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pocket-text-secondary);
    padding: var(--pocket-space-md, 12px) var(--pocket-space-sm, 8px);
    margin-top: var(--pocket-space-lg, 16px);
    opacity: 1;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Δ DOWN, DISABLED PRIMARY, FLASH MESSAGES (My Herd list, detail, import)
   ========================================================================== */

.pocket-text-down {
    color: var(--down);
}

.pocket-btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.pocket-flash-message {
    margin: 0 0 var(--pocket-space-md) 0;
    border-radius: var(--pocket-radius-lg);
    padding: var(--pocket-space-md);
}

.pocket-flash-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-line);
}

.pocket-flash-success {
    background: var(--success-bg);
    border: 1px solid var(--success-line);
}

.pocket-flash-info {
    background: var(--info-bg);
    border: 1px solid var(--info-line);
}

.pocket-flash-content {
    display: flex;
    gap: var(--pocket-space-sm);
    align-items: flex-start;
}

.pocket-flash-title {
    display: block;
}

.pocket-flash-message-text {
    margin: 2px 0 0 0;
}

.pocket-flash-close {
    margin-left: auto;
    background: none;
    border: none;
    min-width: var(--pocket-target-min);
    min-height: var(--pocket-target-min);
    font-size: 16px;
    color: var(--pocket-text-secondary);
}

/* ==========================================================================
   NUMBERS AND TILES (design direction 2026-09-29)
   Every price is set in the number face with tabular figures so columns of
   money line up. 
   ========================================================================== */
.pocket-price-amount,
.pocket-lot-price-amount,
.pocket-total-amount,
.pocket-appraise-stat-value,
.pocket-price-estimate-value,
.pocket-species-value,
.pocket-ledger-price,
.pocket-auction-col-price,
.pocket-added-total,
.pocket-added-figure,
.pocket-add-bar-market {
    font-family: var(--pocket-font-numeric);
    font-variant-numeric: tabular-nums;
}


/* Tinted callout for the one sentence that matters on a card. */
.pocket-callout {
    margin: var(--pocket-space-sm) 0 0;
    padding: var(--pocket-space-sm) var(--pocket-space-md);
    border-radius: var(--pocket-radius-md);
    background: var(--callout-bg);
    border: 1px solid var(--callout-line);
    color: var(--callout-ink);
    font-size: var(--pocket-font-size-sm);
}

/* ==========================================================================
   RANGE BAR (lot detail estimate, price detail low-high). A band, a tick for
   the estimate or typical price, and on a sold lot a tick for the hammer.
   ========================================================================== */
.pocket-range-bar {
    position: relative;
    height: 10px;
    margin: var(--pocket-space-md) 0 var(--pocket-space-xs);
    border-radius: 999px;
    background: var(--pocket-border-light);
}

.pocket-range-band {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--pocket-range-band);
}

.pocket-range-tick {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 16px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--pocket-active);
}

/* A sold lot's own price on the bar: ink, taller than the typical tick (docs/features/ONE_UI.md goal 7). */
.pocket-range-tick-mark {
    top: -5px;
    height: 20px;
    background: var(--pocket-text-primary);
}

.pocket-range-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--pocket-space-md);
    font-size: var(--pocket-font-size-xs);
    color: var(--pocket-text-muted);
    margin-bottom: var(--pocket-space-sm);
}

.pocket-range-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-radius: 2px;
    vertical-align: -1px;
}

.pocket-range-key-band { background: var(--pocket-range-band); }
.pocket-range-key-estimate { background: var(--pocket-active); }

.pocket-range-ends {
    display: flex;
    justify-content: space-between;
    gap: var(--pocket-space-md);
    font-size: var(--pocket-font-size-sm);
    color: var(--pocket-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pocket-range-ends b {
    color: var(--pocket-text-primary);
    font-family: var(--pocket-font-numeric);
    font-weight: 700;
}

/* The dark sell bar: what is sold and Sell (Exchange screen 3; docs/features/POCKET_PAGE_TOPS.md refactor (h), goal 10):
   Select to sell and your animal. It floats above the tab bar where a page has the dock, else just above the
   bottom edge and its safe area (neither page has the dock now). Last in this file, so the button wins over
   .pocket-btn and .pocket-btn-primary. */
.pocket-sell-bar {
    position: sticky;
    bottom: calc(var(--pocket-tab-height) + var(--pocket-space-sm));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pocket-space-md);
    padding: var(--pocket-space-md) var(--pocket-space-lg);
    border-radius: var(--pocket-radius-lg);
    background: var(--pocket-nav-bg);
    color: var(--on-chrome);
    --pocket-focus-ring: var(--on-chrome);
    box-shadow: var(--pocket-shadow-bar);
}

body:not(.pocket-has-dock) .pocket-sell-bar {
    bottom: calc(var(--pocket-space-sm) + var(--pocket-bottom-inset));
}

.pocket-sell-bar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pocket-sell-bar-text strong {
    font-size: var(--pocket-font-size-base);
}

.pocket-sell-bar-text span {
    font-size: var(--pocket-font-size-xs);
    color: var(--chrome-text);
}

/* The label wraps inside at most half the bar (ux.md: labels wrap), so "Sell on the Exchange" and the
   estimate beside it both fit at 320px and with Larger text (docs/features/POCKET_PAGE_TOPS.md goal 10). Border-box,
   so the half holds the padding on Select's <button> and the animal page's <a> alike. */
.pocket-sell-bar-btn {
    box-sizing: border-box;
    flex: 0 1 auto;
    max-width: 50%;
    min-height: 48px;
    padding: 0 var(--pocket-space-lg);
    font-size: var(--pocket-font-size-base);
    font-weight: 700;
}

.pocket-sell-bar-btn:disabled {
    opacity: 0.5;
}

/* Typeahead on pocket pages: the pocket type tokens (the field token is at least 16px, so iOS does not zoom on focus). */
:root[data-surface="pocket"] .typeahead-filter-input {
    font-size: var(--pocket-font-size-field);
}

:root[data-surface="pocket"] .typeahead-filter-empty {
    font-size: var(--pocket-font-size-sm);
}