/* ASM Market (/market/). Phones first (375 px, 16 px gutters, 44 px targets), black /
   grey / white from the shared tokens in public.css. Blue (--game-accent*) appears only
   on the "Playable in Offline District" chip; rarity uses the --rarity-* tokens through
   [data-tone]. Every rule is scoped to the Market page. No web fonts or images of its own;
   motion (the sheet slide and the confirming spinner) runs only without reduced motion. */

body[data-page="market"] { --tone: var(--rarity-common); }
body[data-page="market"] .portal-main { max-width: 1320px; overflow-x: clip; }
body[data-page="market"] :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
body[data-page="market"] .button { min-height: 44px; white-space: normal; text-align: center; }
body[data-page="market"] [hidden] { display: none !important; }

/* Rarity tones: one token per tier, lowest to highest (Super Rare above Mythic). */
body[data-page="market"] [data-tone] { --tone: var(--rarity-common); }
body[data-page="market"] [data-tone="uncommon"] { --tone: var(--rarity-uncommon); }
body[data-page="market"] [data-tone="rare"] { --tone: var(--rarity-rare); }
body[data-page="market"] [data-tone="very-rare"] { --tone: var(--rarity-very-rare); }
body[data-page="market"] [data-tone="epic"] { --tone: var(--rarity-epic); }
body[data-page="market"] [data-tone="legendary"] { --tone: var(--rarity-legendary); }
body[data-page="market"] [data-tone="mythic"] { --tone: var(--rarity-mythic); }
body[data-page="market"] [data-tone="super-rare"] { --tone: var(--rarity-super-rare); }

/* Hero: compact on phones so the first row of cards is in view. ------------------- */
.market-hero { display: grid; gap: 8px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(180deg, var(--bg-elevated), var(--bg-base)); }
.market-hero-copy { display: grid; gap: 8px; min-width: 0; }
.market-hero .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--ink-secondary); }
.market-network { padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 11px; letter-spacing: .1em; }
body[data-page="market"] .market-hero h1 { margin: 0; font-size: clamp(36px, 10vw, 84px); line-height: .9; font-weight: 800; letter-spacing: -.05em; text-transform: uppercase; }
.market-lede { max-width: 58ch; margin: 0; color: var(--ink-secondary); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.market-facts-line { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.market-facts { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.market-facts li { display: grid; gap: 4px; min-width: 0; padding: 12px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--accent-soft); }
.market-facts strong { font-size: clamp(22px, 6vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.market-facts span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; }
.market-hero-actions { display: flex; gap: 8px; }
.market-hero-actions .button { flex: 1 1 0; padding: 0 10px; font-size: 12px; }

body[data-page="market"] .market-status { min-height: 0; margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
/* Phones: the tab badges already show the counts, so only a notice uses this line. */
@media (max-width: 599px) { body[data-page="market"] .market-status[data-kind="count"] { display: none; } }

/* Tabs ------------------------------------------------------------------------ */
.market-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-base); }
.market-tabs [role="tab"] { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; }
.market-tabs [role="tab"]:hover { background: var(--accent-soft); color: var(--ink); }
.market-tabs [role="tab"][aria-selected="true"] { background: var(--accent-fill); color: var(--accent-ink); }
.market-tabs [data-market-count]:empty { display: none; }
.market-tabs [data-market-count] { min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--accent-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.market-tabs [aria-selected="true"] [data-market-count] { background: var(--accent-ink); color: var(--accent-fill); }

/* Filters: a bottom sheet on phones and tablets, a sticky sidebar on wide screens. -- */
.market-browse { display: grid; gap: 12px; }
.market-filters { min-width: 0; }
.market-filter-toggle { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; justify-content: center; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; cursor: pointer; }
.market-filter-panel { display: none; gap: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-base); }
.market-filter-panel[data-open="true"] { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 85vh; overflow: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: var(--bg-elevated); }
.market-filter-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .66); }
.market-filter-done { position: sticky; bottom: 0; width: 100%; }
.market-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.market-filter-group legend { margin: 0 0 8px; padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.market-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.market-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink-secondary); font: inherit; font-size: 13px; cursor: pointer; }
.market-chip:hover { border-color: var(--accent-line); color: var(--ink); }
.market-chip[aria-pressed="true"] { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); }
.market-chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.market-price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.market-price-range label, .market-sort { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body[data-page="market"] .market-filters :is(input:not([type="checkbox"]), select) { width: 100%; min-height: 44px; border-radius: 8px; font-size: 16px; }
.market-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 14px; cursor: pointer; }
.market-check input { flex: none; width: 22px; height: 22px; accent-color: var(--accent-fill); }
.market-check:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.market-hint { margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.market-hint:empty { display: none; }
.market-reset, .market-link { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--accent-bright); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; justify-self: start; }
.market-link { min-height: 0; font-size: inherit; letter-spacing: 0; }

/* Cards: 2-up on phones -------------------------------------------------------- */
.market-results { min-width: 0; }
/* Square image cards: each keeps its own height (no stretching to a taller neighbour). */
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.market-card { min-width: 0; border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line-strong)); border-radius: 14px; background: var(--bg-elevated); overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 320px; }
.market-card:hover { border-color: color-mix(in srgb, var(--tone) 60%, var(--line-strong)); }
.market-card-open { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.market-card-media { position: relative; display: block; aspect-ratio: 1; background: var(--bg-base); overflow: hidden; }
.market-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--subtle); font-size: 18px; font-weight: 800; letter-spacing: .1em; }
/* A dark badge with a line, so it reads on light product renders too. */
.market-provenance { position: absolute; top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-base); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Name and meta take a line each; the price and the In game chip share the last line when they fit. */
.market-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 10px 12px; min-width: 0; }
.market-card-body > * { flex: 1 1 100%; min-width: 0; }
.market-card-body > :is(.market-price, .market-chip-game) { flex: 0 1 auto; }
.market-card-body > .market-skeleton-line.short { flex: 0 0 55%; }
.market-card-name { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.market-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.market-price { color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-price strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.market-rarity { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 70%, #fff); font-size: 11px; font-weight: 700; white-space: nowrap; }
/* The one blue surface on this page: the item can be worn in the game. Cards use the one-line form. */
.market-chip-game { justify-self: start; max-width: 100%; padding: 3px 8px; border: 1px solid var(--game-accent-line); border-radius: 7px; background: var(--game-accent-soft); color: var(--game-accent-bright); font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.market-chip-game.is-compact { padding: 2px 7px; white-space: nowrap; }
.market-card.is-skeleton { border-color: var(--line); }
.market-card.is-skeleton .market-card-media { background: var(--bg-hover); }
.market-skeleton-line { display: block; height: 12px; border-radius: 6px; background: var(--bg-hover); }
.market-skeleton-line.short { width: 55%; }

/* Empty, error and signed-out states -------------------------------------------- */
.market-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 32px 18px; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; color: var(--ink-secondary); }
body[data-page="market"] .market-empty h2 { margin: 0; color: var(--ink); font-size: clamp(22px, 6vw, 30px); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
.market-empty p { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.55; }
.market-empty .eyebrow { font-size: 11px; font-weight: 700; }
.market-hint-links { display: grid; gap: 2px; }
.market-hint-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.market-muted { margin: 0; color: var(--muted); font-size: 14px; }
.market-signed-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; }
.market-signed-out p { margin: 0; color: var(--ink-secondary); }

/* Sections: partners, my listings, sell ------------------------------------------ */
.market-section { margin: 32px 0 0; }
.market-section-head { display: grid; gap: 6px; margin: 0 0 14px; }
.market-section-head .eyebrow { margin: 0; font-size: 11px; font-weight: 700; }
body[data-page="market"] .market-section-head h2 { margin: 0; font-size: clamp(24px, 7vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: .95; text-transform: uppercase; }
.market-section-head p { max-width: 62ch; margin: 0; color: var(--ink-secondary); font-size: 14px; }
/* Outside listings (view only): an ON XRP.CAFE badge and a link row; the card opens xrp.cafe in a new tab. */
.market-card.is-outside { border-style: dashed; }
.market-venue { background: var(--ink); color: var(--bg-base); border-color: var(--ink); }
.market-outside-action { flex: 1 1 100%; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: underline; text-underline-offset: 3px; }
.market-outside-note { margin: -4px 0 12px; color: var(--ink-secondary); font-size: 13px; line-height: 1.45; }
/* The four ASM collections on xrp.cafe (Connor 2026-10-30): plain links, two-up on phones. */
.market-cafe-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.market-cafe-list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
.market-cafe-list a:hover { border-color: var(--accent-line); }
body[data-page="market"] .market-subhead { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.market-subhead + .market-muted { margin: 0 0 12px; }
@media (min-width: 900px) { .market-cafe-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Four tabs on a phone: two rows of two, so every label and its count fit (375 px checked). */
@media (max-width: 520px) { .market-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } }
/* Phones: a compact list (art, name, link); wider: cards with one line of copy. */
.market-partner-grid { display: grid; gap: 8px; }
.market-partner-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated); }
.market-partner-art { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--bg-base); border: 1px solid var(--line); }
.market-partner-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-partner-art b { color: var(--ink); font-size: 20px; font-weight: 800; }
.market-partner-card > div { min-width: 0; }
.market-partner-card .eyebrow { margin: 0; font-size: 11px; font-weight: 700; }
body[data-page="market"] .market-partner-card h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.market-partner-card p:not(.eyebrow) { display: none; margin: 4px 0 0; color: var(--ink-secondary); font-size: 14px; }
.market-partner-card .button { padding: 0 10px; font-size: 11px; }
.market-mine-list, .market-sell-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.market-mine-row, .market-sell-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--line-strong)); border-radius: 12px; background: var(--bg-elevated); }
.market-mine-row > img, .market-sell-row > img, .market-mine-row > .market-card-placeholder, .market-sell-row > .market-card-placeholder { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--bg-base); font-size: 11px; }
.market-mine-row > div, .market-sell-row > div { display: grid; gap: 3px; min-width: 0; }
.market-mine-row strong, .market-sell-row strong { font-size: 14px; overflow-wrap: anywhere; }
.market-mine-row span, .market-sell-row span { color: var(--muted); font-size: 12px; }
.market-mine-row .button, .market-sell-row .button { min-width: 44px; padding: 0 12px; font-size: 12px; }
.market-sell-row .button:disabled { opacity: .5; cursor: not-allowed; }
.market-paused-note { margin: 0 0 10px; }
.market-blocked-group { margin-top: 10px; border: 1px solid var(--line-strong); border-radius: 12px; }
.market-blocked-group summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink-secondary); font-size: 13px; font-weight: 700; cursor: pointer; }
.market-blocked-group[open] summary { border-bottom: 1px solid var(--line); }
.market-block-reasons { margin: 10px 14px; padding-left: 18px; color: var(--ink-secondary); font-size: 13px; line-height: 1.5; }
.market-sell-list.is-blocked { padding: 0 10px 10px; }
.market-sell-list.is-blocked .market-sell-row { grid-template-columns: 56px minmax(0, 1fr); opacity: .8; }

/* Page bar: a wallet request still running while the sheet is closed. */
.market-flowbar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.market-flowbar p { margin: 0; color: var(--ink); font-size: 13px; min-width: 0; }
.market-flowbar .button { flex: none; padding: 0 14px; font-size: 12px; }
/* While the bar shows, the page ends above it. */
body[data-page="market"]:has(.market-flowbar:not([hidden])) .portal-main { padding-bottom: 88px; }

/* Bottom sheet ------------------------------------------------------------------ */
body[data-page="market"] .market-sheet { width: 100%; max-width: 100%; max-height: 92vh; margin: auto auto 0; padding: 0; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--bg-elevated); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
body[data-page="market"] .market-sheet::backdrop { background: rgba(0, 0, 0, .72); }
/* A sticky bar keeps the grip and the close button in view; content scrolls under it, never beside it. */
.market-sheet-bar { position: sticky; top: 0; z-index: 3; height: 64px; background: var(--bg-elevated); }
.market-sheet-grip { position: absolute; top: 10px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--line-strong); }
.market-sheet-close { position: absolute; top: 14px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-base); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.market-sheet-body { display: grid; gap: 16px; padding: 0 16px 24px; }
.market-sheet-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.market-sheet-media { width: 96px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg-base); }
.market-sheet-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-sheet-title { display: grid; gap: 6px; min-width: 0; }
.market-sheet-title .eyebrow { margin: 0; font-size: 11px; font-weight: 700; }
body[data-page="market"] .market-sheet-title h2 { margin: 0; font-size: clamp(20px, 5.5vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.market-sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.market-provenance-tag { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-base); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.market-description { margin: 0; color: var(--ink-secondary); font-size: 14px; }
.market-breakdown { display: grid; gap: 0; margin: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.market-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line); }
.market-breakdown > div:first-child { border-top: 0; }
.market-breakdown dt { color: var(--muted); font-size: 13px; }
.market-breakdown dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.market-breakdown dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The seller's key figure reads like the Shop checkout's Total. */
.market-breakdown > .is-total { border-top: 1px solid var(--line-strong); background: var(--accent-soft); }
.market-breakdown > .is-total dt { color: var(--ink); font-size: 14px; font-weight: 700; }
.market-breakdown > .is-total dd { font-size: 18px; font-weight: 800; }
.market-buy, .market-history-block { display: grid; gap: 10px; }
body[data-page="market"] :is(.market-buy, .market-history-block, .market-blocked) h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-secondary); }
.market-safety { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent-fill); background: var(--accent-soft); color: var(--ink-secondary); font-size: 13px; line-height: 1.5; }
.market-safety strong { color: var(--ink); }
.market-tech { color: var(--muted); font-size: 12px; }
.market-tech summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.market-tech p { margin: 0 0 6px; line-height: 1.5; }
.market-tech code { font-size: 12px; color: var(--ink-secondary); }
.market-primary { width: 100%; }
.market-terms, .market-fine { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.market-terms a { text-decoration: underline; text-underline-offset: 3px; }
.market-note { margin: 0; color: var(--ink-secondary); font-size: 14px; }
.market-warning { margin: 0; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: 10px; color: var(--ink); font-size: 14px; }
.market-blocked { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-base); }
.market-blocked p { margin: 0; color: var(--ink-secondary); }
.market-blocked .button { justify-self: start; }
/* The sticky footer: the final price in large type and the one primary action, always in view. */
.market-sheet-foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin: 0 -16px -24px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); background: var(--bg-elevated); }
.market-sheet-foot:empty { display: none; }
.market-foot-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.market-foot-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.market-foot-price span { color: var(--muted); font-size: 13px; }
.market-foot-price .market-foot-network { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-secondary); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.market-sheet-notice { margin: 0; padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--accent-soft); color: var(--ink); font-size: 13px; line-height: 1.5; }
.market-keep { justify-self: center; min-height: 44px; }
.market-flow { display: grid; gap: 12px; justify-items: center; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-base); text-align: center; }
.market-flow p { margin: 0; color: var(--ink); font-size: 14px; }
.market-flow[data-phase="failed"] { justify-items: start; text-align: left; }
.market-flow .button { width: 100%; }
.market-flow .market-link { min-height: 44px; justify-self: center; }
/* Phones: OPEN XAMAN first (this phone signs); the smaller QR is for another device. */
.market-flow .market-qr-label { color: var(--muted); font-size: 12px; }
.market-qr { padding: 8px; border-radius: 12px; background: var(--accent-bright); }
.market-qr img { display: block; width: 160px; height: 160px; }
.market-joey { justify-items: stretch; text-align: left; }
.market-joey-total { display: grid; gap: 4px; }
.market-joey-total span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.market-joey-total strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.market-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; vertical-align: -1px; }
.market-tx { color: var(--ink-secondary); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
/* Receipt: the Shop's purchase-complete pattern, in the sheet. */
.market-receipt { display: grid; justify-items: center; gap: 8px; padding: 18px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg-base); text-align: center; }
.market-receipt.is-short { justify-items: stretch; text-align: left; }
.market-receipt-art { width: 140px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg-elevated); }
.market-receipt-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-receipt .eyebrow { margin: 6px 0 0; font-size: 11px; font-weight: 700; }
body[data-page="market"] .market-receipt-title { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; }
.market-receipt-name { margin: 0; color: var(--ink-secondary); font-size: 15px; }
.market-receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; margin: 6px 0 0; padding: 12px 0; border-block: 1px solid var(--line); }
.market-receipt-total span { color: var(--muted); font-size: 13px; }
.market-receipt-total strong { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.market-receipt.is-short .market-receipt-total { border: 0; padding: 0; }
.market-receipt-actions { display: grid; gap: 8px; width: 100%; }
.market-history { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.market-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line); font-size: 13px; }
.market-history li:first-child { border-top: 0; }
.market-history time { color: var(--muted); font-variant-numeric: tabular-nums; }
.market-history a { display: grid; place-items: center; width: 44px; height: 44px; }

/* Sell form */
.market-sell-form { display: grid; gap: 14px; }
.market-field { display: grid; gap: 6px; }
.market-field span, .market-duration legend { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body[data-page="market"] .market-field input { width: 100%; min-height: 52px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.market-duration { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.market-duration legend { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; }
.market-duration label { position: relative; }
.market-duration input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.market-duration span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-secondary); font-size: 13px; font-weight: 700; }
.market-duration input:checked + span { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); }
.market-duration input:focus-visible + span { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.market-quote { min-height: 44px; }
.market-quote-hint { margin: 0; color: var(--muted); font-size: 13px; }
.market-quote-hint.is-error { color: var(--ink); font-weight: 600; }
.market-quote-hint.is-error::before { content: "! "; }

@media (prefers-reduced-motion: no-preference) {
  body[data-page="market"] .market-sheet[open] { animation: market-sheet-up .22s ease-out; }
  .market-spinner { animation: market-spin .8s linear infinite; }
  @keyframes market-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes market-spin { to { transform: rotate(360deg); } }
}

@media (min-width: 600px) {
  .market-hero { gap: 16px; padding: 22px 18px 18px; }
  .market-lede { display: block; overflow: visible; font-size: 15px; }
  .market-facts-line { display: none; }
  .market-facts { display: grid; }
  .market-hero-actions { flex-wrap: wrap; }
  .market-hero-actions .button { flex: 0 0 auto; padding: 0 18px; font-size: inherit; }
  .market-tabs [role="tab"] { gap: 8px; padding: 0 12px; font-size: 13px; letter-spacing: .04em; }
  .market-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .market-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .market-partner-card { grid-template-columns: 64px minmax(0, 1fr); align-content: start; padding: 16px; }
  .market-partner-art { width: 64px; height: 64px; }
  .market-partner-card p:not(.eyebrow) { display: block; }
  .market-partner-card .button { grid-column: 1 / -1; justify-self: start; padding: 0 18px; font-size: inherit; }
  .market-sheet-head { grid-template-columns: 140px minmax(0, 1fr); }
  .market-sheet-media { width: 140px; }
}

/* Computers: the QR comes first (the phone scans it), then OPEN XAMAN. */
@media (min-width: 641px) {
  .market-flow[data-phase="wallet"] .market-qr { order: 1; }
  .market-flow[data-phase="wallet"] .market-xaman-link { order: 2; }
  .market-flow[data-phase="wallet"] .market-link { order: 3; }
  .market-flow .market-qr-label { display: none; }
  .market-qr img { width: 200px; height: 200px; }
}

@media (min-width: 751px) {
  .market-hero { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: end; padding: 32px; }
  .market-hero-actions { grid-column: 1 / -1; }
  body[data-page="market"] .market-sheet { width: min(680px, calc(100% - 48px)); margin: auto; border-bottom: 1px solid var(--line-strong); border-radius: 18px; max-height: 88vh; }
  .market-sheet-grip { display: none; }
  .market-sheet-body { padding: 0 28px 28px; }
  .market-sheet-foot { margin: 0 -28px -28px; padding: 16px 28px 20px; }
  .market-flowbar { left: auto; right: 24px; bottom: 24px; max-width: 480px; }
}

@media (min-width: 1024px) {
  .market-browse { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  .market-browse:has(> .market-filters[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .market-filters { position: sticky; top: 20px; }
  .market-filter-toggle, .market-filter-done, .market-filter-scrim { display: none !important; }
  .market-filter-panel, .market-filter-panel[data-open="true"] { display: grid; position: static; max-height: none; overflow: visible; margin-top: 0; border-radius: 12px; border-bottom: 1px solid var(--line-strong); padding: 16px; background: var(--bg-base); }
}