/* Market & economy windows: Marketplace (mk-), Bank (bk-), General Merchant / Black Market (sh-, bm-). */

/* ------------------------------------------------------------------ shared bits */

.mk-silver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mk-silver::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: -2px;
  background: var(--coin-stack) center / contain no-repeat;
}

.mk-silver.pos {
  color: var(--good);
}

.mk-silver.neg {
  color: var(--error);
}

.mk-none,
.mk-dim {
  color: var(--text-faint);
  font-size: 12px;
}

.mk-hint {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-faint);
}

.mk-warn {
  min-height: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warn);
}

.mk-warn:empty {
  display: none;
}

.mk-warn.info {
  color: #2a5f9a;
}

.mk-empty {
  padding: 18px 10px;
  text-align: center;
  font-style: italic;
  color: var(--text-faint);
}

.mk-span {
  grid-column: 1 / -1;
}

.mk-sub-title {
  margin: 10px 0 6px;
  padding-bottom: 3px;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 700;
  color: #4a2a10;
  border-bottom: 1px solid var(--border-dim);
}

.mk-icon {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 2px 4px rgba(60, 34, 10, 0.4);
}

.mk-icon > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.mk-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mk-name-text {
  font-weight: 700;
  font-size: 14px;
}

/* Item names read as dark ink on paper (the tier shows on the icon tile); quality colours set
   inline were chosen for dark ground and get a thin dark halo. */
.panel-body .mk-name-text[style],
.mk-dialog .mk-name-text[style] {
  color: var(--ink) !important;
}

#ui .panel-body .mk-quality,
#ui .panel-body .mk-ob-q,
#ui .mk-dialog .mk-quality,
#ui .panel-body .mk-ench,
#ui .mk-dialog .mk-ench {
  padding: 0 6px;
  line-height: 1.5;
  text-shadow: none;
  background: rgba(38, 25, 14, 0.9);
  border-radius: 999px;
}

/* Enchantment suffix (".1" / ".2" / ".3", coloured inline by level). */
.mk-ench {
  margin-left: 3px;
  font-weight: bold;
  text-shadow: 0 0 1px #1a0f06, 0 0 3px currentcolor, 0 1px 1px #1a0f06;
}

.mk-quality {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.mk-item-sub {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
}

.mk-worn {
  color: var(--warn);
}

.mk-qty-note {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ marketplace panel */

.mk-panel {
  height: min(640px, calc(100vh - 80px));
}

/* The body is a size container: a short window (1280x720: ui.js caps it between the HUD bands)
   gets the compact list and footer, see @container mk-body. */
.mk-panel .panel-body.mk-body {
  container: mk-body / size;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 8px;
  overflow: hidden;
}

.mk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.mk-tabs {
  flex: 1;
  margin-bottom: 0;
}

.mk-tab-count {
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 17px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  border: 1px solid #2a0604;
  border-radius: 8px;
}

.mk-tab-count:empty {
  display: none;
}

.tab.mk-attn .mk-tab-count {
  box-shadow: 0 0 8px rgba(255, 90, 60, 0.8);
}

/* Silver in the wooden header (Albion: top-right of the window). */
.mk-purse {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 14px 2px 8px;
  font-size: 17px;
  font-weight: 700;
  color: #eef1f5;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
}

.mk-views {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-top: 2px;
}

.mk-view {
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
}

.mk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-dim);
}

.mk-foot-trader {
  margin-left: auto;
  font-style: italic;
}

.mk-foot-region {
  flex-basis: 100%;
  font-weight: 600;
  color: #1f6a62;
  cursor: help;
}

.mk-dot {
  color: var(--gold-dim);
}

/* ---- Buy: search and filters in the wooden header band (Albion 08) */

.mk-headband {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 6px 8px;
}

.mk-headband .mk-select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 150px;
}

.mk-search-wrap {
  display: flex;
  flex: 1.4 1 0;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.mk-search {
  flex: 1 1 auto;
  min-width: 80px;
}

.mk-refresh {
  flex: none;
}

/* ---- Buy: results (full-width parchment list) */

.mk-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.mk-list-title {
  margin: 0 2px 6px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #4a2a10;
}

.mk-select {
  max-width: 160px;
}

.mk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px 172px 112px;
  align-items: stretch;
  gap: 0;
  min-height: 70px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

/* Faint vertical separators between the columns. */
.mk-row > span {
  display: flex;
  align-items: center;
  padding: 4px 12px;
}

.mk-row:not(.mk-row-head) > span + span {
  border-left: 1px solid rgba(110, 72, 34, 0.2);
}

.mk-row:not(.mk-row-head):nth-child(even) {
  background: rgba(255, 244, 222, 0.26);
}

.mk-row:not(.mk-row-head):hover,
.mk-row:focus-visible {
  outline: none;
  background: rgba(255, 236, 200, 0.55);
}

/* Column headers: metal-framed pills spanning the list (the Buy column has an empty one). */
.mk-row-head,
.mk-order-row.mk-row-head {
  min-height: 0;
  padding: 0 0 6px;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: default;
  border-bottom: none;
}

.mk-row-head > span,
.mk-order-row.mk-row-head > span {
  display: block;
  min-height: 22px;
  padding: 2px 10px;
  background: linear-gradient(180deg, #f5e3bd, #dcc08c);
  border: 1.5px solid #5d646e;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #1c1f24, inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mk-order-row.mk-row-head > span:empty {
  visibility: hidden;
}

.mk-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.mk-col-item {
  gap: 12px;
  min-width: 0;
}

.mk-row .mk-col-item {
  padding-left: 6px;
}

.mk-item-text {
  min-width: 0;
}

.mk-row .mk-name-text {
  font-size: 15px;
}

.mk-col-price {
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
}

/* Prices in large bold ink with the coin stack. */
.mk-row:not(.mk-row-head) .mk-col-price .mk-silver {
  font-size: 16.5px;
  font-weight: 800;
  color: #3a2212;
}

.mk-col-price .mk-qty-note {
  flex-basis: 100%;
  margin-left: 20px;
}

.mk-col-act {
  justify-content: center;
}

.mk-col-act .btn.small {
  min-width: 84px;
  min-height: 30px;
  font-size: 14px;
}

.mk-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

.mk-result-count {
  margin-right: auto;
  font-size: 11.5px;
  color: var(--text-faint);
}

.mk-page-info {
  min-width: 90px;
  font-size: 12px;
  text-align: center;
  color: var(--text-dim);
}

/* ---- Buy: order book */

.mk-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-dim);
}

.mk-detail-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
}

.mk-ob-cols {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  padding-top: 8px;
}

.mk-ob {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.mk-ob-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 10px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: #4a2a10;
  border-bottom: 1px solid var(--border-dim);
}

.mk-ob-sell .mk-ob-title {
  box-shadow: inset 3px 0 0 #6aa84f;
}

.mk-ob-buy .mk-ob-title {
  box-shadow: inset 3px 0 0 #3d7be0;
}

.mk-ob-total {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}

.mk-ob-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.mk-ob-row {
  display: grid;
  grid-template-columns: 96px 60px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}

.mk-ob-row.mk-ob-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.mk-ob-row:not(.mk-ob-head):hover {
  background: rgba(255, 240, 200, 0.5);
}

/* Own orders: the green highlighted row of the order book. */
.mk-ob-row.mine {
  color: #fff;
  background: linear-gradient(90deg, #6d8f2a, #87a83a 70%, rgba(135, 168, 58, 0.4));
}

.mk-ob-row.mine .mk-silver,
.mk-ob-row.mine .mk-ob-n,
.mk-ob-row.mine .mk-ob-who,
.mk-ob-row.mine .mk-ob-mine {
  color: #fff;
}

.mk-ob-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.mk-ob-q {
  font-size: 10.5px;
  font-weight: bold;
}

.mk-ob-n {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.mk-ob-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

.mk-ob-who.npc {
  font-style: italic;
  color: #7a5a2a;
}

.mk-ob-who.mine,
.mk-ob-mine {
  color: var(--gold);
}

.mk-ob-mine {
  font-size: 11px;
}

.mk-ob-act {
  text-align: right;
}

.mk-ob-act .btn {
  min-width: 50px;
}

/* ---- dialogs (inside the panel) */

.mk-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 12, 4, 0.5);
  border-radius: 10px;
  animation: mk-fade 0.12s ease-out;
}

@keyframes mk-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialogs are loose parchment sheets with torn left / right edges and no wooden frame (Albion
   09); an order dialog gets a second sheet with the item's order lists beside it. */
.mk-sheets {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.7));
}

.mk-dialog {
  position: relative;
  width: min(420px, calc(100vw - 24px));
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 22px 16px;
  background:
    var(--paper-noise),
    radial-gradient(ellipse at 50% 30%, var(--parch-hi), var(--parch) 58%, var(--parch-lo));
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(92, 56, 20, 0.35), inset 0 0 30px rgba(150, 78, 26, 0.45);
  -webkit-mask: var(--rag-mask);
  mask: var(--rag-mask);
}

.mk-dialog.mk-sheet-main.mk-order-dlg,
.mk-dialog.mk-order-dlg {
  width: 440px;
}

.mk-dialog.mk-sheet-side {
  width: 330px;
  margin-left: -4px;
  padding: 16px 20px;
  background:
    var(--paper-noise),
    radial-gradient(ellipse at 40% 30%, var(--parch-hi), var(--parch) 60%, var(--parch-lo));
}

/* Round gold close button on the sheet's corner. */
.mk-dialog-x {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 26px;
  height: 26px;
  padding: 0 0 2px;
  font: 900 19px/1 var(--font);
  color: #2a1606;
  cursor: pointer;
  background: radial-gradient(circle at 42% 30%, #fff6c4 0%, #f6d467 26%, #d09a2a 62%, #8a5a12 100%);
  border: 2px solid #3a2410;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* Green "Action" band (Albion 09). */
.mk-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
}

.mk-action-label {
  flex: none;
  font-weight: 700;
  color: var(--ink);
}

.mk-action-band {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 26px 2px 8px;
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f4ffd8;
  background: linear-gradient(180deg, #7d9a2c, #5d7a1c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}

#ui .mk-action-band {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.mk-action-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6c4, #f0c64a 45%, #8a5a12);
  box-shadow: 0 0 0 1.5px #3a2410;
}

/* Red fee / tax lines. */
.mk-sum-row.mk-fee .mk-sum-label,
.mk-sum-row.mk-fee .mk-silver {
  color: var(--error);
}

/* Order lists sheet: Sell Orders | Buy Orders, the chosen row as a green band. */
.mk-book-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mk-bs-title {
  margin-bottom: 4px;
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 800;
  color: #4a2a10;
}

.mk-bs-head,
.mk-bs-row {
  display: grid;
  grid-template-columns: 16px 1fr 46px;
  align-items: center;
  gap: 6px;
}

.mk-bs-head {
  padding: 0 14px 3px 26px;
  grid-template-columns: 1fr 46px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-dim);
}

.mk-bs-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
}

.mk-bs-row {
  min-height: 28px;
  padding: 2px 14px 2px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.mk-bs-row.pick {
  cursor: pointer;
}

.mk-bs-row.pick:hover {
  background: rgba(255, 236, 200, 0.6);
}

.mk-bs-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a929c, #3a4048);
  box-shadow: 0 0 0 1px #1c1f24;
}

.mk-bs-row.sel {
  color: #f4ffd8;
  background: linear-gradient(180deg, #7d9a2c, #5d7a1c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

.mk-bs-row.sel .mk-silver {
  color: #f4ffd8;
}

.mk-bs-row.sel .mk-bs-dot {
  background: radial-gradient(circle at 40% 35%, #fff6c4, #f0c64a 45%, #8a5a12);
}

.mk-bs-row.mine {
  font-style: italic;
  opacity: 0.8;
}

.mk-bs-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Brass amount slider with a value bubble above the stepper. */
.mk-qty-slide {
  --f: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 220px;
}

.mk-range-wrap {
  position: relative;
  width: 100%;
  padding-top: 20px;
}

.mk-range {
  width: 100%;
  margin: 0;
}

.mk-range-bubble {
  position: absolute;
  top: 0;
  left: calc(8px + (100% - 16px) * var(--f));
  min-width: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #f6ead0;
  background: linear-gradient(180deg, #4b535e, #262b32);
  border: 1px solid #111;
  border-radius: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.mk-sum-row:has(.mk-qty-slide) {
  align-items: flex-end;
}

.mk-dialog-title {
  margin-bottom: 10px;
  padding-bottom: 5px;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 700;
  color: #4a2a10;
  border-bottom: 1px solid var(--border-dim);
}

.mk-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mk-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.mk-dlg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.mk-dlg-item-text {
  min-width: 0;
}

.mk-dlg-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.mk-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  font-size: 13.5px;
}

/* Bold labels ("Amount", "Price each") like the order window. */
.mk-sum-label {
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}

.mk-box .mk-sum-row {
  flex-wrap: wrap;
  row-gap: 3px;
}

.mk-box .mk-sum-row > :last-child {
  margin-left: auto;
}

.mk-sum-row.mk-sum-total {
  margin-top: 2px;
  padding-top: 5px;
  font-size: 13.5px;
  border-top: 1px dashed var(--border-dim);
}

.mk-sum-row.mk-sum-total .mk-sum-label {
  font-weight: bold;
  color: var(--text);
}

.mk-sum-row.mk-sum-dim {
  opacity: 0.75;
}

/* ---- quantity stepper & price field */

.mk-qty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* -/+ become round steel buttons (the Max button stays a slate pill). */
.mk-qty .btn.small:not(.mk-max) {
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  border-radius: 50%;
}

.mk-qty .btn.small.mk-max {
  width: auto;
  min-height: 24px;
  margin-left: 4px;
  padding: 0 10px;
  font-size: 12px;
}

.mk-qty-input {
  width: 62px;
  padding: 3px 6px !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mk-price-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mk-price-field {
  position: relative;
  display: inline-flex;
}

.mk-price-field::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: var(--coin-stack) center / contain no-repeat;
  pointer-events: none;
}

.mk-price-input {
  width: 118px;
  padding: 4px 12px 4px 26px !important;
  text-align: right;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.mk-price-field.bad .mk-price-input {
  border-color: var(--error);
}

/* ---- Sell tab */

.mk-sell-left {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 316px;
  min-height: 0;
}

.mk-sell-left .mk-sub-title {
  margin-top: 0;
}

.mk-sell-grid {
  --slot: 44px;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(var(--cols, 6), var(--slot));
  grid-auto-rows: var(--slot);
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.mk-sell-slot.selected {
  box-shadow: 0 0 0 2px #7aa032, 0 0 10px rgba(130, 180, 50, 0.7);
}

.mk-sell-slot.damaged > canvas {
  filter: grayscale(0.8) brightness(0.7);
}

.mk-slot-price.none {
  color: var(--text-faint);
}

.mk-slot-price {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  padding: 0 2px;
  font-size: 9.5px;
  font-weight: bold;
  line-height: 12px;
  text-align: center;
  color: #eef1f5;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px 6px 3px 3px;
  pointer-events: none;
  text-shadow: 0 1px 1px #000;
}

.mk-sell-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.mk-sell-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-dim);
  text-align: center;
  border: 1px dashed var(--border-dim);
  border-radius: 4px;
}

.mk-sell-empty.drop-hover {
  border-color: #8a4f12;
  background: rgba(255, 240, 200, 0.4);
}

.mk-sell-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mk-info-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.mk-info-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.mk-sell-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.mk-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.mk-box-title {
  margin-bottom: 2px;
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 700;
  color: #4a2a10;
}

.mk-box .btn-row {
  margin-top: 6px;
}

/* Sell form: "Sell Now" / "Place Sell Order" stay in sight at the bottom of the scrolling sell
   pane when the window is short (pt12 c0-AkFirst-04: at 1280x720 both sat below the fold, the
   first click hit the footer). The bar is opaque so the rows scroll under it. */
.mk-sell-boxes .mk-box > .btn-row {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 6px -10px -10px;
  padding: 6px 10px 10px;
  background: linear-gradient(var(--well), var(--well)), var(--parch);
  border-top: 1px solid var(--border-dim);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 -6px 6px -6px rgba(60, 36, 12, 0.4);
}

/* Sell Instantly: the amount stepper shares the sticky bar with the button, so the amount being
   sold is always in sight (pt12 c2-03); in the two-column layout they take a line each. */
.mk-sell-boxes .mk-box > .btn-row.mk-sell-now {
  align-items: center;
  row-gap: 6px;
}

/* ---- My Orders */

.mk-orders-view,
.mk-claims-view {
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.mk-orders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.mk-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 110px 96px 96px 72px 70px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}

.mk-order-n {
  font-variant-numeric: tabular-nums;
}

.mk-side {
  justify-self: start;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
}

.mk-side.sell {
  color: #fff;
  background: linear-gradient(180deg, #7aa03a, #4f7020);
  border: 1px solid #2a3c10;
  border-radius: 999px;
}

.mk-side.buy {
  color: #fff;
  background: linear-gradient(180deg, #4f86c8, #2c5890);
  border: 1px solid #142a48;
  border-radius: 999px;
}

.mk-orders {
  flex: 0 0 auto;
}

.mk-log {
  display: flex;
  flex-direction: column;
}

.mk-log-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
}

.mk-log-row.expired {
  opacity: 0.75;
}

/* ---- Claims */

.mk-claims {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mk-claims-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mk-claims-top .mk-sub-title {
  margin-top: 0;
}

.mk-claims-silver {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 6px 12px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.mk-claim-grid {
  --slot: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--slot));
  gap: 4px;
  padding: 6px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

/* ------------------------------------------------------------------ bank */

.bk-panel .panel-body.bk-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.bk-used {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.bk-used.full {
  color: var(--warn);
}

.bk-actions {
  display: flex;
  gap: 6px;
}

/* Filter row: search pill, Tier, Category, round reset (client-side: hides tiles only). */
.bk-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.bk-search {
  flex: 1 1 auto;
  min-width: 0;
}

.bk-select {
  flex: 0 1 auto;
  max-width: 108px;
}

.bk-reset {
  flex: none;
}

/* 6-column scrolling well (Albion's narrow bank): the grid scrolls, the window stays put. */
.bk-grid {
  --slot: 50px;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(var(--cols, 6), var(--slot));
  grid-auto-rows: var(--slot);
  align-content: start;
  justify-content: center;
  gap: 5px;
  min-height: 120px;
  max-height: calc(100vh - 330px);
  padding: 7px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  box-shadow: inset 0 1px 4px rgba(90, 56, 20, 0.25);
}

.bk-slot.bk-hidden {
  display: none;
}

.bk-vaults:empty {
  display: none;
}

/* ------------------------------------------------------------------ merchant & black market */

.sh-panel {
  min-height: 320px;
}

.sh-body {
  display: flex;
  flex-direction: column;
}

.sh-body .mk-sub-title:first-child {
  margin-top: 0;
}

.sh-stock,
.bm-list {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.sh-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 84px auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}

.sh-row.bm-row {
  grid-template-columns: 38px minmax(0, 1fr) 100px auto;
}

.sh-row.dim {
  opacity: 0.6;
}

.sh-name {
  min-width: 0;
}

/* Merchant wares: one line per row (full name in the title/tooltip) keeps rows even. */
.sh-oneline,
.sh-oneline .mk-name-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-total {
  text-align: right;
}

.sh-sell {
  padding: 8px;
  background: var(--well);
  border: 1px dashed var(--border-dim);
  border-radius: 3px;
}

.sh-sell.drop-hover {
  border-color: var(--gold-bright);
}

.sh-drop {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sh-drop .mk-hint {
  margin-top: 0;
}

.sh-drop-slot {
  --slot: 44px;
}

.sh-sell-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sh-sell-info {
  flex: 1 1 120px;
  min-width: 0;
}

.bm-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(150, 40, 30, 0.22), rgba(150, 40, 30, 0.04));
  border: 1px solid rgba(150, 50, 40, 0.45);
  border-radius: 8px;
}

.bm-intro .mk-hint {
  margin-top: 2px;
}

.bm-title {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: #7a1c12;
}

.bm-list.drop-hover {
  border-color: var(--gold-bright);
}

/* ------------------------------------------------------------------ short windows */

/* At 1280x720 ui.js caps the Marketplace between the HUD bands (339 px) and the Buy tab showed one
   70 px offer row (pt12 c2-03). On a short body the list title gives way, the offer rows and their
   icons get smaller and the footer keeps one line (the fee rates are in the sell and buy forms
   too), so at least three offers show. */
@container mk-body (max-height: 360px) {
  .mk-views {
    padding-top: 0;
  }

  .mk-list-title {
    display: none;
  }

  .mk-row-head {
    padding: 0 0 3px;
  }

  .mk-row:not(.mk-row-head) {
    min-height: 42px;
  }

  .mk-row:not(.mk-row-head) > span {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .mk-row .mk-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .mk-pager {
    padding-top: 4px;
  }

  .mk-foot {
    flex-wrap: nowrap;
    margin-top: 4px;
    padding-top: 3px;
    white-space: nowrap;
  }

  .mk-foot-fee,
  .mk-foot > .mk-dot {
    display: none;
  }

  .mk-foot-region {
    flex: 1 1 auto;
    order: -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 900px) {
  .mk-row {
    grid-template-columns: minmax(0, 1fr) 118px 118px 84px;
  }

  .mk-sell-left {
    width: 268px;
  }

  .mk-sell-boxes {
    grid-template-columns: 1fr;
  }

  .mk-order-row {
    grid-template-columns: minmax(0, 1fr) 64px 96px 84px 70px 64px 64px;
  }
}