/* /market/ — the Hood Lords market (js/market/*). Reuses site.css: tokens, the header, buttons, inputs, the footer.
   Phone first: most holders trade from a wallet app's browser. The owner's rule holds everywhere: NO BOXES INSIDE
   BOXES — sections are rules, spacing and colour on the page ground; the only tiles are the Lords' own pictures;
   anything that must stop the visitor is a <dialog>. */

/* ---------- trading controls exist only once js/market/trade.js has loaded (ui.trading()) ---------- */
html:not(.can-trade) .trade-only, html.mk-halt .trade-only { display: none !important; }   /* mk-halt: paused, not for testers */

/* ---------- header: the wordmark + "Market", the tabs as links, Connect ---------- */
.mk-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.mk-brand-tag {
  padding-left: .7rem; border-left: 1px solid var(--line); text-decoration: none;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
}
.mk-brand-tag:hover { color: var(--lime); }
.mk-top-right { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 1.75rem); }
.mk-connect { padding: .5rem .85rem; font-size: var(--step--1); white-space: nowrap; }
.mk-connect.is-on { text-transform: none; letter-spacing: .02em; font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.mk-connect.is-on::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--lime); }
.mk-top .brand span { white-space: nowrap; }
@media (max-width: 440px) { .mk-brand-tag { display: none; } }   /* the head under it says "The Market" */
@media (max-width: 760px) { .mk-top .nav { display: none; } }   /* the tabs are under the head on a phone */

/* ---------- head: title, stats strip, the one notice line ---------- */
.mk-main { min-height: 70vh; }
.mk-wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.mk-head { padding-top: clamp(1.5rem, 5vw, 3rem); }
.mk-head .eyebrow { margin-bottom: .5rem; }
.mk-mark {
  margin: 0 0 1rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 5.5rem); line-height: .9; color: var(--lime);
}
/* 8 cells (parity §2.2): 2 × 4 on a phone, 4 × 2 from a tablet up (one row of 8 was measured at 1280: the values ran into
   each other). Rules between rows only. */
.mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; margin: 0; border-top: 1px solid var(--line); }
.mk-stats > div { padding: .7rem 0; border-bottom: 1px solid var(--line); min-width: 0; overflow: hidden; }
.mk-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
@media (min-width: 700px) { .mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; } .mk-stats > div:nth-last-child(-n+4) { border-bottom: 0; } }
.mk-stats dt { font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); line-height: 1.25; }
.mk-stats dd { margin: .15rem 0 0; font-weight: 700; font-size: var(--step-1); color: var(--lime); white-space: nowrap; line-height: 1.2; min-height: calc(1.2em + 1.3rem); }   /* room for the small line from the start: the strip never grows under a restored scroll */
.mk-stats dd small, .mk-usd { display: block; margin-top: .15rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .04em; color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stats dd small .mk-usd { display: inline; margin-left: .4em; }
.mk-stats dd small a { color: var(--bone-dim); }
.mk-usd:empty { display: none; }
.mk-stats.is-off dd { color: var(--bone-dim); }
.mk-stat-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.mk-stat-btn:hover { color: var(--bone); }
.mk-up { color: var(--lime); }
.mk-down { color: color-mix(in oklch, var(--red) 75%, var(--bone)); }
@media (max-width: 560px) { .mk-stats dd { font-size: var(--step-0); } }

/* ---------- About the collection (§2.1): a disclosure on the ground, a flat list inside ---------- */
.mk-about { margin-top: .9rem; border-bottom: 1px solid var(--line); }
.mk-about summary {
  cursor: pointer; list-style: none; padding: .6rem 0; width: fit-content;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim);
}
.mk-about summary::-webkit-details-marker { display: none; }
.mk-about summary::after { content: " ▸"; color: var(--lime); }
.mk-about[open] summary::after { content: " ▾"; }
.mk-about summary:hover, .mk-about summary:focus-visible { color: var(--lime); outline: none; }
.mk-about dl { margin: 0 0 1rem; max-width: 72ch; }
.mk-about dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .2rem 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.mk-about dt { font: 700 .8rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); padding-top: .15rem; }
.mk-about dd { margin: 0; font-size: var(--step--1); color: var(--bone); min-width: 0; }
.mk-about code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }
.mk-about-acts { display: inline-flex; flex-wrap: wrap; gap: 0 .9rem; margin-left: .4rem; }
.mk-about-acts .link-btn { padding: .3rem 0; margin: 0; }
@media (max-width: 560px) { .mk-about dl > div { grid-template-columns: 1fr; } }

.mk-notice { margin: .9rem 0 0; color: var(--bone-dim); font-size: var(--step--1); max-width: 70ch; }
.mk-notice b { color: var(--bone); }
.mk-notice::before { content: "●"; color: var(--lime-dim); margin-right: .5em; font-size: .8em; }
.mk-notice.is-bad::before { color: var(--red); }
.mk-notice[hidden] { display: none; }

/* ---------- tabs: Lords | Activity | My Lords ---------- */
.mk-tabs { display: flex; gap: clamp(1rem, 4vw, 2.25rem); margin-top: clamp(1.25rem, 4vw, 2rem); border-bottom: 1px solid var(--line); }
.mk-tab {
  position: relative; background: none; border: 0; padding: .85rem 0; cursor: pointer; color: var(--bone-dim);
  font: 700 var(--step-0) var(--narrow); letter-spacing: .12em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.mk-tab:hover { color: var(--bone); }
.mk-tab[aria-selected="true"] { color: var(--lime); }
.mk-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--lime); }
.mk-tab:focus-visible { outline: none; text-decoration: underline; text-underline-offset: .35em; }
.mk-tab .n { margin-left: .35em; color: var(--bone-dim); font-size: .8em; }
@media (max-width: 560px) { .mk-tabs { justify-content: space-between; } .mk-tab { font-size: var(--step--1); } }
@media (max-width: 640px) { .mk-tab-long { display: none; } }   /* "Most Cursed" → "Cursed": five tabs fit a phone */
.mk-tab { white-space: nowrap; }
@media (max-width: 420px) { .mk-tabs { gap: .5rem; } .mk-tab { letter-spacing: .05em; } }

/* ---------- Most Cursed: the burn leaderboard (js/market/cursed.js) — rules and type, the burned Lords the only tiles ---------- */
.mk-cursed-lede { margin: 1.25rem 0 .4rem; max-width: 46ch; color: var(--bone); }
.mk-cursed-you { margin: .6rem 0 .3rem; }
.mk-cursed-you b { color: var(--lime); }
.mk-cursed-levels { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0 0 1.25rem; font-size: var(--step--1); color: var(--bone-dim); }
.mk-cursed-levels b { color: var(--bone); font-weight: 700; }
.mk-cursed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-cursed-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.mk-cursed-rank { font: 700 var(--step-1) var(--display); color: var(--bone-dim); text-align: center; }
.mk-cursed-row.is-top .mk-cursed-rank { color: var(--lime); font-size: var(--step-2); }
.mk-cursed-row.is-you .mk-cursed-who a { color: var(--lime); }
.mk-cursed-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; min-width: 0; }
.mk-cursed-who { font-weight: 700; overflow-wrap: anywhere; }
.mk-cursed-lvl { font: 700 .72rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dim); }
.mk-cursed-row.is-top .mk-cursed-lvl { color: var(--lime); }
.mk-cursed-n { flex-basis: 100%; font-size: var(--step--1); }
.mk-cursed-lords { display: flex; align-items: center; gap: .3rem; }
.mk-cursed-lord { display: block; width: 44px; height: 44px; color: var(--bone-dim); font-size: .7rem; text-decoration: none; }
.mk-cursed-lord img { width: 44px; height: 44px; object-fit: cover; opacity: .45; filter: grayscale(1); transition: opacity .15s; }
.mk-cursed-lord:hover img, .mk-cursed-lord:focus-visible img { opacity: .85; }
@media (max-width: 560px) { .mk-cursed-row { grid-template-columns: 2.2rem minmax(0, 1fr); } .mk-cursed-lords { grid-column: 2; flex-wrap: wrap; } }
.mk-panel { padding-top: 1.25rem; padding-bottom: clamp(3rem, 8vw, 5rem); }
.mk-panel[hidden] { display: none; }

/* ---------- toolbar: search, sort, filters ---------- */
.mk-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.mk-input, .mk-select {
  background: var(--ink-2); color: var(--bone); border: 2px solid var(--line); border-radius: 0;
  font: 500 var(--step-0) / 1.2 var(--sans); padding: .7rem .9rem; min-height: 2.9rem;
  transition: border-color .2s;
}
.mk-input:focus, .mk-select:focus { border-color: var(--lime); outline: none; }
.mk-input::placeholder { color: var(--bone-dim); opacity: .6; }
.mk-input[aria-invalid="true"] { border-color: var(--red); }
.mk-search { flex: 1 1 12rem; min-width: 0; }
.mk-select { flex: 0 1 auto; padding-right: 2rem; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - .7rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.mk-filter-btn { padding: .55rem 1rem; font-size: var(--step--1); }
.mk-filter-btn .n:not(:empty)::before { content: "· "; }
@media (min-width: 900px) { .mk-filter-btn { display: none; } }
@media (max-width: 520px) { .mk-search { flex-basis: 100%; } .mk-select { flex: 1 1 0; min-width: 0; } }

/* ---------- layout: filters beside the grid (a sheet on a phone) ---------- */
.mk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 1rem; }
.mk-filters { display: none; }
@media (min-width: 900px) {
  .mk-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .mk-filters {
    display: block; position: sticky; top: 4.5rem; align-self: start;
    max-height: calc(100dvh - 5.5rem); overflow: auto; overscroll-behavior: contain; padding-right: .4rem;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
}
.mk-fhead { margin: 0 0 .4rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.mk-status { display: flex; gap: 1.1rem; margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mk-status button {
  background: none; border: 0; padding: .3rem 0; cursor: pointer; color: var(--bone-dim);
  font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase;
}
.mk-status button[aria-pressed="true"] { color: var(--lime); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.mk-status .n { color: var(--bone-dim); margin-left: .3em; }
.mk-fgroup { border-bottom: 1px solid var(--line); }
.mk-fgroup summary {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 0; cursor: pointer; list-style: none;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
.mk-fgroup summary::-webkit-details-marker { display: none; }
.mk-fgroup summary::after { content: "+"; color: var(--lime); font: 700 1.1rem var(--sans); width: 1rem; text-align: center; }
.mk-fgroup[open] summary::after { content: "−"; }
.mk-fgroup summary .n { margin-left: auto; color: var(--bone-dim); font-weight: 500; }
.mk-fgroup summary .on { color: var(--lime); }
.mk-fgroup summary:focus-visible { outline: none; color: var(--lime); }
.mk-opts { list-style: none; margin: 0 0 .6rem; padding: 0; }
.mk-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .1rem .6rem;
  padding: .38rem 0; cursor: pointer; font-size: var(--step--1); color: var(--bone);
}
.mk-opt input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--lime); }
.mk-opt .v { overflow-wrap: anywhere; }
.mk-opt .n { color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.mk-opt .fl { grid-column: 2 / -1; color: var(--lime-dim); font: 700 .78rem var(--narrow); letter-spacing: .06em; }
.mk-opt:hover .v { color: var(--lime); }
.mk-opt input:checked ~ .v { color: var(--lime); font-weight: 700; }

/* ---------- active filters + the result line ---------- */
.mk-chips { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.mk-chips:empty { display: none; }
.mk-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .65rem; cursor: pointer;
  background: none; border: 1px solid var(--lime-dim); color: var(--bone); border-radius: 999px;
  font: 500 var(--step--1) var(--sans);
}
.mk-chip b { font: 700 .78rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.mk-chip::after { content: "×"; color: var(--lime); font-size: 1.1em; line-height: 1; }
.mk-chip:hover { border-color: var(--lime); }
.mk-clear { background: none; border: 0; cursor: pointer; padding: .35rem .2rem; color: var(--lime); font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .25em; }
.mk-resline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .6rem 0 1rem; }
.mk-count { margin: 0; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.mk-count b { color: var(--bone); }
.mk-offer-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-offer-row .btn { padding: .5rem .9rem; font-size: var(--step--1); }

/* ---------- the grid (virtualised: only the rows on screen are in the DOM — js/market/gallery.js) ---------- */
.mk-grid { position: relative; contain: layout; }
.mk-grid-inner { display: grid; gap: var(--mk-gap, 14px); grid-template-columns: repeat(var(--mk-cols, 2), minmax(0, 1fr)); will-change: transform; }
.mk-empty { margin: 1.5rem 0; color: var(--bone-dim); }
.mk-empty b { color: var(--bone); }

.mk-card { position: relative; min-width: 0; }
.mk-card-link { display: block; color: inherit; text-decoration: none; }
.mk-card-img {
  display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-2);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.mk-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-card-link:hover .mk-card-img, .mk-card-link:focus-visible .mk-card-img { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--lime); }
.mk-card-link:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .mk-card-img { transition: none; } }
.mk-card-name { display: flex; align-items: baseline; gap: .45rem; margin-top: .5rem; font: 700 var(--step-0) var(--narrow); letter-spacing: .06em; }
.mk-card-name .rk { margin-left: auto; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); font-weight: 700; white-space: nowrap; }
.mk-one { font: 700 .7rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--on-lime); background: var(--lime); padding: .08rem .35rem; }
.mk-card-meta { display: flex; align-items: center; gap: .5rem; min-height: 1.9rem; margin: .1rem 0 0; font-size: var(--step--1); }
.mk-price { font-weight: 700; color: var(--lime); white-space: nowrap; }
.mk-dim { color: var(--bone-dim); }
.mk-card-meta .mk-dim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tag { font: 700 .72rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--lime-dim); white-space: nowrap; }
/* a burned Lord: faded, for good (the wallet that burned it keeps it on its My Lords) */
.mk-card.is-burned .mk-card-img { opacity: .32; filter: grayscale(1); }
.mk-card.is-burned .mk-card-link:hover .mk-card-img, .mk-card.is-burned .mk-card-link:focus-visible .mk-card-img { opacity: .6; }
.mk-tag-burned { color: var(--bone-dim); }
.mk-cart-btn {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: .35rem 0 .35rem .4rem; white-space: nowrap;
  color: var(--lime); font: 700 .78rem var(--narrow); letter-spacing: .1em; text-transform: uppercase;
}
.mk-cart-btn:hover { color: var(--bone); }
.mk-cart-btn.is-in { color: var(--bone-dim); }
.mk-off .mk-price, .mk-off .mk-card-meta { opacity: .45; }
/* an image no source could serve: the Lord's number on the dark tile */
img.is-broken { visibility: hidden; }
.has-broken::after {
  content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 clamp(1.4rem, 6vw, 2.6rem) var(--display); color: var(--ink-3);
}

/* ---------- the cart: a bar along the bottom while it has something in it ---------- */
.mk-cart {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));
  background: var(--ink-2); border-top: 3px solid var(--lime);
  animation: sheet-up .3s var(--ease-out);
}
.mk-cart[hidden] { display: none !important; }
.mk-cart-sum { margin: 0 auto 0 0; font: 700 var(--step-0) var(--narrow); letter-spacing: .06em; text-transform: uppercase; }
.mk-cart-sum b { color: var(--lime); }
.mk-cart .btn { padding: .6rem 1.1rem; font-size: var(--step--1); }
body.has-cart { padding-bottom: 5rem; }
@media (prefers-reduced-motion: reduce) { .mk-cart { animation: none; } }

/* ---------- activity: one row per event, rules between ---------- */
.mk-seg { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: .6rem; }
.mk-seg button {
  background: none; border: 0; padding: .35rem 0; cursor: pointer; color: var(--bone-dim);
  font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase;
}
.mk-seg button[aria-pressed="true"] { color: var(--lime); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.mk-feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-ev {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1);
}
.mk-ev--plain { grid-template-columns: minmax(0, 1fr) auto; }
.mk-ev-img { width: 52px; height: 52px; display: block; position: relative; background: var(--ink-2); }
.mk-ev-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-ev-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.mk-ev-main > a { font: 700 var(--step-0) var(--narrow); letter-spacing: .05em; color: var(--bone); text-decoration: none; }
.mk-ev-main > a:hover { color: var(--lime); }
.mk-ev-kind { font: 700 .78rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mk-ev-kind.is-sale { color: var(--lime); }
.mk-ev-who { flex-basis: 100%; color: var(--bone-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ev-who a { color: var(--bone-dim); }
.mk-ev-who a:hover { color: var(--lime); }
.mk-ev-when { text-align: right; white-space: nowrap; color: var(--bone-dim); text-decoration: none; }
.mk-ev-when:hover { color: var(--lime); }
.mk-ev-when small { display: block; font: 700 .7rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--lime-dim); }
.mk-more { margin-top: 1rem; }
.mk-feed-note { margin: 1rem 0 0; color: var(--bone-dim); font-size: var(--step--1); }
.mk-feed-note:empty { display: none; }

/* ---------- My Lords ---------- */
.mk-mine-ask { max-width: 720px; }
.mk-mine-ask .step-lede { font-size: var(--step-0); }
.mk-mine-ask .check-row { margin-top: .9rem; }
.mk-or { margin: .9rem 0 0; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.mk-mine-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 1.5rem 0 .4rem; }
.mk-mine-head h2 { margin: 0; font: 600 var(--step-1) ui-monospace, Menlo, monospace; color: var(--lime); overflow-wrap: anywhere; }
.mk-mine-head .link-btn { margin-left: auto; }
.mk-mine-facts { margin: 0 0 1.25rem; color: var(--bone-dim); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.mk-mine-facts b { color: var(--bone); }
.mk-sub { margin: 2rem 0 .5rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.mk-sub .n { color: var(--lime); margin-left: .35em; }
.mk-minegrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 520px) { .mk-minegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sui Lords (js/market/sui-lords.js, drawn by mylords.js under the Hood Lords): the sister collection, read-only. The same
   cards, each a link to the explorer; a Lord's name instead of a number; "Kiosk" where the rank sits. */
.mk-sui { margin-top: 2rem; }
.mk-sui[hidden], .mk-sui:empty { display: none; }
.mk-tag-sui { color: var(--on-lime); background: var(--lime); padding: .08rem .35rem; }
.mk-sui-offer { margin: 1.5rem 0 0; color: var(--bone-dim); font-size: var(--step--1); }
.mk-sui-card .mk-card-name { overflow-wrap: anywhere; }
.mk-card-acts { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.mk-card-acts .link-btn { font: 700 .78rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; padding: .45rem 0; margin: 0; }

/* rows of offers / listings: price · what · who · when · an action */
.mk-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: center;
  padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1);
}
.mk-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; min-width: 0; }
.mk-row-main .mk-price { font-size: var(--step-0); }
.mk-row-sub { flex-basis: 100%; color: var(--bone-dim); }
.mk-row-sub a { color: var(--bone-dim); }
.mk-row-sub a:hover { color: var(--lime); }
.mk-row .btn { padding: .45rem .85rem; font-size: var(--step--1); }
.mk-ok { color: var(--lime); }
.mk-warn { color: color-mix(in oklch, var(--red) 75%, var(--bone)); }
.mk-none { margin: .6rem 0 0; color: var(--bone-dim); font-size: var(--step--1); }

/* ---------- one Lord ---------- */
.mk-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1.1rem; }
.mk-crumbs a { font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; padding: .4rem 0; }
.mk-crumbs a:hover { color: var(--lime); }
.mk-pager { display: flex; gap: 1.1rem; }
.mk-lord {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1rem; padding-bottom: clamp(2rem, 6vw, 4rem);
}
.mk-lord-art { margin: 0; position: relative; width: min(100%, 640px); }
@media (min-width: 900px) { .mk-lord { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .mk-lord-art { position: sticky; top: 5rem; } }
.mk-lord-art::before { content: ""; position: absolute; inset: 0; background: var(--lime); transform: translate(12px, 12px); }
.mk-lord-art .mk-card-img { position: relative; z-index: 1; border: 3px solid var(--ink); }
.mk-lord-art .mk-card-img img { image-rendering: auto; }
@media (max-width: 560px) { .mk-lord-art { width: calc(100% - 12px); } }
.mk-lord-info { min-width: 0; }
.mk-lord-info .eyebrow { margin-bottom: .4rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.mk-lord-info .eyebrow b { color: var(--lime); font-weight: 700; }
.mk-lord-name { margin: 0 0 .6rem; font: 400 clamp(2.6rem, 9vw, 4.6rem)/.92 var(--display); color: var(--lime); }
.mk-owner { margin: 0 0 1.25rem; color: var(--bone-dim); }
.mk-owner a { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
.mk-owner b { color: var(--bone); }
.mk-buy { padding: 1.1rem 0 1.25rem; border-block: 1px solid var(--line); }
.mk-buy-label { margin: 0; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.mk-buy-price { margin: .15rem 0 .2rem; font: 700 var(--step-3)/1 var(--narrow); letter-spacing: .02em; color: var(--lime); }
.mk-buy-price.is-none { color: var(--bone); font-size: var(--step-2); }
.mk-buy-price small { font-size: .45em; letter-spacing: .1em; color: var(--bone-dim); margin-left: .3em; }
.mk-buy .hint { margin-top: .3rem; }
.mk-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@media (max-width: 520px) { .mk-actions .btn { flex: 1 1 calc(50% - .3rem); } .mk-actions .btn:first-child:last-child, .mk-actions .btn-solid:only-of-type { flex-basis: 100%; } }
.mk-sec { margin-top: 1.75rem; }
.mk-sec > h2 { margin: 0 0 .5rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.mk-sec > h2 .n { color: var(--lime); margin-left: .35em; }
.mk-sec-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .6rem; }
.mk-traits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-traits li { border-bottom: 1px solid var(--line); }
.mk-traits a {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .1rem .9rem; align-items: baseline;
  padding: .6rem 0; color: var(--bone); text-decoration: none; font-size: var(--step--1);
}
.mk-traits a:hover .tv { color: var(--lime); }
.mk-traits .tk { font: 700 .78rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mk-traits .tv { font-weight: 700; font-size: var(--step-0); overflow-wrap: anywhere; }
.mk-traits .tn { color: var(--bone-dim); text-align: right; white-space: nowrap; }
.mk-traits .tf { grid-column: 2 / -1; color: var(--lime-dim); font: 700 .78rem var(--narrow); letter-spacing: .06em; }
.mk-history { padding-bottom: clamp(3rem, 8vw, 5rem); }
.mk-missing { padding-block: clamp(3rem, 10vw, 6rem); }
.mk-missing .dc-off-mark, .mk-missing h1 { margin: 0 0 .6rem; font: 400 clamp(2.6rem, 11vw, 4.5rem)/.9 var(--display); color: var(--lime); }

/* ---------- dialogs (ui.dialog) — the site's wallet pop-up: a bottom sheet on a phone ---------- */
.mk-dialog {
  background: var(--ink-2); color: var(--bone); border: 3px solid var(--lime); border-radius: 0;
  padding: clamp(1.25rem, 3vw, 2rem); width: min(92vw, 440px); max-height: 90dvh; overflow: auto;
}
.mk-dialog--wide { width: min(94vw, 620px); }
.mk-dialog::backdrop { background: color-mix(in oklch, var(--ink) 75%, transparent); backdrop-filter: blur(4px); }
.mk-dialog > h3 { margin: 0 0 .6rem; font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1; color: var(--lime); }
.mk-dialog > h3:focus { outline: none; }
.mk-dialog-body { font-size: var(--step--1); color: var(--bone-dim); }
.mk-dialog-body p { margin: 0 0 .7rem; }
.mk-dialog-body b { color: var(--bone); }
.mk-dialog-status { margin: .6rem 0 0; font-size: var(--step--1); color: var(--bone-dim); }
.mk-dialog-status:empty { display: none; }
.mk-dialog-status.is-busy::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; border-radius: 50%; background: var(--lime); animation: dc-pulse 1s ease-in-out infinite; }
.mk-dialog-status.is-bad { color: color-mix(in oklch, var(--red) 80%, var(--bone)); }
.mk-dialog-status.is-good { color: var(--lime); }
.mk-dialog .dialog-actions { margin-top: 1.1rem; position: sticky; bottom: 0; background: var(--ink-2); padding-top: .5rem; }
.mk-dialog .dialog-actions[hidden] { display: none; }
.btn-danger { color: color-mix(in oklch, var(--red) 80%, var(--bone)); border-color: color-mix(in oklch, var(--red) 70%, var(--ink)); }
.btn-danger:hover { color: var(--red); border-color: var(--red); }
@keyframes dc-pulse { 50% { opacity: .25; } }
@media (max-width: 560px) {
  .mk-dialog {
    width: 100%; max-width: none; max-height: 88dvh;
    margin: auto 0 0; border-width: 3px 0 0;
    padding: 1.4rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  }
  .mk-dialog[open] { animation: sheet-up .32s var(--ease-out); }
  /* the grab pill under the sheet's top line: pull it (or the title) down to close — ui.dialog's pointer handlers */
  .mk-dialog:not(.mk-dialog--center) .mk-grab { display: block; position: relative; height: 1.3rem; margin: -.7rem 0 .25rem; touch-action: none; cursor: grab; }
  .mk-dialog:not(.mk-dialog--center) .mk-grab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 4px; transform: translate(-50%, -50%); border-radius: 2px; background: var(--lime); opacity: .75; }
  .mk-dialog:not(.mk-dialog--center) > h3 { touch-action: none; }
}
@media (prefers-reduced-motion: reduce) { .mk-dialog[open] { animation: none; } }
.mk-grab { display: none; }
/* the page behind a sheet holds still (the owner, 2026-10-08: it scrolled under a Lord's sheet on the phone) */
.mk-dialog { overscroll-behavior: contain; }
html:has(.mk-dialog[open]) { overflow: hidden; }
/* a moment, not a step (the Burned message, the owner 2026-10-06): a card in the middle of a phone too, popping in */
.mk-dialog.mk-dialog--center { animation: mk-pop .3s var(--ease-out); }
@media (max-width: 560px) {
  .mk-dialog.mk-dialog--center { width: min(92vw, 440px); max-height: 90dvh; margin: auto; border-width: 3px; padding: 1.4rem 1.25rem; }
}
@keyframes mk-pop { from { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .mk-dialog.mk-dialog--center { animation: none; } }
/* the filter sheet's body is the same filter list as the sidebar */
.mk-sheet .mk-dialog-body { color: var(--bone); }
/* "Just purchased" (ui.justBought): the Lord big, Share on X, the × back to the page; the confetti flies over it */
.mk-bought > h3 { padding-right: 2.5rem; }
.mk-bought-x { position: absolute; top: .4rem; right: .4rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--bone); font: 400 2rem/1 var(--narrow); cursor: pointer; }
.mk-bought-x:hover, .mk-bought-x:focus-visible { color: var(--lime); }
.mk-bought .mk-dialog-body { color: var(--bone); }
.mk-bought-art { margin: 0 0 .9rem; }
.mk-bought-art img, .mk-bought-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.mk-bought-grid { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mk-bought-grid span { display: block; margin-top: .25rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .08em; color: var(--bone-dim); }
.mk-bought .mk-bought-name { margin: 0 0 .4rem; font: 700 var(--step-0) var(--narrow); letter-spacing: .04em; }
.mk-bought .mk-bought-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.1rem 0 0; }
.mk-pick { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-pick li { border-bottom: 1px solid var(--line); }
.mk-pick button {
  width: 100%; display: flex; align-items: baseline; gap: .8rem; min-height: 3rem; padding: .5rem 0; background: none; border: 0; cursor: pointer;
  color: var(--bone); text-align: left; font: 500 var(--step-0) var(--sans);
}
.mk-pick button b { font: 700 .78rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); min-width: 5.5rem; }
.mk-pick button:hover, .mk-pick button:focus-visible { color: var(--lime); outline: none; }
/* More ▾ on My Lords (Send, Burn): the action word sits in a button box, so it reads as something to press (the owner) */
.mk-pick-acts button { align-items: center; gap: 1rem; padding: .65rem 0; }
.mk-pick-acts button b {
  flex: none; min-width: 7rem; padding: .65rem 1rem; text-align: center; color: var(--lime); font-size: .92rem;
  border: 2px solid var(--lime-dim); transition: background-color .15s, border-color .15s, color .15s;
}
.mk-pick-acts button:hover b, .mk-pick-acts button:focus-visible b { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.mk-pick-acts button:focus-visible b { outline: 2px solid var(--bone); outline-offset: 2px; }

/* ---------- toast ---------- */
.mk-toast {
  position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); z-index: 70;
  visibility: hidden; opacity: 0; transform: translate(-50%, 1rem);
  transition: transform .4s var(--ease-out), opacity .25s ease, visibility 0s linear .4s;
  width: max-content; max-width: min(92vw, 460px); margin: 0; padding: .7rem 1rem;
  border: 3px solid var(--lime); background: var(--ink-2); color: var(--bone); font-size: var(--step--1);
  box-shadow: 6px 6px 0 var(--lime-dim); pointer-events: none;
}
.mk-toast.is-on { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: transform .4s var(--ease-out), opacity .2s ease, visibility 0s; }
.mk-toast.is-bad { border-color: var(--red); box-shadow: 6px 6px 0 color-mix(in oklch, var(--red) 50%, var(--ink)); }
body.has-cart .mk-toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .mk-toast { transition: none; } }

/* ---------- /market/zone/ — a document, one column ---------- */
.mk-doc { max-width: 760px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) clamp(3rem, 8vw, 5rem); }
.mk-doc h2 { margin: 2.25rem 0 .6rem; font: 400 var(--step-2)/1 var(--display); color: var(--lime); }
.mk-doc p, .mk-doc li { color: var(--bone); max-width: 64ch; }
.mk-doc p { margin: 0 0 .9rem; }
.mk-doc p.eyebrow { color: var(--lime-dim); margin-bottom: .5rem; }
.mk-doc ul, .mk-doc ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.mk-doc li + li { margin-top: .35rem; }
.mk-doc code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; color: var(--bone); overflow-wrap: anywhere; }
.mk-doc pre { margin: 0 0 1rem; padding: .9rem 0; border-block: 1px solid var(--line); overflow-x: auto; font-size: .82rem; line-height: 1.5; }
.mk-doc pre code { color: var(--bone-dim); overflow-wrap: normal; }
.mk-addrs { margin: 0 0 1rem; border-top: 1px solid var(--line); }
.mk-addrs > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .2rem 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.mk-addrs dt { font: 700 .8rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); padding-top: .15rem; }
.mk-addrs dd { margin: 0; min-width: 0; }
.mk-addrs dd a { font-family: ui-monospace, Menlo, monospace; font-size: .85em; overflow-wrap: anywhere; }
.mk-addrs dd small { display: block; color: var(--bone-dim); font-size: var(--step--1); }
@media (max-width: 560px) { .mk-addrs > div { grid-template-columns: 1fr; } }

/* a label for screen readers only (the field says what it is) */
.mk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ================================================================ parity (Addendum C)
   ---------- the toolbar's density toggle (§2.17) and "Updated … ago" (§2.16) ---------- */
.mk-density {
  flex: none; width: 2.9rem; min-height: 2.9rem; background: none; cursor: pointer; border: 2px solid var(--line); color: var(--lime);
  font: 700 1.15rem/1 var(--sans);
}
.mk-density:hover, .mk-density[aria-pressed="true"] { border-color: var(--lime-dim); }
.mk-updated { margin: 0; font: 700 .72rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); opacity: .8; }
.mk-updated:empty { display: none; }
.mk-resline .mk-count { margin-right: auto; }

/* dense cards: three across on a phone — the rank and the long cart label step aside */
.mk-cart-short { display: none; }
.mk-grid.is-dense .mk-card-name { font-size: var(--step--1); margin-top: .35rem; }
.mk-grid.is-dense .mk-card-name .rk, .mk-grid.is-dense .mk-one { display: none; }
.mk-grid.is-dense .mk-card-meta { font-size: .78rem; min-height: 1.6rem; gap: .3rem; }
.mk-grid.is-dense .mk-cart-long { display: none; }
.mk-grid.is-dense .mk-cart-short { display: inline; font-size: 1rem; }
.mk-grid.is-dense .mk-card-meta .mk-dim { font-size: .72rem; }

/* the heart (§2.14): a glyph over the picture's corner, no box — the ink outline keeps it readable on any art */
.mk-heart {
  background: none; border: 0; padding: .35rem; cursor: pointer; line-height: 1;
  font: 400 1.35rem/1 var(--sans); color: var(--bone);
  text-shadow: 0 0 2px var(--ink), 0 0 4px var(--ink), 0 1px 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.mk-heart[aria-pressed="true"] { color: var(--lime); }
.mk-heart:hover { transform: scale(1.12); }
.mk-heart:focus-visible { outline: 2px solid var(--lime); outline-offset: 0; }
.mk-card-heart { position: absolute; top: .15rem; right: .15rem; z-index: 2; }
.mk-grid.is-dense .mk-card-heart { font-size: 1.05rem; padding: .25rem; }

/* ---------- filters: AND-able status toggles, the price range, Top N (§2.3) ---------- */
.mk-status { flex-wrap: wrap; gap: .3rem 1.1rem; }
.mk-status button:disabled { opacity: .5; cursor: default; }
.mk-fnote { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--bone-dim); opacity: .8; margin-left: .3em; }
.mk-range { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mk-range label { flex: 1 1 0; min-width: 0; }
.mk-range .mk-input { width: 100%; padding: .5rem .65rem; min-height: 2.4rem; font-size: var(--step--1); }
.mk-rank { display: flex; align-items: center; gap: .6rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.mk-rank .mk-input { max-width: 7rem; }

/* ---------- sweep (§2.5): a sheet with a stepper, a max price and the Lords it would buy ---------- */
.mk-sweep p { margin: 0 0 .8rem; }
.mk-sweep-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.mk-sweep-row .mk-fhead { margin: 0; }
.mk-sweep-row .mk-input { max-width: 11rem; padding: .5rem .65rem; min-height: 2.4rem; font-size: var(--step--1); }
.mk-stepper { display: inline-flex; align-items: center; gap: .2rem; }
.mk-stepper button {
  width: 2.6rem; height: 2.6rem; background: none; border: 2px solid var(--lime-dim); color: var(--lime); cursor: pointer;
  font: 700 1.2rem/1 var(--sans);
}
.mk-stepper button:disabled { opacity: .35; cursor: default; }
.mk-stepper output { min-width: 2.4rem; text-align: center; font: 700 var(--step-1) var(--narrow); color: var(--bone); }
.mk-sweep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-height: 32vh; overflow: auto; }
.mk-sweep-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.mk-sweep-list a { font: 700 var(--step-0) var(--narrow); color: var(--bone); text-decoration: none; }
.mk-sweep-total { margin: .7rem 0 0 !important; color: var(--bone); }
.mk-sweep-total b { color: var(--lime); }
.mk-sweep-total .mk-usd { display: inline; margin-left: .4em; }

/* ---------- My Lords: holder tools (§2.4, §2.8, §2.12) ---------- */
.mk-subrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem; }
.mk-subrow .mk-sub { margin-right: auto; }
.mk-subrow .link-btn { font: 700 .78rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; padding: .5rem 0; margin: 0; }
.mk-mine-facts .mk-usd { display: inline; margin-left: .3em; }
.mk-mine-facts .link-btn { font-size: inherit; padding: .2rem 0; margin: 0 0 0 .3rem; }
.mk-row-acts { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.mk-sell { color: var(--lime) !important; font-weight: 700 !important; }
.mk-pickbox { position: absolute; z-index: 3; top: .35rem; left: .35rem; display: grid; place-items: center; width: 2rem; height: 2rem; cursor: pointer; }
.mk-pickbox input { width: 1.25rem; height: 1.25rem; accent-color: var(--lime); margin: 0; }
.mk-minegrid.is-selecting .mk-card-link { pointer-events: none; }
.mk-minegrid.is-selecting .mk-card:has(.mk-pickbox) .mk-card-img { outline: 2px dashed var(--lime-dim); outline-offset: -2px; }
.mk-minegrid.is-selecting .mk-card:has(input:checked) .mk-card-img { outline: 3px solid var(--lime); }
body.has-listbar { padding-bottom: 5rem; }

/* ---------- the Lord page (§2.1, §2.10) ---------- */
.mk-lord-title { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .2rem 1rem; }
.mk-lord-title .mk-lord-name { margin-bottom: .6rem; }
.mk-lord-tools { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.mk-lord-tools .mk-heart { text-shadow: none; }
.mk-lord-tools .link-btn { font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; }
.mk-chainline { margin: -.75rem 0 1.25rem; font-size: var(--step--1); color: var(--bone-dim); }
.mk-chainline a { color: var(--bone-dim); }
.mk-chainline a:hover { color: var(--lime); }
.mk-chainline b { color: var(--bone); }
.mk-buy-price .mk-usd { display: block; margin-top: .3rem; font-size: var(--step--1); letter-spacing: .06em; }
.mk-like { padding-bottom: clamp(3rem, 8vw, 5rem); }
.mk-history { padding-bottom: 1rem; }

/* ---------- share sheet ---------- */
.mk-share-url { font-family: ui-monospace, Menlo, monospace; font-size: .85em; color: var(--bone); overflow-wrap: anywhere; }
.mk-pick a.mk-pick-a {
  display: flex; align-items: baseline; gap: .8rem; min-height: 3rem; padding: .5rem 0; color: var(--bone); text-decoration: none;
  font: 500 var(--step-0) var(--sans);
}
.mk-pick a.mk-pick-a b { font: 700 .78rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); min-width: 5.5rem; }
.mk-pick a.mk-pick-a:hover { color: var(--lime); }

/* ---------- Activity: the book's rows (§2.13) ---------- */
.mk-ev-kind.is-book { color: var(--mk-c2-text); }
.mk-ev-kind.is-cancel { color: var(--bone-dim); }
.mk-ev-img--any { display: grid; place-items: center; color: var(--lime-dim); font-size: 1.2rem; }
.mk-ev-any { font: 700 var(--step-0) var(--narrow); color: var(--bone-dim); }
.mk-seg { row-gap: .2rem; }

/* ---------- Analytics (§2.6): flat charts, the validated pair, ink-outlined text ---------- */
:root { --mk-c1: #79a600; --mk-c2: #248fcc; --mk-c2-text: oklch(80% 0.09 235); }
.mk-an-range { margin: .2rem 0 .5rem; }
.mk-an-sec { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mk-an-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.mk-an-head h2 { margin: 0 0 .4rem; font: 400 var(--step-2)/1 var(--display); color: var(--lime); }
.mk-an-head h2 small { font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); margin-left: .4em; }
.mk-an-head .mk-seg { margin: 0; }
.mk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; margin: 0 0 .5rem; font-size: var(--step--1); color: var(--bone); }
.mk-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--mk-c1); margin-left: .5rem; }
.mk-key:first-child { margin-left: 0; }
.mk-key.c2 { background: var(--mk-c2); }
.mk-key.is-dot { width: 9px; height: 9px; border-radius: 50%; }
.mk-key.is-ring { width: 9px; height: 9px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px var(--mk-c1); }
.mk-key.is-old { opacity: .45; }
.mk-chart-box { position: relative; }
.mk-chart { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.mk-chart-txt { font: 700 11px var(--narrow); letter-spacing: .04em; fill: var(--bone); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; }
.mk-chart-dim { fill: var(--bone-dim); }
.mk-chart-strong { fill: var(--bone); font-weight: 700; }
.mk-axis { stroke: var(--line); stroke-width: 1; }
.mk-grid-line { stroke: color-mix(in oklch, var(--line) 55%, transparent); stroke-width: 1; }
.mk-cross { stroke: var(--bone-dim); stroke-width: 1; }
.mk-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mk-line.c1 { stroke: var(--mk-c1); }
.mk-line.c2 { stroke: var(--mk-c2); }
.mk-wash { fill: var(--mk-c1); opacity: .1; }
.mk-dot { stroke: var(--ink); stroke-width: 2; }
.mk-dot.c1 { fill: var(--mk-c1); }
.mk-dot.c2 { fill: var(--mk-c2); }
.mk-dot.is-ring { fill: var(--ink); stroke: var(--mk-c1); stroke-width: 2; }
.mk-dot.is-old { opacity: .45; }
.mk-bar.c1 { fill: var(--mk-c1); }
.mk-bar.c2 { fill: var(--mk-c2); }
.mk-bar.is-on { filter: brightness(1.3); }
.mk-hit { fill: transparent; }
.mk-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 9rem; max-width: 16rem; padding: .45rem .6rem;
  background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(0 0 0 / .4);
  font-size: var(--step--1); color: var(--bone-dim);
}
.mk-tip p { margin: 0; display: flex; align-items: center; gap: .4rem; }
.mk-tip p + p { margin-top: .15rem; }
.mk-tip b { color: var(--bone); }
.mk-tip .mk-key { margin: 0; }
.mk-tbl { margin-top: .4rem; }
.mk-tbl summary { cursor: pointer; width: fit-content; padding: .4rem 0; font: 700 .78rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mk-tbl summary:hover { color: var(--lime); }
.mk-tbl-wrap { max-height: 320px; overflow: auto; }
.mk-tbl table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.mk-tbl th { text-align: left; font: 700 .72rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); padding: .35rem .5rem .35rem 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink); }
.mk-tbl td { padding: .35rem .5rem .35rem 0; border-bottom: 1px solid color-mix(in oklch, var(--line) 60%, transparent); color: var(--bone); white-space: nowrap; }
.mk-holders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-holders li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto; gap: .2rem .8rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.mk-holders a { font-family: ui-monospace, Menlo, monospace; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-holders a:hover { color: var(--lime); }
.mk-rank-n { color: var(--bone-dim); font: 700 .78rem var(--narrow); }
.mk-hold-n { font-weight: 700; color: var(--bone); white-space: nowrap; }
@media (max-width: 420px) { .mk-holders li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .mk-holders li > .mk-dim { grid-column: 2 / -1; } }
.mk-os { font-weight: 700; color: var(--lime); text-decoration: none; white-space: nowrap; }
.mk-os span { font-weight: 400; color: var(--bone-dim); }
.mk-os:hover span, .mk-os:focus-visible span { color: var(--lime); text-decoration: underline; }

/* ---------- the curse (js/market/curse.js): a Lord's eyes burn lime and watch you, the way they do in the cursed couple
   video (scripts/couple.py): the eye holes or lenses filled lime, blurred at σ = 6 and 30 px of the 2048 px art (0.293 and
   1.465 % of the picture: cqw of .hl-eyes) × 0.9 and × 1.4, added to the picture on a heartbeat. pointer-events: none,
   only ever on a Lord's picture. ---------- */
.hl-eyes {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; container-type: inline-size;
  mix-blend-mode: screen; mix-blend-mode: plus-lighter;   /* added to the picture, where the browser can */
  opacity: 0; visibility: hidden; transition: opacity .35s ease-out, visibility 0s .35s;
}
.hl-eyes.is-lit { opacity: 1; visibility: visible; transition: opacity .15s ease-in, visibility 0s; }
.hl-beat { position: absolute; left: 30%; top: 38%; width: 52%; height: 28%; }   /* BOX in curse.js */
.hl-eyes.is-lit .hl-beat { animation: hl-beat .85s linear infinite; }
.hl-beat::before, .hl-beat::after, .hl-beat i {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen; mix-blend-mode: plus-lighter;
  background:
    radial-gradient(var(--lrx) var(--lry) at var(--lx) var(--ly), #c0fb09 96%, rgb(192 251 9 / 0)),
    radial-gradient(var(--rrx) var(--rry) at var(--rx) var(--ry), #c0fb09 96%, rgb(192 251 9 / 0));
}
.hl-beat::before { filter: blur(.6px); filter: blur(.293cqw); }               /* σ 6 px: the burn (× 0.9 at the beat's 1.19 peak ≈ 1) */
.hl-beat::after, .hl-beat i { filter: blur(3px); filter: blur(1.465cqw); }   /* σ 30 px: the bloom, × 1.4 at the peak = 1 + .67 */
.hl-beat i { opacity: .67; }
.hl-beat b {   /* the white-hot core: curse.js leans it toward the pointer */
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 50%;
  mix-blend-mode: screen; mix-blend-mode: plus-lighter;
  background: radial-gradient(closest-side, #fff 25%, rgb(255 255 255 / .55) 55%, rgb(255 255 255 / 0));
  transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)); transition: transform .14s ease-out;
}
@keyframes hl-beat {   /* 0.75 + 0.5·exp(−3.2·t/P) over P = 0.85 s, scaled so the beat's peak is 1 */
  0% { opacity: 1; } 5% { opacity: .94; } 10% { opacity: .89; } 20% { opacity: .81; } 30% { opacity: .75; }
  45% { opacity: .7; } 60% { opacity: .66; } 80% { opacity: .63; } 100% { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) { .hl-eyes { display: none; } }

/* ---------- the Sui Lords on the market (js/market/sui-market.js; gallery.js's collection switch, #c=sui) ----------
   The same page in Sui mode: the switch above the stats, the Sui Lords' four-cell strip and About, their cards, and a
   Sui Lord's dialog. Colours are the page's tokens only: blue under the Sui theme, which the page wears whenever the Sui
   Lords are on screen, wallet or not (js/theme.js page(), the owner 2026-10-16). */
.mk-coll { margin: 0 0 .9rem; gap: .2rem 1.5rem; }
.mk-coll button { font-size: var(--step-0); letter-spacing: .14em; padding: .45rem 0; }
.mk-coll button:hover { color: var(--bone); }
.mk-coll button[aria-pressed="true"]:hover { color: var(--lime); }
.mk-stats[hidden], .mk-about[hidden], .mk-tab[hidden] { display: none; }
html.mk-sui-mode .mk-offer-row { display: none; }   /* trade-only: the Sui Lords trade on TradePort */
/* the Sui strip has six cells: on a wide screen a row of four over a row of two (the base rule's "last four" is for eight) */
@media (min-width: 700px) { .mk-stats--6 > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); } .mk-stats--6 > div:nth-last-child(-n+2) { border-bottom: 0; } }
/* a Sui Lord's dialog: its last sale and its TradePort history (js/market/sui-activity.js rows without the thumb) */
.mk-sl-last { margin: -.6rem 0 1rem; color: var(--bone-dim); }
.mk-sl-last b { color: var(--bone); }
.mk-sl-last .mk-usd { display: inline; margin-left: .35em; }
.mk-sl-h { margin: 1.5rem 0 .3rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mk-sl-h small { margin-left: .5em; font-size: inherit; color: var(--lime-dim); }
.mk-sl-none { margin: 1.25rem 0 0; color: var(--bone-dim); font-size: var(--step--1); }
.mk-feed--sl .mk-price .mk-usd { display: inline; margin-left: .35em; font-size: .85em; }
#panel-activity-sui .mk-price .mk-usd { display: inline; margin-left: .35em; font-size: .85em; }
#panel-activity-sui .mk-ev-who, .mk-feed--sl .mk-ev-who { white-space: normal; overflow-wrap: anywhere; }   /* two Sui addresses: wrap, never clip the buyer */
@media (max-width: 560px) { html.mk-sui-mode .mk-tabs { justify-content: flex-start; gap: 1.6rem; } }   /* four tabs, not spread apart */
/* "Sui Lord #N" stays on one line: every card is the same height (the grid is virtualised) */
.mk-card-name .mk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a Sui Lord's dialog: the picture beside its rank, holder, price, traits and links (stacked on a phone) */
.mk-x {
  position: absolute; top: .4rem; right: .4rem; z-index: 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: var(--bone); font: 400 2rem/1 var(--narrow); cursor: pointer;
}
.mk-x:hover, .mk-x:focus-visible { color: var(--lime); outline: none; }
.mk-sl-dialog > h3 { padding-right: 2.5rem; }
.mk-sl-dialog .mk-dialog-body { color: var(--bone); }
.mk-sl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; }
@media (min-width: 600px) { .mk-sl { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; } }
.mk-sl-art .mk-card-img { width: 100%; }
@media (max-width: 599px) { .mk-sl-art { width: min(100%, 17rem); } }
.mk-sl-rank { margin: 0 0 .35rem !important; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.mk-sl-rank b { color: var(--lime); }
.mk-sl .mk-owner { margin: 0 0 .5rem !important; font-size: var(--step--1); }
.mk-sl .mk-owner b { color: var(--bone); }
.mk-sl .mk-buy-price { font-size: var(--step-2); margin: .1rem 0 .9rem !important; }
.mk-sl .mk-traits { margin-top: .4rem; }
.mk-sl .mk-traits a { grid-template-columns: 5.2rem minmax(0, 1fr) auto; padding: .45rem 0; }
.mk-sl .mk-actions { margin-top: 1rem; }
.mk-sl .mk-actions .btn { padding: .6rem 1rem; font-size: var(--step--1); }

/* buying a Sui Lord on this page (js/market/sui-buy.js): the total under the price in the Lord's dialog, and the buy
   dialog's rows (the trade dialogs' look, css tokens from site.css) */
.mk-buy-price .mk-sb-total { display: block; margin: .3rem 0 0; font-size: var(--step--1); letter-spacing: .04em; color: var(--bone-dim); }
.mk-sb p { margin: 0 0 .7rem; }
.mk-sb .hint { margin: 0 0 .9rem; }
.mk-sb .mk-sb-lord { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .8rem; align-items: center; margin: 0 0 .9rem; }
.mk-sb .mk-sb-lord img, .mk-sb .mk-sb-lord .mk-card-img { width: 72px; height: 72px; object-fit: cover; }
.mk-sb .mk-sb-lord b { display: block; font: 700 var(--step-0) var(--narrow); letter-spacing: .04em; }
.mk-sb .mk-sb-lord span { color: var(--bone-dim); font-size: var(--step--1); }
.mk-sb dl { margin: 0 0 .9rem; border-top: 1px solid var(--line); }
.mk-sb dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.mk-sb dt { font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); flex: none; }
.mk-sb dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mk-sb dd b { color: var(--bone); }
.mk-sb dd small { display: block; color: var(--bone-dim); font-size: var(--step--1); }
.mk-sb .mk-sb-bad { color: var(--red); }
.mk-sb .mk-sb-big { font-family: var(--display); font-size: var(--step-2); line-height: 1.05; color: var(--lime); margin: 0 0 .6rem; }
.mk-sb .mk-sb-addr { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
.mk-sb .mk-sb-field { display: grid; gap: .3rem; margin: 0 0 .8rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mk-sb .mk-sb-field input { width: 100%; background: var(--ink); color: var(--bone); border: 2px solid var(--line); border-radius: 0; padding: .7rem .8rem; font: 500 var(--step-0)/1.2 var(--sans); letter-spacing: 0; text-transform: none; }
.mk-sb .mk-sb-field input:focus { border-color: var(--lime); outline: none; }
.mk-sb .mk-sb-calc:empty { display: none; }
.mk-sui-card .mk-card-acts { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .3rem 0 0; font-size: var(--step--1); }
.mk-sb .mk-sb-addr-big { margin: 0 0 .9rem; }
.mk-sb .mk-sb-addr-big code { display: block; font-family: ui-monospace, Menlo, monospace; font-size: var(--step-0); letter-spacing: .04em; word-spacing: .2em; line-height: 1.6; overflow-wrap: anywhere; color: var(--bone); }
.mk-sb .mk-sb-tonote:empty { display: none; }

/* ---------------------------------------------------------------- Alerts (My Lords; js/market/alerts.js, docs/alerts.md) */
.mk-alerts { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.mk-alerts .mk-sub { margin-top: 0; }
.mk-al-lede { margin: 0 0 1rem; color: var(--bone-dim); font-size: var(--step--1); max-width: 64ch; }
.mk-al-channels, .mk-al-events { display: grid; gap: .55rem; margin: 0 0 1rem; }
.mk-al-what { margin: 1.2rem 0 .5rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.mk-al-what .mk-dim { letter-spacing: 0; text-transform: none; font-family: var(--sans); font-weight: 400; margin-left: .5em; }
.mk-switch { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; cursor: pointer; max-width: 64ch; }
.mk-switch > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mk-switch-track { position: relative; display: block; width: 2.6rem; height: 1.5rem; margin-top: .1rem; border: 2px solid var(--line); background: var(--ink); transition: border-color .15s, background .15s; }
.mk-switch-track::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: .8rem; height: .8rem; background: var(--bone-dim); transition: transform .15s, background .15s; }
.mk-switch > input:checked + .mk-switch-track { border-color: var(--lime); background: var(--lime); }
.mk-switch > input:checked + .mk-switch-track::after { transform: translateX(1.1rem); background: var(--on-lime); }
.mk-switch > input:focus-visible + .mk-switch-track { outline: 2px solid var(--lime); outline-offset: 2px; }
.mk-switch > input:disabled + .mk-switch-track { opacity: .45; }
.mk-switch > input:disabled ~ .mk-switch-text { color: var(--bone-dim); }
.mk-switch-text { font-size: var(--step--1); line-height: 1.45; color: var(--bone); }
.mk-switch-text b { color: var(--bone); margin-right: .3em; }
.mk-switch-text a { color: var(--lime); }
.mk-al-floor .mk-switch-text { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mk-al-dir { flex: 0 0 auto; width: auto; padding: .35rem 1.7rem .35rem .6rem; min-height: 2.2rem; font-size: var(--step--1); background-position: calc(100% - .95rem) 55%, calc(100% - .6rem) 55%; }
.mk-al-num { flex: 0 0 auto; width: 7.5rem; padding: .35rem .6rem; min-height: 2.2rem; font-size: var(--step--1); }
.mk-al-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2rem 0 0; }
.mk-al-note { color: var(--bone-dim); font-size: var(--step--1); }
.mk-al-note.is-bad { color: var(--red); }
.mk-al-recent .mk-row-main a { color: var(--bone); }
.mk-al-marks { gap: .8rem; font: 700 .72rem var(--narrow); letter-spacing: .1em; text-transform: uppercase; }
.mk-al-ok { color: var(--lime-dim); }
.mk-al-bad { color: var(--bone-dim); }