/* trade — Marketplace and Exchange. Layout and page-specific visuals only: buttons, fields, tabs,
   chips, pills, tables and empty states are the shared components (docs/DESIGN.md). */
@layer pages {
  /* ══ Marketplace ══════════════════════════════════════════════════════════════════════════ */
  .mk-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .mk-summary .chip .icon { color: var(--text-3); }

  /* What to buy: market (top right), then products, then qualities. */
  .mk-browse { display: flex; flex-direction: column; gap: var(--sp-5); }
  .mk-browse .card-head { margin-bottom: 0; flex-wrap: wrap; }
  .mk-market { width: 240px; max-width: 100%; }

  /* Pickers: segmented strips of tiles. The chosen tile lifts like a selected tab. */
  /* Finished goods above raw materials; every tile in both strips has the same size. */
  .mk-products { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
  .mk-group { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
  .mk-strip, .mk-qualities { display: grid; gap: 2px; padding: 3px; border-radius: calc(var(--r-md) + 3px); background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
  .mk-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-product, .mk-quality { display: flex; flex-direction: column; align-items: center; min-width: 0; border-radius: var(--r-md); color: var(--text-2); text-align: center;
    transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-base); }
  .mk-product { justify-content: flex-start; gap: var(--sp-2); height: 108px; padding: var(--sp-3) var(--sp-1) var(--sp-2); font: var(--fw-semibold) var(--fs-sm) / 1.25 var(--font-ui); }
  .mk-product > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mk-product img { width: 48px; height: 48px; object-fit: contain; opacity: .78; filter: var(--art-shadow) saturate(.5);
    transition: opacity var(--t-base), filter var(--t-base), transform var(--t-base) var(--ease); }
  .mk-product:hover:not(.active), .mk-quality:hover:not(.active) { color: var(--text); background: var(--surface-3); }
  .mk-product:hover img { opacity: 1; filter: var(--art-shadow); transform: translateY(-1px); }
  .mk-product.active, .mk-quality.active { color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow-1), var(--highlight); }
  .mk-product.active img { opacity: 1; filter: var(--art-shadow); }
  .mk-product:focus-visible, .mk-quality:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  /* Not open yet (as on the companies page): a padlock on the art, which turns grey. */
  .mk-product-art { position: relative; }
  .mk-product .lock { position: absolute; top: -4px; right: -10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    color: var(--text-2); background: var(--surface-raised); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
  .mk-product:disabled { cursor: not-allowed; color: var(--text-3); }
  .mk-product:disabled:hover { background: none; }
  .mk-product:disabled img, .mk-product:disabled:hover img { opacity: .6; filter: var(--art-shadow) grayscale(1); transform: none; }

  .mk-qualities { grid-auto-flow: column; grid-auto-columns: 88px; align-self: flex-start; max-width: 100%; }
  .mk-quality { justify-content: center; gap: 6px; min-height: 60px; padding: var(--sp-2) var(--sp-1); }
  .mk-quality img { width: 44px; height: 44px; object-fit: contain; opacity: .78; filter: var(--art-shadow) saturate(.5); transition: opacity var(--t-base), filter var(--t-base), transform var(--t-base) var(--ease); }
  .mk-quality:hover img, .mk-quality.active img { opacity: 1; filter: var(--art-shadow); }
  .mk-quality:hover img { transform: translateY(-1px); }
  /* Quality stars: lit in brand yellow, the rest a quiet outline of the scale. */
  .mk-quality .stars { display: flex; gap: 0; font-size: var(--fs-xs); line-height: 1; letter-spacing: -.04em; }

  /* Offers: product art, seller, supply, price (sortable), quantity, total, buy. */
  .mk-table .row { grid-template-columns: 48px minmax(0, 1.6fr) minmax(64px, .6fr) minmax(96px, .9fr) minmax(136px, 1.2fr) minmax(104px, .9fr) 104px; }
  .mk-table .mk-qty-col { text-align: center; }
  .mk-table .num { text-align: right; justify-content: flex-end; }
  .mk-art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .mk-art img { width: 34px; height: 34px; object-fit: contain; filter: var(--art-shadow); }
  .mk-seller { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  .mk-seller .who { min-width: 0; }
  .mk-supply { color: var(--text-2); }
  .mk-price b, .ex-amount b { font: var(--fw-semibold) var(--fs-h3) / 1 var(--font-display); letter-spacing: .01em; color: var(--text); }
  .mk-price small, .ex-amount small { margin-left: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-3); }
  .mk-price.short b { color: var(--text-3); }
  /* The price column, the one that matters, on a green band (as the net salary on the jobs page). */
  .mk-table .mk-price, .mk-table .mk-price-head { align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
    margin-block: calc(-1 * var(--sp-2)); padding-inline: var(--sp-3); background: var(--green-soft); color: var(--green-text); }
  .mk-table .mk-price b { color: var(--green-text); }
  .mk-table .mk-price small { color: inherit; opacity: .75; }
  .mk-qty { display: flex; justify-content: center; }
  .mk-total { color: var(--text-2); white-space: nowrap; }
  .mk-buy { display: flex; justify-content: flex-end; }
  .mk-buy .btn { min-width: 84px; }
  .mk-cell-label { display: none; }
  .mk-art-col { min-width: 0; }

  /* The price header sorts the list. */

  .mk-loading, .ex-loading { display: flex; flex-direction: column; gap: var(--sp-2); }
  .mk-loading .skeleton, .ex-loading .skeleton { height: 52px; border-radius: var(--r-md); }
  .mk-offers .card.inset .empty > img { width: 56px; height: 56px; filter: var(--art-shadow); }

  /* ══ Exchange ═════════════════════════════════════════════════════════════════════════════ */
  .ex-limit { display: flex; align-items: center; gap: var(--sp-1); }
  .ex-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); }
  .ex-currency { width: 280px; max-width: 100%; }
  /* The switch sits on the same line as the currency field and is exactly as tall as it. */
  .ex-toolbar .tabs { align-self: flex-end; box-sizing: border-box; height: var(--h-md); }
  .ex-toolbar .tab { min-height: 0; height: 100%; }

  .ex-table .row { grid-template-columns: minmax(0, 1.2fr) minmax(104px, .9fr) minmax(150px, 1.2fr) 176px minmax(110px, 1fr) 96px; }
  .ex-table .num { text-align: right; justify-content: flex-end; }
  .ex-seller { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  .ex-seller .who { min-width: 0; }
  .ex-rate { color: var(--text-2); white-space: nowrap; }
  .ex-rate b { color: var(--text); }
  .ex-input .input-group { width: 100%; }
  .ex-cost { color: var(--text-2); white-space: nowrap; }
  .ex-cell-label { display: none; }
  .ex-buy { display: flex; justify-content: flex-end; }
  .ex-buy .btn { min-width: 84px; }

  .ex-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--sp-4); align-items: start; }
  /* The button lines up with the controls, below the labels. */
  .ex-form > .btn { margin-top: calc(var(--fs-sm) * 1.3 + 6px); }
  .ex-note { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
  .ex-note .icon { color: var(--text-3); }

  .ex-mine-table .row { grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.3fr) auto; }
  .ex-mine .card-head .badge { flex: none; white-space: nowrap; }
  .ex-actions, .ex-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
  .ex-edit .input-group { width: 150px; }

  /* ══ Phones ═══════════════════════════════════════════════════════════════════════════════ */
  @media (max-width: 900px) {
    .ex-form { grid-template-columns: 1fr 1fr; }
    .ex-form > .btn { grid-column: 1 / -1; margin-top: 0; }
  }
  @media (max-width: 720px) {
    .mk-browse .card-head > div { flex-basis: 100%; }
    .mk-market { width: 100%; }
    .mk-qualities { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: stretch; }

    .mk-table .row.head, .ex-table .row.head { display: none; }
    .mk-table .row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "art seller price" "art supply total" "qty qty buy"; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; }
    .mk-art { grid-area: art; align-self: start; }
    .mk-seller { grid-area: seller; }
    .mk-price { grid-area: price; }
    .mk-table .mk-price { margin-block: 0; padding-inline: 0; background: none; }
    .mk-supply { grid-area: supply; justify-self: start; text-align: left; font-size: var(--fs-sm); }
    .mk-total { grid-area: total; font-size: var(--fs-sm); }
    .mk-qty { grid-area: qty; justify-content: flex-start; margin-top: var(--sp-2); }
    .mk-buy { grid-area: buy; align-self: end; }
    .mk-cell-label, .ex-cell-label { display: inline; font-size: inherit; color: var(--text-3); }

    .ex-table .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "seller buy" "amount rate" "input cost"; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; }
    .ex-table .ex-seller { grid-area: seller; }
    .ex-table .ex-buy { grid-area: buy; }
    .ex-table .ex-amount { grid-area: amount; justify-self: start; }
    .ex-table .ex-rate { grid-area: rate; }
    .ex-table .ex-input { grid-area: input; }
    .ex-table .ex-cost { grid-area: cost; align-self: center; font-size: var(--fs-sm); }
    .ex-currency { width: 100%; }
    .ex-toolbar .tabs { width: 100%; }

    .ex-mine-table .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ex-mine-table .row.head { display: none; }
    .ex-mine-table .ex-amount { justify-self: start; }
    .ex-actions, .ex-edit { grid-column: 1 / -1; justify-content: stretch; }
    .ex-actions .btn, .ex-edit .btn { flex: 1; }
    .ex-edit .input-group { width: auto; flex: 1 1 140px; }
  }
  @media (max-width: 480px) {
    .ex-form { grid-template-columns: 1fr; }
  }
}