/**
 * 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;
}

/* Tap feedback while the next page loads (pocket.js). The tapped link keeps a
   tint until the next page replaces it, as an iOS row stays highlighted during
   a push. The tint is the link's own text colour, which always contrasts with
   its surface (dark on rows, light on the green dock and primary buttons), drawn
   as an inset shadow so it follows the corners. */
.pocket-link-pending {
    box-shadow: inset 0 0 0 100vmax var(--brand-glow);
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 18%, transparent);
}

/* The top bar: mint with a brand edge, so it reads on light pages and on the
   dark-green banner and header alike. It creeps toward the right and never
   finishes; the next page replaces it. */
.pocket-nav-bar {
    position: fixed;
    top: var(--pocket-top-inset);
    left: 0;
    z-index: 1001;
    width: 90%;
    height: 4px;
    background: var(--brand-band);
    box-shadow: 0 1px 0 var(--pocket-active), 0 0 8px var(--brand-glow-strong);
    border-radius: 0 2px 2px 0;
    transform-origin: left;
    animation: pocket-nav-creep 8s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
    pointer-events: none;
}

@keyframes pocket-nav-creep {
    from { transform: scaleX(0.1); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pocket-nav-bar {
        animation: none;
        transform: scaleX(0.5);
    }
}

.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);
}