/* ════════════════════════════════════════════════════════════════════════
   src/styles/market.css — THE WEIGHHOUSE (src/shell/windows/market/).
   A window on desktop, the same component as a slide-out sheet on a phone. It reads as a
   counting-house ledger in the Forged Steel window: the list and the page are the two steel
   panels of the Hunts window; asks and sales are ruled ledger lines, never cards. Charcoal
   and Gold, tokens only.
   ════════════════════════════════════════════════════════════════════════ */
.hs-win[data-hs-win="market"] .hs-win-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.hw-mk { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hw-mk-greet { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 2px 6px; font-size: var(--t-small); font-style: italic; color: var(--ink-2); }
.hw-mk-purse { flex: none; font-style: normal; font-size: var(--t-small); color: var(--gold-2); font-variant-numeric: lining-nums tabular-nums; }
.hw-mk .hw-tabs { align-items: flex-end; }
.hw-mk-refresh { margin-left: auto; margin-bottom: 2px; }
.hw-mk-state { margin: 0 2px 8px; color: var(--ink); }
.hw-mk-state[hidden] { display: none; }
.hw-mk-msg { flex: none; margin-top: 6px; }
.hw-mk-msg:empty { display: none; }

/* The panes fill the window; the list and the page scroll in their own panels. */
.hw-mk .hw-pane.is-on { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hw-mk-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 12px; }
.hw-mk-cols[hidden] { display: none; }
.hw-mk-list { min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; background: var(--fill-1); border: 2px solid var(--steel-edge); }
.hw-mk-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-bottom: 2px solid var(--steel-sep); cursor: pointer; }
.hw-mk-row:last-child { border-bottom: 0; }
.hw-mk-row:hover { background: var(--fill-2); }
.hw-mk-row.is-picked { background: var(--fill-3); box-shadow: inset 0 0 0 2px var(--gold), inset 6px 0 0 var(--gold), inset 8px 4px 0 var(--fill-0); }
.hw-mk-row:focus-visible { outline: 2px solid var(--aqua-2); outline-offset: -2px; }
.hw-mk-row .hw-ico { width: 40px; height: 40px; }
.hw-mk-row .hw-ico .hh-icon { width: 32px; height: 32px; }
.hw-mk-row .hw-line-name small { white-space: normal; line-height: 1.25; }
.hw-mk-page { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--fill-1); border: 2px solid var(--steel-edge); border-left-color: var(--steel-rule); }
.hw-mk-page[hidden] { display: none; }
.hw-mk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.hw-mk-title { min-width: 0; }
/* THE SELL SHEET KEEPS ITS NAME ON SCREEN (designer 2026-11-05, screen 09: "Banded Signet (Surge)" cut at the top when the price field took
   the scroller down). The head holds the top of its scroller, and a long graded name ("Hallmarked Banded Signet (Keen, Follow-through)")
   sets at the panel-title size and wraps, so it reads whole in two lines. */
.hw-mk-sell .hw-mk-head { position: sticky; top: 0; z-index: 1; background: var(--fill-1); }
.hw-mk-sell .hw-mk-name { font-size: var(--t-h2); overflow-wrap: anywhere; }
.hw-mk-kind { padding: 0; }
.hw-mk-kind::before, .hw-mk-kind::after { display: none; }
.hw-mk-lore { margin: 12px 0 0; font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.hw-mk-lore:empty, .hw-mk-price:empty { display: none; }
.hw-mk-price { margin: 0; font-size: var(--t-small); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }

/* The asks: a ledger, the price in gold, how many, and your own with Cancel. */
.hw-mk-asks, .hw-mk-sales { margin: 0; padding: 0; list-style: none; }
.hw-mk-ask { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-height: 30px; border-top: 2px solid var(--steel-sep); font-variant-numeric: lining-nums tabular-nums; }
.hw-mk-ask-p { min-width: 96px; color: var(--gold-2); }
.hw-mk-ask-n { color: var(--ink); }
.hw-mk-ask-own { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hw-mk-yours { font-size: var(--t-micro); color: var(--ink-2); }

/* Buy: quantity, where it goes, the one press and what it leaves. */
.hw-mk-foot { display: none; flex: none; padding: 8px 18px 10px; border-top: 2px solid var(--steel-rule); }
.hw-mk-foot.is-on { display: block; }
.hw-mk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hw-mk-chips .hh-num { width: 88px; }
.hw-mk-chips .hh-seg[hidden] { display: none; }
.hw-mk-goes { display: flex; align-items: center; gap: 6px; font-size: var(--t-small); color: var(--ink-2); }
.hw-mk-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.hw-mk-do .hw-primary { margin-left: auto; }
.hw-mk-forget[hidden] { display: none; }
.hw-mk-after, .hw-mk-warn { margin: 4px 0 0; font-size: var(--t-micro); }
.hw-mk-after:empty, .hw-mk-warn:empty { display: none; }
.hw-mk-warn { color: var(--gold-2); }

/* The 30-day line: one bar a day it sold, gold on steel, pixels not curves. */
.hw-mk-line { display: flex; align-items: flex-end; gap: 2px; height: 48px; padding: 2px 0; border-bottom: 2px solid var(--steel-rule); }
.hw-mk-line[hidden] { display: none; }
.hw-mk-bar { display: block; flex: 0 1 12px; min-width: 2px; background: var(--gold); }
.hw-mk-line-note { margin: 4px 0 0; }
.hw-mk-line-note[hidden] { display: none; }
.hw-mk-sale { min-height: 24px; font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.hw-mk-page .hw-hd-h[hidden] { display: none; }

/* Sell. */
.hw-mk-from { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
.hw-mk-sheet { display: none; }
.hw-mk-sheet.is-on { display: block; }
.hw-mk-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 0; margin: 0 0 8px; font-size: var(--t-small); font-variant-numeric: lining-nums tabular-nums; }
.hw-mk-facts dt { color: var(--ink-2); }
.hw-mk-facts dd { margin: 0; color: var(--ink); }
.hw-mk-field { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 4px; margin-bottom: 6px; font-size: var(--t-small); color: var(--ink-2); }
.hw-mk-field > label { min-width: 72px; }
.hw-mk-terms { margin: 0; font-size: var(--t-micro); line-height: 1.35; color: var(--ink); }
.hw-mk-terms:empty { display: none; }
.hw-mk-kept { flex: 1 1 200px; margin: 0 0 0 10px; text-align: right; }
.hw-mk-kept:empty { display: none; }

/* The empty market, and an empty book: said plainly, with the way forward. */
.hw-mk-invite { display: none; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 20px 24px; background: var(--fill-1); border: 2px solid var(--steel-edge); }
.hw-mk-invite.is-on { display: flex; }
.hw-mk-invite-p { margin: 0; max-width: 52ch; line-height: 1.45; color: var(--ink); }
.hw-mk-none { display: none; flex-direction: column; align-items: flex-start; gap: 8px; }
.hw-mk-none.is-on { display: flex; }
.hw-mk-book { overflow: auto; }
.hw-mk-book .hw-line-name b { white-space: normal; font-weight: 500; }

/* THE SHEET ON A PHONE: the list first; a pick opens its page in the list's place, with the way back on top. */
@media (max-width: 540px), (max-height: 540px) and (max-width: 1024px) {
  .hw-mk-greet > span { display: none; }
  .hw-mk-greet { justify-content: flex-end; margin-bottom: 2px; }
  .hw-mk .hw-tab { padding: 4px 6px; white-space: nowrap; }
  /* The toolbar on a wider font: the search gives way, the sort keeps its select and drops its word. */
  .hw-mk .hw-search { flex: 1 1 0; min-width: 0; }
  /* Refresh stands in the purse's row: four tabs and it never fit a 320 px sheet (panel 2026-11-01: cut in half). */
  .hw-mk { position: relative; }
  .hw-mk-greet { align-items: center; min-height: 40px; }
  .hw-mk-refresh { position: absolute; top: 0; left: 0; margin: 0; }
  /* A PICKED STACK HAS THE SHEET (panel: 86 px of scroll, How many and Price each never on screen together): no purse, no
     tabs (its Back is the way out), its name small, and the two fields first, right above the pinned List; what it
     would fetch and the terms come after them, a scroll down. */
  .hw-mk:has(.hw-mk-sell.is-on.is-paged) > :is(.hw-mk-greet, .hw-tabs) { display: none; }
  .hw-mk-sell.is-paged .hw-hd-page { padding: 0 8px; }
  .hw-mk-sell.is-paged .hw-hd-back { margin: 0; }
  .hw-mk-sheet.is-on { display: flex; flex-direction: column; }
  .hw-mk-sell .hw-mk-head { margin-bottom: 2px; }
  .hw-mk-sell .hw-mk-ico, .hw-mk-sell .hw-mk-kind { display: none; }
  .hw-mk-sell .hw-mk-name { font-size: var(--t-small); }
  .hw-mk-sell .hw-mk-facts { order: 1; }
  .hw-mk-field { flex-wrap: nowrap; margin-bottom: 2px; }
  .hw-mk-field > label { flex: none; min-width: 0; width: 56px; line-height: 1.1; }
  .hw-mk-field .hw-mk-chips { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .hw-mk-field .hh-num { flex: none; width: 64px; }
  .hw-mk-field .hh-seg { flex: none; }
  .hw-mk .is-paged .hw-mk-kept { display: none; }
  /* A SHORT SCREEN CANNOT SPARE A FOOT: the whole page scrolls as one, and only the press stays pinned at the bottom
     of the sheet, always in reach (QA 10-24: Equip sat a scroll away). The 30-day line waits for a bigger screen. */
  .hw-mk-page .hw-hd-page { flex: none; overflow: visible; }
  .hw-mk-head .hw-ico { width: 40px; height: 40px; }
  .hw-mk-head .hw-ico .hh-icon { width: 32px; height: 32px; }
  .hw-mk-foot { padding: 0; border-top: 0; }
  .hw-mk-foot.is-on { display: contents; }
  .hw-mk-foot > :not(.hw-mk-do) { margin: 4px 12px; }
  .hw-mk-foot > :empty { display: none; }
  .hw-mk-do { position: sticky; bottom: 0; z-index: 1; flex-wrap: nowrap; margin: 6px 0 0; padding: 6px 12px; background: var(--fill-1); border-top: 2px solid var(--steel-rule); }
  .hw-mk-do .hw-primary { flex: none; }
  .hw-mk-goes { flex: 1 1 0; min-width: 0; }
  .hw-mk-goes > span { display: none; }
  .hw-mk-goes .hh-select { width: 100%; min-width: 0; }
  .hw-mk-line, .hw-mk-line-h, .hw-mk-line-note { display: none; }
  /* Under a list it costs two rows of a short screen: said only when it is why the list is empty. */
  .hw-mk-kept { display: none; flex-basis: 100%; margin: 2px 0 0; text-align: left; }
  .hw-mk-sell.is-bare .hw-mk-kept { display: block; }
  .hw-mk-cols { display: flex; flex-direction: column; }
  .hw-mk-list { flex: 1 1 auto; }
  .hw-mk-page { display: none; }
  .hw-mk-row { min-height: 44px; }
  .hw-mk .is-paged .hw-mk-list, .hw-mk .is-paged .hw-find, .hw-mk .is-paged .hw-cats, .hw-mk .is-paged .hw-mk-from { display: none; }
  .hw-mk .is-paged .hw-mk-page:not([hidden]) { display: block; flex: 1 1 auto; overflow: auto; }
  .hw-mk .hh-seg, .hw-mk .hh-select, .hw-mk .hh-num, .hw-mk .hh-tool { min-height: 40px; }
  .hw-mk-invite { padding: 12px 14px; }
  .hw-mk-facts { margin-bottom: 6px; }
}