/* The Market (/market, assets/market.js). Only market.html loads this file, so Market styles stay
   apart from the rest of the site (site.css). Layout (Lemp, 2026-10-16): a slim title, one bar with
   the views, league and season, your runes folded under it, then filters beside the listings on a
   PC and folded above them on phones and tablets. Each listing is one row: the item on the left,
   price, seller and buttons on the right, the way trade sites of other games show them. */
.mk-page { padding: 18px 0 56px; }
.mk-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px; margin-bottom: 14px; }
.mk-title { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; min-width: 0; }
.mk-title h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0; line-height: 1.1; }
.mk-title p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.mk-who { margin: 0; color: var(--muted); font-size: .9rem; }
.mk-who[hidden] { display: none; }
.mk-link { background: none; border: 0; padding: 0; color: var(--flame); cursor: pointer; font: inherit; text-decoration: underline; }
.mk-signin { max-width: 640px; margin: 12px auto 28px; }
.mk-signin-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.mk-signin-row .field { flex: 1 1 180px; }

/* The bar: Market, My items, My trades (with how many wait on you), league and season */
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px; margin-bottom: 12px;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mk-tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.mk-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 8px; background: none;
                  color: var(--muted); font: 600 .95rem/1 var(--body); white-space: nowrap; cursor: pointer; }
.mk-tabs button:hover { color: var(--text); background: var(--surface-2); }
.mk-tabs button[aria-pressed="true"] { color: #1d0d00; background: var(--flame-2); }
.mk-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ember);
            color: #fff; font: 700 .72rem/1 var(--body); }
.mk-count[hidden] { display: none; }
.mk-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-league { min-height: 40px; }
.mk-league button { padding-top: 7px; padding-bottom: 7px; }
.mk-season select { width: auto; min-height: 40px; padding: 7px 12px; }
@media (min-width: 901px) {
  /* The bar stays under the site header while the page scrolls. */
  .mk-bar { position: sticky; top: 72px; z-index: 30; box-shadow: 0 10px 24px rgba(13, 10, 19, .7); }
}

/* Your runes: folded strip under the bar; the rune sale form sits beside the runes on a PC */
.mk-runestash { margin-bottom: 12px; background: rgba(11, 9, 14, .85); border: 1px solid #3a3242; border-radius: var(--radius); }
.mk-runestash[hidden] { display: none; }
.mk-runestash > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.mk-runestash > summary::-webkit-details-marker, .mk-how > summary::-webkit-details-marker { display: none; }
.mk-runestash > summary::before, .mk-how > summary::before { content: "›"; display: inline-block; width: 10px; color: var(--gold); font-weight: 700; transition: transform .15s ease; }
.mk-runestash[open] > summary::before, .mk-how[open] > summary::before { transform: rotate(90deg); }
.mk-runestash-h { font: 600 .95rem/1.2 var(--heading); color: var(--gold); }
.mk-runestash-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 20px; align-items: start; padding: 0 14px 14px; }
.mk-runestash-grid { display: grid; grid-template-columns: repeat(11, 40px); gap: 3px; }
.mk-runestash-side { display: grid; gap: 8px; min-width: 0; }

/* Market: filters beside the listings */
.mk-browse { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 20px; align-items: start; }
.mk-filterbar { display: grid; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.mk-filterbar label, .mk-filterbar .label { font-size: .85rem; }
.mk-filterbar input, .mk-filterbar select { padding: 9px 11px; }
.mk-filter-toggle { display: none; }
.mk-filter-more { display: grid; gap: 12px; min-width: 0; }
.mk-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-filter-grid .field { min-width: 0; }
.mk-filter-grid .field:nth-child(-n+3) { grid-column: 1 / -1; }
.mk-pair input { width: 100%; }
.mk-filterbar .mk-stats { max-width: none; }
.mk-filterbar .mk-stat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding: 6px 6px 6px 10px; }
.mk-filterbar .mk-stat-label { grid-column: 1 / -1; }
.mk-filterbar .mk-stat.mk-stat-any { grid-template-columns: minmax(0, 1fr) auto; }
.mk-filterbar .mk-stat.mk-stat-any .mk-stat-label { grid-column: auto; }
.mk-clear { justify-self: start; font-size: .88rem; }
.mk-clear[hidden] { display: none; }
.mk-results { min-width: 0; }
.mk-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.mk-found { margin: 0; color: var(--muted); font-size: .92rem; }
.mk-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; }
.mk-sort select { width: auto; padding: 7px 12px; }
@media (max-width: 1023px) {
  .mk-browse { grid-template-columns: 1fr; gap: 14px; }
  .mk-filterbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 12px; }
  .mk-filter-toggle { display: inline-flex; min-height: 44px; }
  .mk-filter-more { display: none; grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid var(--line-soft); }
  .mk-filters-open .mk-filter-more { display: grid; }
  .mk-filter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mk-filter-grid .field:nth-child(-n+3) { grid-column: auto; }
}

/* A listing: the item on the left, the deal on the right (stacked on phones) */
.mk-list { display: grid; gap: 12px; margin-bottom: 20px; }
.mk-list > .empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.mk-listing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--radius); overflow: hidden; }
.mk-listing:hover { border-color: #463758; }
.mk-own { border-left: 3px solid var(--gold); }
.mk-closed { opacity: .65; }
.mk-listing .mk-tip { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 14px 16px;
                      border: 0; border-radius: 0; box-shadow: none; text-align: left; background: rgba(8, 7, 10, .6); }
.mk-listing .mk-tip:has(.mk-card-pic:not([hidden])) { grid-template-columns: 76px minmax(0, 1fr); }
.mk-listing .mk-tip > * { grid-column: -2 / -1; }
.mk-listing .mk-card-pic { grid-column: 1 / 2; grid-row: 1 / span 8; align-self: start; margin: 2px 0 0; max-height: 152px; }
.mk-listing .wk-tip h3 { font-size: 1.05rem; }
.mk-listing .wk-tip-base { margin: 0 0 6px; }
.mk-listing .wk-tip-req { display: flex; flex-wrap: wrap; gap: 0 14px; color: var(--faint); font-size: .8rem; margin-bottom: 6px; }
.mk-listing .wk-tip-props { font-size: .9rem; }
.mk-listing .wk-tip-note { margin-top: 6px; }
.mk-deal { display: grid; gap: 10px; align-content: start; padding: 14px 16px; border-left: 1px solid var(--line-soft); font-size: .9rem; min-width: 0; }
.mk-deal p { margin: 0; }
.mk-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-price strong { color: var(--gold); }
.mk-price-label { flex: 1 1 100%; color: var(--faint); font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.mk-price .mk-rune-tag { padding: 4px 12px 4px 5px; font-size: 1rem; }
.mk-price .mk-rune-pic { width: 26px; height: 26px; }
.mk-seller { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; overflow-wrap: anywhere; }
.mk-seller strong { margin-right: 2px; }
.mk-seller-from { flex: 1 1 100%; }
.mk-note { color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.mk-buy { width: 100%; padding-top: 12px; padding-bottom: 12px; font-size: .95rem; }
.mk-instant-note { margin-top: -4px !important; }
.mk-contact { align-items: center; }
.mk-copy { font-size: .85rem; margin-left: 2px; }
.mk-offer-form[hidden] { display: none; }
.mk-offer-form { padding: 10px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.mk-offer > .mk-faint { flex: 1 1 100%; }
.mk-offer { padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); }
@media (max-width: 759px) {
  .mk-listing { grid-template-columns: minmax(0, 1fr); }
  .mk-deal { border-left: 0; border-top: 1px solid var(--line-soft); }
  .mk-listing .mk-tip:has(.mk-card-pic:not([hidden])) { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
  .mk-listing .mk-card-pic { max-height: 112px; }
  .mk-listing .wk-tip-props { font-size: .86rem; }
}
#mk-focus { margin-bottom: 16px; }
#mk-focus[hidden] { display: none; }
.mk-focus-head { display: flex; align-items: baseline; gap: 14px; }
.mk-h { font-size: 1.1rem; margin: 0 0 10px; }
#mk-focus .mk-listing { border-color: var(--flame); }

/* My items: the save picker, then the game's panels with the picked item beside them */
.mk-items-head { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 20px; margin-bottom: 14px; }
.mk-items-head .field { min-width: 220px; }
.mk-items-head .mk-hint { margin: 0; flex: 1 1 280px; font-size: .88rem; }
.mk-inv { display: grid; grid-template-columns: minmax(0, auto) minmax(300px, 400px); justify-content: start; gap: 20px; align-items: start; margin-bottom: 20px; }
.mk-side { position: sticky; top: 148px; display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* Taller than the window (an item with many properties, the rune list open): it scrolls on its
   own, above the docked website chat, so the price and List it button stay reachable. */
.mk-side { max-height: calc(100vh - 164px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4a4054 transparent; }
.mk-side > .mk-hint { margin: 0; padding: 18px 16px; }
.mk-side .mk-tip { border: 0; border-radius: 0; box-shadow: none; }
.mk-sheet-x { display: none; }
@media (max-width: 900px) {
  .mk-inv { grid-template-columns: minmax(0, 1fr); }
  .mk-side { position: static; max-height: none !important; overflow: visible; }
  /* Phones and tablets: the picked item slides up from the bottom of the window. */
  .mk-side.mk-sheet { position: fixed; left: 0; right: 0; bottom: var(--chat-bar, 0px); z-index: 80; overflow-y: auto;
                      max-height: min(80vh, calc(100vh - 72px - var(--chat-bar, 0px))) !important; border-bottom: 0;
                      border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .65); animation: mk-up .18s ease-out; }
  .mk-sheet-x { display: inline-grid; place-items: center; position: sticky; top: 8px; z-index: 2; justify-self: end; width: 40px; height: 40px;
                margin: 8px 8px -48px 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--text);
                font: 400 1.5rem/1 var(--body); cursor: pointer; }
}
@keyframes mk-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* My trades: underlined sub tabs */
.mk-subtabs { display: flex; gap: 2px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.mk-subtabs button { margin-bottom: -1px; padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted);
                     font: 600 .92rem/1 var(--body); white-space: nowrap; cursor: pointer; }
.mk-subtabs button:hover { color: var(--text); }
.mk-subtabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--flame); }

/* How trades work: folded at the bottom */
.mk-how { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mk-how > summary { display: flex; gap: 10px; padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.mk-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; padding: 0 16px 18px; }
.mk-how h2 { margin: 0 0 6px; font: 600 1rem/1.3 var(--body); letter-spacing: 0; }
.mk-how p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Shared bits */
.mk-closed { opacity: .65; }
.mk-note { color: var(--muted); overflow-wrap: anywhere; }
.mk-faint { color: var(--faint); font-size: .85rem; }
.mk-tag { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.mk-agreed { border-color: var(--good); color: var(--good); }
.mk-status { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; color: var(--faint); font-weight: 600; }
.mk-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.mk-status-online { color: var(--good); }
.mk-status-away, .mk-status-busy { color: var(--gold); }
.mk-offer .mk-status { font-size: .8rem; }
.mk-offer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.mk-answered { color: var(--faint); }
.mk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-form { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-form input { flex: 1 1 140px; min-width: 0; }
.mk-hint { color: var(--muted); font-size: .9rem; }
.mk-crafted { color: #ffa94d; }
.mk-misc { color: var(--rune); }
/* Market: My items as the game's inventory, stash and paperdoll */
.mk-panels { display: grid; gap: 18px; min-width: 0; justify-items: start; }
.mk-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: start; }
.mk-panel { background: #0b090e; min-width: 0; border: 1px solid #3a3242; border-radius: 4px; padding: 10px 12px 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); max-width: 100%; }
.mk-panel-h { font: 600 .8rem/1 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; text-align: center; }
.mk-board { --cell: min(44px, calc((100vw - 74px) / var(--cols))); display: grid; width: calc(var(--cell) * var(--cols) + 1px); grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); }
.mk-cells { background-color: #141019; background-image: linear-gradient(#2b2433 1px, transparent 1px), linear-gradient(90deg, #2b2433 1px, transparent 1px); background-size: var(--cell) var(--cell); border-right: 1px solid #2b2433; border-bottom: 1px solid #2b2433; }
.mk-doll { gap: 0; }
.mk-slot { margin: 2px; border: 1px dashed #2f2838; border-radius: 3px; background: #120e17; color: #4e4558; font-size: .62rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2px; line-height: 1.1; }
.mk-item { position: relative; margin: 1px; padding: 3px; border: 1px solid #3c3347; border-radius: 2px; background: rgba(40, 34, 52, .9); color: #d8d2c6; font: 600 .62rem/1.1 var(--body); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; min-width: 0; }
.mk-doll .mk-item { margin: 2px; }
.mk-item:hover, .mk-item:focus-visible { border-color: var(--flame); outline: none; background: rgba(60, 48, 72, .95); }
.mk-item-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; hyphens: auto; }
.mk-item-qty { position: absolute; right: 3px; bottom: 2px; font-size: .58rem; color: var(--text); }
.mk-item-sockets { position: absolute; left: 3px; bottom: 3px; display: flex; gap: 2px; }
.mk-item-sockets i { width: 5px; height: 5px; border-radius: 50%; border: 1px solid #8a8094; }
.mk-item-sockets i.full { background: #8a8094; }
.mk-item.q-unique { color: var(--unique); background: rgba(70, 52, 30, .55); border-color: #6b5634; }
.mk-item.q-set { color: var(--set); background: rgba(25, 70, 32, .5); border-color: #2f6a3a; }
.mk-item.q-rare { color: var(--rare); background: rgba(70, 64, 20, .45); border-color: #6b6230; }
.mk-item.q-crafted { color: #ffa94d; background: rgba(80, 45, 15, .5); border-color: #7a4a20; }
.mk-item.q-magic { color: var(--magic); background: rgba(30, 36, 90, .5); border-color: #3c4790; }
.mk-item.q-runeword { color: var(--unique); background: rgba(60, 50, 40, .55); border-color: #6b5c48; }
.mk-item.q-misc { color: var(--rune); }
.mk-item.q-superior, .mk-item.q-normal, .mk-item.q-low { color: #e8e2d6; }
.mk-eth { opacity: .7; }
.mk-listed::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px #0b090e; }
.mk-picked { box-shadow: 0 0 0 2px var(--flame); border-color: var(--flame); }
.mk-float { position: fixed; z-index: 60; width: max-content; max-width: min(340px, calc(100vw - 16px)); pointer-events: none; }
/* Market: shared stash tabs, one at a time with arrows like the game's */
#mk-holder-field[hidden] { display: none; }
.mk-tabbar { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 10px; }
.mk-arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid #6b5634; background: radial-gradient(circle at 50% 40%, #2a2219, #120e0a); color: var(--gold); font: 700 1.6rem/1 var(--heading); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 4px; }
.mk-arrow:hover:not(:disabled), .mk-arrow:focus-visible { border-color: var(--flame); color: var(--flame); outline: none; }
.mk-arrow:disabled { opacity: .35; cursor: default; }
.mk-tabname { font: 600 .95rem/1.2 var(--heading); color: var(--text); text-align: center; min-width: 0; }
/* Market: the game's own panel art and item pictures, when the server has them */
.mk-real { position: relative; max-width: calc(100vw - 60px); background: #0b090e; }
.mk-real-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.mk-real-bg[hidden], .mk-pic[hidden], .mk-card-pic[hidden] { display: none; }
.mk-real .mk-item.mk-abs { position: absolute; margin: 0; padding: 0; }
.mk-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mk-pic:not([hidden]) ~ .mk-item-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mk-item.mk-has-pic { background: rgba(20, 16, 26, .35); border-color: transparent; }
.mk-real .mk-item.mk-has-pic { background: transparent; }
.mk-item.mk-has-pic:hover, .mk-item.mk-has-pic:focus-visible { background: rgba(120, 110, 160, .22); border-color: var(--flame); }
.mk-item.mk-has-pic.mk-picked { border-color: var(--flame); }
.mk-card-pic { display: block; margin: 14px auto 0; max-width: 100%; max-height: 196px; }
/* Market: search suggestions and stat filters */
.mk-search { position: relative; }
.mk-suggest { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); max-height: 360px; overflow-y: auto; }
.mk-suggest-item { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: .92rem; }
.mk-suggest-item:hover, .mk-suggest-item.active { background: var(--surface-2); }
.mk-sg-name { font-weight: 600; }
.mk-pair { display: flex; gap: 6px; }
.mk-pair input { width: 77px; min-width: 0; }
.mk-sg-range { white-space: nowrap; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-chips:empty, .mk-stats:empty { display: none; }
.mk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .92rem; }
.mk-chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 6px; border-radius: 999px; }
.mk-chip-x:hover { color: var(--text); background: var(--surface-2); }
.mk-stat { display: grid; grid-template-columns: minmax(0, 1fr) 74px 74px auto; gap: 8px; align-items: center; padding: 6px 8px 6px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.mk-stat-label { color: var(--magic); font-size: .92rem; overflow-wrap: anywhere; }
.mk-stat input { min-width: 0; padding: 6px 8px; }
.mk-stat.mk-stat-any { grid-template-columns: minmax(0, 1fr) auto; }
.mk-form.mk-form-list { display: grid; gap: 8px; }
.mk-form-list > .btn-primary { justify-self: start; }
.mk-field-label { font-weight: 600; font-size: .85rem; color: var(--text); margin-top: 4px; }
.mk-price-runes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-price-words { flex: 1 1 100%; color: var(--gold); overflow-wrap: anywhere; }
.mk-rune-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border: 1px solid #6b5634; border-radius: 999px; background: rgba(70, 52, 30, .35); color: var(--gold); font-weight: 600; }
.btn[data-needs][disabled] { cursor: not-allowed; }
.mk-rune-tag.mk-rune-missing { border-color: var(--bad); background: rgba(255, 122, 107, .12); color: var(--bad); }
.mk-rune-pic { width: 22px; height: 22px; object-fit: contain; flex: none; }
.mk-rune-pic[hidden] { display: none; }
.mk-rune-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-rune-chosen > p { margin: 0; }
.mk-rune-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 6px; border: 1px solid #6b5634; border-radius: 999px; background: rgba(70, 52, 30, .35); }
.mk-rune-chip .mk-rune-name { color: var(--gold); font-weight: 600; margin: 0 4px 0 2px; }
.mk-rune-count { min-width: 1.4em; text-align: center; font-weight: 600; }
.mk-rune-overview { display: grid; gap: 6px; padding: 10px; background: #0b090e; border: 1px solid #3a3242; border-radius: 4px; }
.mk-rune-overview[hidden] { display: none; }
.mk-rune-overview > p { margin: 0; }
.mk-rune-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.mk-rune { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; border: 1px solid #3c3347; border-radius: 3px; background: rgba(40, 34, 52, .9); color: var(--rune); font: 600 .66rem/1.1 var(--body); cursor: pointer; min-width: 0; }
.mk-rune .mk-rune-pic { width: 28px; height: 28px; }
.mk-rune:hover, .mk-rune:focus-visible { border-color: var(--flame); outline: none; background: rgba(60, 48, 72, .95); }
.mk-rune-on { border-color: #6b5634; background: rgba(70, 52, 30, .55); }
.mk-rune-rank { color: var(--faint); font-size: .56rem; font-weight: 400; }
.mk-rune-badge { position: absolute; top: 1px; right: 2px; color: var(--gold); font-size: .6rem; }
@media (max-width: 560px) { .mk-item { font-size: .52rem; padding: 2px; } .mk-slot { font-size: .55rem; } }
.mk-rs { display: grid; justify-items: center; align-content: start; gap: 1px; padding: 3px 1px 2px; border: 1px solid #3c3347; border-radius: 3px; background: rgba(40, 34, 52, .9); min-width: 0; }
.mk-rs .mk-rune-pic { width: 26px; height: 26px; }
.mk-rs-name { color: var(--rune); font: 600 .58rem/1.1 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rs-count { color: var(--gold); font: 700 .72rem/1.1 var(--body); }
.mk-rs-none { opacity: .38; }
.mk-rs { position: relative; }
button.mk-rs { font: inherit; color: inherit; cursor: pointer; }
button.mk-rs:hover, button.mk-rs:focus-visible, .mk-rs.mk-rs-on { border-color: var(--gold); }
.mk-rs.mk-rs-on { background: rgba(70, 56, 30, .9); }
.mk-rs-listed { position: absolute; top: 1px; right: 2px; color: #e0a64a; font: 700 .55rem/1 var(--body); }
.mk-rs-sell[hidden] { display: none; }
.mk-rs-sell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-rs-sell-head h3 { margin: 0; font-size: .95rem; color: var(--rune); }
.mk-rs-sell > p { margin: 0; }
.mk-rs-msg { color: var(--gold); font-size: .85rem; }
.mk-rs-msg:empty { display: none; }
.mk-how-many { max-width: 90px; }
.mk-rune-chip.mk-rune-missing { border-color: #b8443a; }
.mk-rune-chip.mk-rune-missing .mk-rune-count { color: #ff7b6e; }
.mk-offer-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.mk-offer-form > input { min-width: 0; }
.mk-offer-runes { grid-column: 1 / -1; display: grid; gap: 6px; }
.mk-offer-runes > p { margin: 0; }
.mk-offer-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mk-mine-note { margin: 0 0 10px; }
.mk-mine-note:empty { display: none; }
.mk-runestash-note { margin: 0; color: var(--muted); font-size: .8rem; }
.mk-runestash-note:empty { display: none; }
.mk-empty-stash { margin: 0 0 12px; padding: 12px 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }
/* Market messages float at the bottom of the window, above the docked chat bar (market.js say) */
#mk-msg {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--chat-bar, 0px)); z-index: 85;
  width: max-content; max-width: min(560px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; padding: 12px 16px;
  font-size: .92rem; line-height: 1.45; color: var(--text); cursor: pointer; overflow-wrap: anywhere;
  background: var(--surface-2); border: 1px solid var(--flame); border-radius: var(--radius); box-shadow: var(--shadow);
}
#mk-msg:empty { display: none; }
.mk-mine-note { margin: 0 0 10px; }
.mk-mine-note:empty { display: none; }
.mk-rs-sell { display: grid; gap: 6px; max-width: 520px; }
.mk-runestash-note { margin: 0; color: var(--muted); font-size: .85rem; }
.mk-runestash-note:empty { display: none; }
@media (max-width: 900px) {
  .mk-runestash-body { grid-template-columns: minmax(0, 1fr); }
  .mk-runestash-grid { grid-template-columns: repeat(11, minmax(0, 1fr)); max-width: 520px; }
  .mk-rs-sell { padding-top: 8px; border-top: 1px solid #3a3242; }
}
@media (max-width: 560px) {
  .mk-runestash-body { padding: 0 8px 10px; }
  .mk-runestash-grid { gap: 2px; }
  .mk-rs .mk-rune-pic { width: 100%; height: auto; max-width: 24px; }
  .mk-rs-name { display: none; }
  .mk-rs-count { font-size: .62rem; }
  .mk-bar { padding: 4px; }
  .mk-tabs { flex: 1 1 100%; }
  .mk-tabs button { flex: 1 1 auto; justify-content: center; padding: 11px 10px; }
  .mk-bar-end { flex: 1 1 100%; }
  .mk-bar-end .mk-league { flex: 1 1 auto; }
  .mk-bar-end .mk-league button { flex: 1 1 0; }
}
.mk-page [hidden] { display: none !important; }
.mk-instant-note { color: var(--bad); font-size: .85rem; }
.mk-instant-note:empty { display: none; }
@media (min-width: 1100px) {
  /* Two rows of 17 on a wide screen instead of three of 11. */
  .mk-runestash-grid { grid-template-columns: repeat(17, 40px); }
}
@media (max-width: 560px) {
  .mk-subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .mk-subtabs button { padding: 11px 6px; }
  .mk-title p { font-size: .85rem; }
}
.mk-runestash-side:has(.mk-rs-sell:not([hidden])) .mk-runestash-note { display: none; }
/* Details or Compact */
.mk-results-head { gap: 8px 12px; }
.mk-found { margin-right: auto; }
.mk-density { min-height: 38px; }
.mk-density button { padding-top: 6px; padding-bottom: 6px; }
.mk-expand { display: none; }
.mk-contact .btn { padding: 8px 14px; font-size: .85rem; }
.mk-seller { font-size: .9rem; }
.mk-compact .mk-expand { display: inline-flex; justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--flame); font: 600 .85rem/1.2 var(--body); cursor: pointer; }
.mk-compact .mk-listing:not(.mk-open) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; cursor: pointer; }
.mk-compact .mk-listing:not(.mk-open) .mk-tip { padding: 8px 14px; background: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-tip:has(.mk-card-pic:not([hidden])) { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
.mk-compact .mk-listing:not(.mk-open) .mk-card-pic { max-height: 44px; grid-row: 1 / span 2; align-self: center; }
.mk-compact .mk-listing:not(.mk-open) .wk-tip h3 { font-size: .98rem; }
.mk-compact .mk-listing:not(.mk-open) .wk-tip-base { display: none; }
/* Compact rows: the base and the first properties on one line instead of the full card */
.mk-peek { display: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-peek { display: block; margin: 1px 0 0; color: #8c9cff; font-size: .82rem; text-align: left;
                                                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-peek-base { color: var(--muted); }
.mk-peek span + span::before { content: " · "; color: var(--faint); }
.mk-compact .mk-listing:not(.mk-open) :is(.wk-tip-req, .wk-tip-props, .wk-tip-note) { display: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px;
                                                 padding: 8px 14px; border-left: 0; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal > :not(.mk-price, .mk-seller, .mk-buy, .mk-expand, .mk-tag) { display: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal > .mk-tag { max-width: 220px; }
.mk-compact .mk-listing:not(.mk-open) :is(.mk-price-label, .mk-seller-from) { display: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-status { font-size: 0; gap: 0; margin-right: 6px; }
.mk-compact .mk-listing:not(.mk-open) .mk-buy { width: auto; padding: 9px 16px; }
@media (max-width: 759px) {
  .mk-compact .mk-listing:not(.mk-open) { grid-template-columns: minmax(0, 1fr); }
  .mk-compact .mk-listing:not(.mk-open) .mk-deal { justify-content: flex-start; padding-top: 0; border-top: 0; }
  .mk-compact .mk-listing:not(.mk-open) .mk-buy { margin-left: auto; }
  .mk-compact .mk-listing:not(.mk-open) .mk-expand { order: 5; }
}
.mk-deal .mk-tag { border-radius: 8px; line-height: 1.4; padding: 4px 10px; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal > .mk-tag { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-filterbar input, .mk-filterbar select, .mk-sort select, .mk-season select { line-height: 1.3; }
@media (max-width: 759px) {
  /* Phones: the row itself opens a compact listing; the title line stays one line. */
  .mk-compact .mk-listing:not(.mk-open) .mk-expand { display: none; }
  .mk-top { flex-wrap: nowrap; align-items: center; margin-bottom: 10px; }
  .mk-title { flex: 1 1 auto; }
  .mk-title p { display: none; }
  .mk-who { font-size: .82rem; text-align: right; }
  .mk-who strong { display: block; }
}
/* My items: panels flow side by side where they fit (stash beside its Runes stacks). */
.mk-panels { display: flex; flex-wrap: wrap; align-items: flex-start; }
@media (max-width: 900px) { .mk-side:not(.mk-sheet) { display: none; } }
@media (max-width: 759px) {
  .mk-who-label { display: none; }
  .mk-who strong { display: inline; }
}
/* Price checks: what the same item sold for, and the cheapest listing now */
.mk-sold { color: var(--muted); font-size: .84rem; }
.mk-sold-h { color: var(--faint); font: 600 .7rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
.mk-hr { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, .25);
         color: var(--muted); font: 700 .78rem/1.3 var(--body); white-space: nowrap; }
.mk-hr-full { border-color: rgba(120, 190, 110, .6); color: #9fd88f; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-hr { padding: 0 6px; font-size: .72rem; }
.mk-pick-hr { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
.mk-pick-hr .mk-hr { margin-left: 4px; }
.mk-pricecheck { display: grid; gap: 4px; padding: 8px 10px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.mk-pricecheck p { margin: 0; }
.mk-pc-now { color: var(--gold); font-size: .9rem; }
.mk-pc-now .mk-link { margin-left: 8px; font-size: .85rem; }
.mk-compact .mk-listing:not(.mk-open) .mk-sold { display: none; }
.mk-empty-clear { margin-top: 12px; }
.mk-list > .empty { display: grid; justify-items: center; }
@media (max-width: 1023px) {
  /* The search box says what it is; its label only costs a line here. */
  .mk-q-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 559px) {
  .mk-runestash > summary { flex-wrap: nowrap; padding: 10px 12px; }
  #mk-runestash-sum { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
}
/* A rune's amount: "3 × Vex" in full; the compact list puts it on the picture like a stack in the game. */
.mk-rune-n:empty { display: none; }
.mk-rune-n::after { content: " ×"; }
/* Compact rows (Lemp, 2026-10-19): fixed columns, so every row's name, runes, seller and
   Instant trade line up, and the runes stay inside their own box. */
.mk-compact { --mk-c-price: 168px; --mk-c-seller: 140px; }
.mk-compact .mk-listing:not(.mk-open) { grid-template-columns: minmax(0, 1fr) auto; }
.mk-compact .mk-listing:not(.mk-open) .wk-tip h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal { display: grid; grid-template-columns: var(--mk-c-price) var(--mk-c-seller) 136px 52px;
                                                 grid-template-areas: "price seller buy more"; gap: 0 12px; justify-content: end; }
.mk-compact .mk-listing:not(.mk-open) .mk-price { grid-area: price; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mk-compact .mk-listing:not(.mk-open) .mk-seller { grid-area: seller; flex-wrap: nowrap; min-width: 0; }
.mk-compact .mk-listing:not(.mk-open) .mk-seller strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-compact .mk-listing:not(.mk-open) :is(.mk-buy, .mk-deal > .mk-tag) { grid-area: buy; justify-self: stretch; text-align: center; max-width: none; }
.mk-compact .mk-listing:not(.mk-open) .mk-expand { grid-area: more; justify-self: end; }
.mk-compact .mk-listing:not(.mk-open) .mk-buy { padding: 9px 12px; white-space: nowrap; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-tag { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px;
                                                               padding: 0; border-radius: 6px; font-size: .8rem; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-pic { width: 26px; height: 26px; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-n { position: absolute; right: 2px; bottom: 0; color: #fff; font: 700 .72rem/1 var(--body);
                                                             text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-n::after { content: none; }
/* Without the game's pictures the rune's name stays as the label. */
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-tag:has(.mk-rune-pic:not([hidden])) .mk-rune-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-tag:not(:has(.mk-rune-pic:not([hidden]))) { width: auto; padding: 0 8px; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-rune-tag:not(:has(.mk-rune-pic:not([hidden]))) .mk-rune-n { position: static; margin-right: 3px; }
@media (max-width: 1023px) {
  /* Tablets: the row itself opens a listing (no hover here either), which gives the name the room of Details. */
  .mk-compact .mk-listing:not(.mk-open) .mk-expand { display: none; }
  .mk-compact .mk-listing:not(.mk-open) .mk-deal { grid-template-columns: var(--mk-c-price) var(--mk-c-seller) 136px; }
}
@media (max-width: 759px) {
  /* Phones: the deal goes under the item, runes left, Instant trade right. */
  .mk-compact .mk-listing:not(.mk-open) { grid-template-columns: minmax(0, 1fr); }
  .mk-compact .mk-listing:not(.mk-open) .mk-deal { grid-template-columns: fit-content(45%) minmax(64px, 1fr) auto; grid-template-areas: "price seller buy";
                                                   gap: 0 10px; align-items: center; justify-content: stretch; padding-top: 0; }
}
/* What happens next, under Instant trade or Whisper (Lemp, 2026-10-19: hard to trade without knowing how). */
.mk-instant-help { color: var(--muted); font-size: .82rem; }
.mk-compact .mk-listing:not(.mk-open) .mk-deal > .mk-instant-help { display: none; }
/* Instant trade beside Whisper (seller online) only in the opened listing. */
.mk-instant-alt { width: 100%; }
.mk-compact .mk-listing:not(.mk-open) .mk-instant-alt { display: none; }

/* The trade sound beside "Signed in as" (Lemp, 2026-10-19): the chat's own setting, so players
   find it on the Market without opening the chat's Trade tab. */
.mk-top-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mk-sound { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; color: var(--muted); font-size: .88rem; }
.mk-sound[hidden] { display: none; }
.mk-sound .check { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; white-space: nowrap; }
.mk-sound-pick { width: auto; min-height: 32px; padding: 4px 28px 4px 8px; font-size: .88rem; }
.mk-sound-test { min-height: 32px; padding: 0 10px; }
.mk-sound-vol { display: inline-flex; align-items: center; gap: 6px; }
.mk-sound-vol input { width: 90px; accent-color: var(--flame); }
.mk-sound-vol output { min-width: 3.2em; color: var(--faint); font-size: .8rem; }
@media (max-width: 759px) {
  /* Phones: title and name stay one line, the trade sound gets the line under them. */
  .mk-top { flex-wrap: wrap; }
  .mk-title { flex-basis: 0; }
  .mk-top-end { display: contents; }
  .mk-sound { order: 2; flex: 1 1 100%; justify-content: flex-start; }
}

/* Watchers (Lemp, 2026-10-19): Add Watcher under the filters, a tab per watcher (at most two)
   with its new finds counted, and the tab's page: its filters in words, then what it finds. */
.mk-add-watch { justify-self: start; }
.mk-watch-tab { border: 1px dashed var(--line) !important; }
.mk-watch-tab[aria-pressed="true"] { border-color: transparent !important; }
.mk-watch-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.mk-watch[hidden] { display: none; }
.mk-watch-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px;
                 padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mk-watch-what { flex: 1 1 320px; min-width: 0; }
.mk-watch-what .mk-h { margin-bottom: 4px; color: var(--gold); }
.mk-watch-what p { margin: 0 0 8px; font-size: .88rem; }
.mk-watch-head .mk-actions { align-items: center; }
.mk-watch-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk-watch-filters li { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text);
                       font-size: .84rem; overflow-wrap: anywhere; }
.mk-offered-line { display: none; }
.mk-compact .mk-listing.mk-offered:not(.mk-open) { border-color: rgba(230, 189, 106, .55); }
.mk-compact .mk-listing.mk-line:not(.mk-open) .mk-card-pic { grid-row: 1 / span 3; }
.mk-compact .mk-listing:not(.mk-open) .mk-offered-line { display: block; margin: 1px 0 0; color: var(--gold); font: 600 .82rem/1.3 var(--body);
                                                         text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-new { border-color: var(--flame); box-shadow: inset 3px 0 0 var(--flame); }
.mk-new-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--ember); color: #fff;
              font: 700 .66rem/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.mk-watch-form { display: grid; gap: 10px; margin: 4px 0 6px; text-align: left; }
.mk-watch-form .field { margin: 0; }
.mk-watch-form select, .mk-watch-form input { width: 100%; }
.mk-watch-sound { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
.mk-watch-sound label { grid-column: 1 / -1; }
.mk-watch-form-h { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
/* Stacks sold each (Lemp, 2026-10-21): "each" after the price, how many are left beside the name,
   the bundle-or-each choice in the List it form and the quantity in the Instant trade dialog. */
.mk-each { color: var(--muted); font: 600 .78rem/1.3 var(--body); white-space: nowrap; }
.mk-left-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid rgba(230, 189, 106, .45); border-radius: 999px;
               color: var(--gold); font: 700 .7rem/1.3 var(--body); white-space: nowrap; vertical-align: middle; }
.mk-sell-how { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-sell-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; padding: 6px 10px;
               border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: left; cursor: pointer; }
.mk-sell-opt:has(input:checked) { border-color: rgba(230, 189, 106, .55); background: rgba(230, 189, 106, .06); }
.mk-sell-opt input { grid-row: 1 / span 2; width: auto; margin: 0; }
.mk-sell-opt .mk-faint { grid-column: 2; font-size: .84rem; }
.mk-qty-form { display: grid; gap: 6px; margin: 4px 0 2px; text-align: left; }
.mk-qty-total { margin: 0; color: var(--gold); font-size: .9rem; }
.mk-offer-qty { color: var(--muted); font-size: .86rem; white-space: nowrap; }
.mk-compact .mk-listing:not(.mk-open) .mk-price .mk-each { font-size: .7rem; }