/* ==========================================================================
   Game — Market (unit D). Prefix gm-mk-.
   ==========================================================================
   LiFE RPG's Marketplace in the dashboard's own voice: picture cards with a
   mono price line, the account strip above them, stalls below. Tokens only;
   coins are gold (--warning), a debt or an overdraft warning is --critical,
   HP restored is --good-text, as in core.css.                              */

.gm-mk-mono, .gm-mk-price {
  font-family: var(--s-mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.gm-mk-mono { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.gm-mk-bad { color: var(--critical); }

/* --- account --------------------------------------------------------------- */

.gm-mk-account { display: flex; flex-direction: column; gap: 12px; }
.gm-mk-hold { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gm-mk-hold .gm-eyebrow { margin-bottom: 4px; }
.gm-mk-hold-hp { text-align: right; }
.gm-mk-acc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm-mk-acc {
  appearance: none; font: inherit; color: var(--text-primary); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px; padding: 11px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s);
}
.gm-mk-acc:hover { border-color: var(--border-strong); }
.gm-mk-acc-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.gm-mk-acc-t svg { color: var(--accent); }
.gm-mk-acc-v { font-family: var(--s-mono); font-size: 11px; color: var(--text-secondary); line-height: 1.4; }

.gm-mk-warn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: var(--radius-s);
  font-size: 13px; line-height: 1.45; color: var(--text-secondary);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent);
}
.gm-mk-warn b { color: var(--text-primary); font-weight: 600; }
.gm-mk-warn-title { color: var(--critical); font-weight: 600; }
.sheet .gm-mk-warn { margin: 2px 0 10px; }

/* --- the shop ----------------------------------------------------------- */

.gm-mk-seg { display: flex; width: 100%; margin-bottom: 12px; }
.gm-mk-seg button { flex: 1; }
.gm-mk-foot { display: block; margin: 12px auto 0; }

.gm-mk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .gm-mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gm-mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gm-mk-item {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.gm-mk-item-open {
  appearance: none; background: none; border: 0; padding: 0 0 8px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px; font: inherit; color: var(--text-primary); flex: 1;
}
.gm-mk-item-open > :not(.gm-mk-img) { margin: 0 11px; }
.gm-mk-img {
  display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); color: var(--accent);
}
.gm-mk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-mk-item-name { font-size: 14px; font-weight: 600; line-height: 1.25; margin-top: 4px !important;
  overflow-wrap: anywhere; }
.gm-mk-save { display: flex; flex-direction: column; gap: 3px; }
.gm-mk-save .gm-squares i { width: 7px; height: 7px; }
.gm-mk-item-act { display: flex; gap: 6px; padding: 0 11px 11px; }
.gm-mk-item-act .btn { flex: 1; padding: 8px 6px; font-size: 10.5px; letter-spacing: 0.08em; white-space: nowrap; }

.gm-mk-empty .sub { line-height: 1.55; margin: 4px 0 10px; }

/* --- stalls -------------------------------------------------------------- */

.gm-mk-stalls { display: grid; gap: 12px; }
@media (min-width: 760px) { .gm-mk-stalls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.gm-mk-stall { display: flex; flex-direction: column; gap: 12px; }
.gm-mk-stall-head { display: flex; align-items: center; gap: 11px; }
.gm-mk-stall-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--surface-2); color: var(--accent);
}
.gm-mk-stall-title { font-size: 14.5px; font-weight: 600; }
.gm-mk-stall-body { display: flex; flex-direction: column; gap: 10px; }

.gm-mk-tier {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  padding: 9px 0; border-top: 1px solid var(--grid);
}
.gm-mk-tier .hint { grid-column: 1; }
.gm-mk-tier .btn { grid-column: 2; grid-row: 1 / span 2; min-width: 82px; }
.gm-mk-tier-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: 14px; font-weight: 500; }
.gm-mk-tier-chips { display: inline-flex; gap: 5px; }

/* --- cart and history --------------------------------------------------- */

.gm-mk-cartsum { display: flex; flex-direction: column; gap: 9px; }
.gm-mk-cartsum > .btn { align-self: flex-start; margin-top: 4px; }
.gm-mk-kv { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.45; }

.gm-mk-lines { padding-top: 4px; padding-bottom: 4px; }
.gm-mk-line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--grid);
}
.gm-mk-line:last-child { border-bottom: 0; }
.gm-mk-hist {
  appearance: none; width: 100%; background: none; border-width: 0 0 1px; border-style: solid;
  border-color: var(--grid); font: inherit; color: var(--text-primary); text-align: left; cursor: pointer;
}
.gm-mk-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-s); overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); color: var(--accent);
}
.gm-mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-mk-line-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gm-mk-line-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.gm-mk-line-act { display: flex; align-items: center; gap: 8px; }
.gm-mk-line-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.gm-mk-step {
  display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 999px;
}
.gm-mk-step button {
  appearance: none; background: none; border: 0; cursor: pointer; color: var(--accent);
  width: 30px; height: 30px; font: inherit; font-size: 16px;
}
.gm-mk-step span { min-width: 18px; text-align: center; font-family: var(--s-mono); font-size: 12.5px; }
@media (max-width: 440px) {
  .gm-mk-line { grid-template-columns: 40px minmax(0, 1fr); }
  .gm-mk-line-act, .gm-mk-line-chips { grid-column: 2; justify-content: flex-start; }
  .gm-mk-line-chips { flex-direction: row; align-items: center; }
  .gm-mk-thumb { width: 40px; height: 40px; }
}

/* --- the header's cart button ------------------------------------------- */

.gm-mk-cartbtn { position: relative; margin-left: auto; }
.gm-mk-badge {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--surface-0);
  font-family: var(--s-mono); font-size: 10px; line-height: 16px; text-align: center;
}
.gm-mk-badge[hidden] { display: none; }

/* --- editor and settings -------------------------------------------------- */

.gm-mk-edit-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.gm-mk-edit-pic { width: 112px; flex: none; border-radius: var(--radius-s); overflow: hidden; }
.gm-mk-edit-picbtns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gm-mk-edit-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-mk-sug { font-size: 12.5px; color: var(--warning); font-family: var(--s-mono); line-height: 1.45; }
.gm-mk-tiers { display: flex; flex-direction: column; gap: 4px; }
.gm-mk-tier-edit { display: grid; grid-template-columns: minmax(0, 1fr) 76px 64px 36px; gap: 6px; align-items: center; }
.gm-mk-tier-edit .sheet-input { margin-bottom: 0; padding: 8px 11px; }

/* --- hub card ------------------------------------------------------------- */

.gm-mk-hub { display: flex; flex-direction: column; gap: 9px; cursor: pointer; }
.gm-mk-hub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-mk-hub-head { display: flex; align-items: center; gap: 10px; }
.gm-mk-hub-head .gm-mk-stall-ico { width: 30px; height: 30px; border-radius: 8px; }
.gm-mk-hub-title { font-size: 14.5px; font-weight: 600; flex: 1; }
.gm-mk-hub-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.gm-mk-hub-line > span:first-child { flex: 1 1 140px; min-width: 0; }
.gm-mk-hub-line b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .gm-mk-acc, .gm-mk-item { transition: none; }
}
.gm-mk-suggest { display: block; text-align: left; margin: -2px 0 10px; line-height: 1.4; }
.gm-mk-suggest[hidden] { display: none; }
.gm-mk-hub-save > span:first-child { flex-basis: 100%; }
.gm-mk-hub-save .gm-stat-v { margin-left: auto; }

/* A wide screen keeps the shop at a readable width rather than stretching
   four picture cards across 1,280px. */
.gm-mk { max-width: 960px; margin: 0 auto; }