/* Market page. Tokens and components (tiles, cards, chips, charts, tables) come from style.css;
   this file only lays out the list's filter bar and the item view. */

:root {
  --chart-trades: #7a80d0; /* closed trades: neither sell nor buy */
}

/* ---------- item list: search, type chips, filters ---------- */

.market-tools { margin-bottom: var(--sp-3); }
.market-tools .search { flex: 1 1 18rem; max-width: 28rem; }
.market-tools .search input, .market-tools .search input:focus { width: 100%; }
/* The filter form folds away behind this button on phones only */
.filters-toggle { display: none; }
.filters-toggle .n { min-width: 1.25rem; padding: 0 0.35rem; border-radius: 2px; background: var(--gold-soft); color: var(--gold-hi); font: 600 var(--step--2)/1.5 var(--num); text-align: center; }
.filters-toggle .n:empty { display: none; }

.chips.types { margin-bottom: var(--sp-4); }

/* Each filter is a small label over its control */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-5); }
.filters .field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.filters .field > label:not(.check), .filters .field > legend { display: block; margin: 0; padding: 0; color: var(--muted); font: 600 var(--step--2)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
/* A floated legend is laid out like the other labels, not on the fieldset border */
.filters .field > legend { float: left; width: 100%; }
.filters .ctl { display: flex; align-items: center; gap: var(--sp-2); }
.filters .range .ctl { gap: 0.35rem; }
.filters .range .ctl > span { color: var(--muted); }
.filters input.num { width: 5rem; font-size: var(--step--1); }
.filters select, .filters .dir { font-size: var(--step--1); }
.filters .dir { min-width: 7.5rem; }
/* The checkbox and reset sit at the end of the row */
.filters .end { flex-direction: row; align-items: center; gap: var(--sp-4); margin-left: auto; min-height: 2.1rem; }
.filters .check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); color: var(--ivory); text-transform: none; letter-spacing: 0; }

/* ---------- item view ---------- */

.item-head.panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); margin-top: 0; }
.item-title { flex: 1 1 16rem; min-width: 0; }
.item-head .meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0 0; }
.item-actions { align-self: center; }

/* Variant and range pickers, each with a label, on one bar above the charts */
.item-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: var(--sp-5) 0 var(--sp-2); }
.item-controls .chips { margin: 0; }
.item-controls .eyebrow { color: var(--muted); }

.book .scroll-x { margin: 0 calc(-1 * var(--sp-2)); }
.book tr.mine td { background: var(--gold-soft); }
.book td .chip { margin-left: var(--sp-1); }
.books-all { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-2); font-size: var(--step--1); }

/* Post an order: side, then the order's fields on one wrapping row, then visibility and the button */
.post { margin-top: var(--sp-5); }
.post-form .chips.sides { margin: 0 0 var(--sp-3); }
.post-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); }
.post-fields .field { display: flex; flex-direction: column; gap: var(--sp-1); }
.post-fields .eyebrow { color: var(--muted); }
.post-fields input.num { width: 7rem; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.post-actions .check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--step--1); }
.post-status { font-size: var(--step--1); color: var(--muted); }
.post-status.ok { color: var(--ok); }
.post-status.bad { color: var(--danger); }
.my-orders:not(:empty) { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.my-orders p { margin: 0 0 var(--sp-2); font-size: var(--step--1); }
.my-orders ul.mine { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }
.my-orders ul.mine .chip { margin-right: var(--sp-1); }

/* ---------- phone ---------- */

@media (max-width: 40rem) {
  .market-tools { flex-wrap: nowrap; }
  .market-tools > .search { flex: 1 1 auto; max-width: none; }
  .filters-toggle { display: inline-flex; flex: none; align-self: stretch; }

  /* Type chips scroll sideways in one line under soft edges */
  .chips.types {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sp-3));
    padding: 2px var(--sp-3);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sp-3), #000 calc(100% - var(--sp-3)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--sp-3), #000 calc(100% - var(--sp-3)), transparent);
  }
  .chips.types::-webkit-scrollbar { display: none; }
  .chips.types button { flex: none; }

  .filters:not(.open) { display: none; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); animation: rise 280ms var(--ease); }
  .filters .field:first-child, .filters .end { grid-column: 1 / -1; }
  .filters .ctl > select, .filters .ctl > .dir { flex: 1 1 0; min-width: 0; }
  .filters .field > select { width: 100%; }
  .filters .range .ctl { justify-content: flex-start; }
  .filters input.num { width: 100%; min-width: 0; flex: 1 1 0; }
  .filters .end { justify-content: space-between; margin-left: 0; }

  /* Each row is a card: the item, then its four numbers side by side */
  table.market.stack tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2); }
  table.market.stack td:first-child { grid-column: 1 / -1; }
  table.market.stack td.hide-sm { display: none; }
  table.market.stack td[data-label] { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
  table.market.stack td[data-label]::before { font-size: 0.6875rem; letter-spacing: 0.04em; }
  table.market .variant { margin-left: var(--sp-2); }

  .item-head.panel { gap: var(--sp-3) var(--sp-4); }
  .item-head .thumb.big { width: 3.75rem; height: 3.75rem; }
  .item-title { flex-basis: 0; }
  .item-head h2 { font-size: var(--step-2); }
  .item-actions { flex: 1 1 100%; }
  .item-actions > * { flex: 1 1 0; }
  .item-controls { gap: var(--sp-3); margin-top: var(--sp-4); }
}