/* The Market's chrome and Browse components, one definition for two places:
   every Market page (html.mkt, imported first by ui.css) and the landing's
   hero mock (.frame.mkt, linked by /index.html). The landing mock is the
   reference: sizes, fonts, colours and radii here are the mock's.
   Scoped under .mkt so the landing's own classes are never touched.
   Discord Activity rules stay in ui.css and override these (same weight,
   later in the cascade). */
.mkt {
  --mk-pad: 18px;              /* side padding of bar, banner and page, as in the mock */
  --mk-chip: #202a44;          /* brand/tokens.json "surface": avatars (ui.css reuses --surface for bg-1) */
  --mk-cols: 2fr 1.6fr .8fr .95fr .85fr 1.1fr .8fr .45fr;
  font-variant-numeric: tabular-nums;
}
/* Controls take the page's figures, as text does (browsers reset them). */
.mkt button, .mkt select, .mkt input { font-variant-numeric: inherit; }

/* ---- badges (MTT, trust, risk): pill or icon, colours from tokens ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional; src: url(/fonts/inter-700.woff2) format("woff2"); }
.mkt .mbs { display: inline-flex; gap: var(--space-1); align-items: center; flex: none; min-width: 0; vertical-align: middle; }
.mkt .mb { --c: var(--badge-format); position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 22px; padding: 0 9px 0 6px; border-radius: var(--radius-pill); box-sizing: border-box;
  background: var(--badge-bg); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--badge-border)); color: var(--badge-text);
  font-family: "Inter", var(--font-body); font-weight: 700; font-size: 10.5px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mkt .mb svg { width: 14px; height: 14px; flex: none; color: var(--c); }
.mkt .mb::after { content: ""; position: absolute; top: -3px; right: 3px; width: 7px; height: 7px; background: var(--c);
  border-radius: 0 100% 0 100%; transform: rotate(-12deg); box-shadow: 0 0 0 1.5px var(--badge-bg); }
.mkt .mb[data-cat="bounty"] { --c: var(--badge-bounty); }
.mkt .mb[data-cat="format"] { --c: var(--badge-format); }
.mkt .mb[data-cat="speed"] { --c: var(--badge-speed); }
.mkt .mb[data-cat="structure"] { --c: var(--badge-structure); }
.mkt .mb[data-cat="prestige"] { --c: var(--badge-prestige); }
.mkt .mb[data-glow] { --c: var(--badge-glow); border-color: var(--badge-glow);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-glow) 35%, transparent), 0 0 10px color-mix(in srgb, var(--badge-glow) 55%, transparent); }
@media (max-width: 600px) {
  .mkt .mb { height: 18px; padding: 0 7px 0 5px; gap: 3px; font-size: 9px; }
  .mkt .mb svg { width: 12px; height: 12px; }
  .mkt .mb::after { width: 6px; height: 6px; top: -2px; }
  /* In a row the name needs the room: icon only, the label stays in the
     tooltip and the aria-label. The legend keeps the full pill. */
  .mkt .mrow .mb, .mkt .ocard .mb { padding: 0; width: 22px; justify-content: center; }
  .mkt .mrow .mb-t, .mkt .ocard .mb-t { display: none; }
}
/* Badges are icon only; the hover says what each one is. */
.mkt .mb { width: 22px; padding: 0; justify-content: center; }
.mkt .mb::after { display: none; }
.mkt .mb.sb { height: 20px; width: 20px; }
@media (max-width: 600px) { .mkt .mb, .mkt .mb.sb { height: 18px; width: 18px; padding: 0; } }

/* ---- top bar: 52 px, logo · MARKET · tabs · who ---- */
.mkt .topbar { position: sticky; top: 0; z-index: 30; height: 52px; background: rgba(11,16,32,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; line-height: 19.5px; }
.mkt .topbar .in { max-width: calc(1120px + 2 * var(--mk-pad)); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 22px;
  padding: 0 max(var(--mk-pad), env(safe-area-inset-left,0)); }
.mkt .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.mkt .brand .brand-logo { height: 16px; width: auto; display: block; border-radius: 0; }
.mkt .brand-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0; }
.mkt .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .3em; line-height: 19.5px;
  text-transform: uppercase; color: var(--muted); }
.mkt .topnav { display: none; align-items: center; gap: 4px; margin: 0 auto 0 0; white-space: nowrap; }
.mkt .topnav a, .mkt .topnav button { display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); font: inherit;
  font-size: 13px; line-height: 19.5px; font-weight: 500; padding: 6px 11px; min-height: 0; border: 0; border-radius: 8px; background: transparent; letter-spacing: 0; }
.mkt .topnav a.on { color: var(--ink); background: var(--bg-2); font-weight: 600; }
.mkt .topnav a:hover, .mkt .topnav button:hover { color: var(--ink); }
.mkt .topbar .who { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.mkt .topbar .who .pseudo { display: none; font-size: 13px; color: var(--muted); }
.mkt .avatar-btn { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; border: 0;
  background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
.mkt .avatar-btn .avatar, .mkt .topbar .mk-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mk-chip); font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0; color: var(--ink); }
.mkt .avatar-btn .caret { display: none; font-size: 10px; color: var(--muted); }
.mkt .signin { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.mkt .signin span { display: none; }
.mkt .signin svg { width: 18px; height: 18px; }
.mkt .menu { position: relative; }
.mkt .menu > div, .mkt .who > .drop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-1);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; min-width: 180px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.mkt .menu > div a, .mkt .drop a, .mkt .drop button { text-decoration: none; color: var(--ink); padding: 0 12px; border-radius: 6px;
  min-height: 40px; display: flex; align-items: center; font: inherit; font-size: 14px; border: 0; background: transparent; width: 100%; justify-content: flex-start; }
.mkt .drop .who-name { padding: 8px 12px 4px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.mkt .menu > div a:hover, .mkt .drop a:hover, .mkt .drop button:hover { background: var(--bg-2); }
@media (min-width: 769px) {
  .mkt .topnav { display: flex; }
  .mkt .topbar .who .pseudo { display: inline; }
  .mkt .avatar-btn { width: auto; padding: 0 2px 0 0; }
  .mkt .avatar-btn .caret { display: inline; }
  .mkt .signin span { display: inline; }
}

/* ---- Beta line under the bar ---- */
.mkt .notice { display: flex; align-items: center; font-size: 12px; line-height: 18px; color: var(--muted); background: var(--bg-1);
  border-block: 1px solid var(--line); padding: 8px max(var(--mk-pad), env(safe-area-inset-left,0)); }
.mkt .notice .in { max-width: 1120px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; min-width: 0; }
.mkt .notice .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt .notice .txt .long { display: none; }
@media (min-width: 600px) { .mkt .notice .txt .long { display: inline; } .mkt .notice .txt .short { display: none; } }
.mkt .notice .txt::before { content: "Beta"; font-family: var(--font-display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-right: 6px; }
.mkt .notice .x { min-height: 18px; height: 18px; width: 18px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }

/* ---- Browse: title, filter row ---- */
.mkt .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; line-height: 19.5px; }
.mkt .toolbar h1 { margin: 0 auto 0 0; font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 26px; letter-spacing: 0; white-space: nowrap; }
.mkt .toolbar .count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mkt .toolbar .open-filters { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mkt .sheet { position: fixed; inset: 0; z-index: 45; display: none; }
.mkt .sheet[open] { display: block; }
.mkt .sheet .veil { position: absolute; inset: 0; background: rgba(4,8,18,.66); }
.mkt .sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg-1);
  border-top: 1px solid var(--line-2); border-radius: 10px 10px 0 0;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom,0));
  display: flex; flex-direction: column; gap: 12px; max-height: 86vh; overflow: auto; }
.mkt .sheet .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt .sheet .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 0 auto; }
/* A filter: muted label, then its value in a 28 px outlined box. */
.mkt .sheet .f { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.mkt .sheet .f > span { font-size: 12px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.mkt .sheet .f select, .mkt .sheet .f input:not([type="checkbox"]) { -webkit-appearance: none; appearance: none; min-height: 0; height: 28px; width: auto; max-width: 150px;
  margin: 0; padding: 4px 22px 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: transparent no-repeat right 7px center / 8px 5px;
  color: var(--ink); font: inherit; font-size: 12px; line-height: 18px; box-shadow: none; }
.mkt .sheet .f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238e9bb7' stroke-width='1.3'/%3E%3C/svg%3E"); }
.mkt .sheet .f select option { background: var(--bg-1); color: var(--ink); }
.mkt .sheet .f input:not([type="checkbox"]) { width: 48px; padding-right: 14px; }
.mkt .sheet .f input::placeholder { color: var(--faint); }
.mkt .sheet .f.check { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.mkt .sheet .f.check input { width: 14px; height: 14px; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.mkt .sheet .f.check > span { color: var(--muted); }
@media (min-width: 769px) {
  .mkt .toolbar { row-gap: 14px; }
  .mkt .sheet { position: static; display: flex; flex: 1 0 100%; }
  .mkt .sheet .veil, .mkt .sheet .grab, .mkt .sheet .sheet-close, .mkt .toolbar .open-filters, .mkt .toolbar .count { display: none; }
  .mkt .sheet .panel { position: static; border: 0; border-radius: 0; background: transparent; padding: 0; max-height: none; overflow: visible;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; justify-content: flex-start; box-shadow: none; }
  .mkt .sheet .fields { display: contents; }
  .mkt .sheet .f { flex-direction: row; align-items: center; gap: 6px; }
}

/* ---- Next on the schedule ---- */
.mkt #upnext { display: flex; flex-direction: column; background: transparent; box-shadow: none; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; gap: 10px;
  font-size: 11px; line-height: 16px; }
.mkt #upnext > .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mkt #upnext .label { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mkt #upnext #upnext-all { font-size: 11px; line-height: 16px; color: var(--muted); text-decoration: none; }
.mkt #upnext .chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.mkt #upnext .chips button { display: inline-flex; align-items: baseline; gap: 0; flex: none; min-width: 0; min-height: 0; height: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 19.5px; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.mkt #upnext .chips button .count { color: var(--muted); margin-left: 4px; font-size: 12px; line-height: 14px; font-weight: 600; }
.mkt #upnext .chips button.on { border-color: var(--accent); color: var(--accent); }

/* ---- page rhythm: 18 px under the banner, 14 px between blocks, 10 px from the summary to the table ---- */
.mkt .wrap { gap: 14px; }
.mkt body { padding-left: max(var(--mk-pad), env(safe-area-inset-left,0)); padding-right: max(var(--mk-pad), env(safe-area-inset-right,0)); }
.mkt #chrome { margin: 0 calc(-1 * max(var(--mk-pad), env(safe-area-inset-left,0))) 4px; }
.mkt .osum + .ocards { margin-top: -4px; }

/* ---- summary line ---- */
.mkt .osum { font-size: 13px; line-height: 19.5px; color: var(--muted); }
.mkt .osum b { font-weight: 500; color: var(--ink); font-family: var(--font-mono); }

/* ---- offer table: head, rows (64 px), availability, price, risk ---- */
.mkt .ocards { display: flex; flex-direction: column; gap: 6px; }
.mkt .ocard, .mkt .ohead { display: grid; grid-template-columns: var(--mk-cols); column-gap: 12px; align-items: center; }
.mkt .ohead { padding: 0 12px 8px; font-size: 11px; line-height: 16.5px; margin-bottom: 0; }
.mkt .ohead > * { font: inherit; font-size: 11px; line-height: 16.5px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; text-align: left;
  background: none; border: 0; padding: 0; min-height: 0; cursor: default; white-space: nowrap; }
.mkt .ohead > .r { text-align: right; justify-self: end; }
.mkt .ohead > button { cursor: pointer; }
.mkt .ohead > button:hover, .mkt .ohead > .on { color: var(--ink); }
.mkt .ohead > .on::after { content: " ▾"; }
.mkt .ocard { min-height: 64px; padding: 8px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; position: relative; overflow: hidden; font-size: 13px; line-height: 19.5px; font-weight: 400; }
.mkt .ocard > * { min-width: 0; }
.mkt .ocard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.mkt .ocard.featured::before { background: var(--featured); }
.mkt .ocard:hover { border-color: var(--line-2); background: var(--bg-2); }
.mkt .ocard.notopen { opacity: .72; }
.mkt .o-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mkt .o-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; color: var(--ink); background: var(--mk-chip); }
.mkt .o-av.is-room { background: none; }
.mkt .o-av .room-mark { width: 100%; height: 100%; border-radius: 50%; display: block; }
.mkt .o-late { position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--late); border: 2px solid var(--bg-1); }
.mkt .o-id, .mkt .o-mtt { display: grid; min-width: 0; }
.mkt .o-name { display: flex; align-items: center; gap: 2px; font-size: 13px; line-height: 19.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.mkt .o-pseudo { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: 2px; }
.mkt .o-name > :not(.o-pseudo) { flex: none; }
.mkt .o-name .tier-mark, .mkt .o-name .seal-mark, .mkt .o-name .seal { display: block; width: 14px; height: 14px; }
.mkt .o-trust { display: inline-flex; }
.mkt .o-trust .mb.sb { width: 14px; height: 14px; padding: 0; }
.mkt .o-tline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkt .o-tname { min-width: 0; font-size: 13px; line-height: 19.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt .o-sub { font-size: 12px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt .o-sub em, .mkt .o-lvl b.up { font-style: normal; color: var(--accent); }
.mkt .o-num { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-size: 13px; line-height: 19.5px; color: var(--ink); white-space: nowrap; }
.mkt .o-num .o-sub { font-family: var(--font-body); }
.mkt .o-cur { display: inline-flex; margin-left: 4px; vertical-align: -2px; }
.mkt .o-cur svg, .mkt .o-cur .usdt { width: 13px; height: 13px; display: block; }
.mkt .o-key { color: var(--ink); }
.mkt .o-gtd { color: var(--ink); }
.mkt .o-closes.soon { color: var(--last-call); }
.mkt .o-closes.now { color: var(--late); }
.mkt .o-left { display: grid; gap: 3px; justify-items: end; text-align: right; }
.mkt .o-pct { font-family: var(--font-mono); color: var(--accent); }
.mkt .o-bar { width: 100%; height: 3px; border-radius: 3px; background: var(--mk-chip); overflow: hidden; }
.mkt .o-bar i { display: block; height: 100%; background: var(--accent); }
.mkt .o-risk { justify-self: end; display: flex; }
.mkt .o-risk .mb.sb, .mkt .o-risk .gauge { width: 28px; height: 28px; }
.mkt .o-risk .mb svg { width: 18px; height: 18px; }
@media (min-width: 760px) and (max-width: 1023px) {
  .mkt { --mk-cols: 2fr 1.6fr .8fr .85fr 1.1fr .8fr; }
  .mkt .ohead > [data-sort="gtd"], .mkt .ohead > [data-sort="risk"], .mkt .ocard > .o-gtd, .mkt .ocard > .o-risk { display: none; }
}
/* Phone: two lines per offer (player · buy-in · risk, then tournament · closes · left). */
@media (max-width: 759px) {
  .mkt .ohead { display: none; }
  .mkt .ocard { grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto; row-gap: 8px; column-gap: 10px; padding: 8px 10px; }
  .mkt .o-player { grid-column: 1; grid-row: 1; }
  .mkt .ocard > .o-num.o-key:not(.o-closes) { grid-column: 2; grid-row: 1; }
  .mkt .o-risk { grid-column: 3; grid-row: 1; }
  .mkt .o-mtt { grid-column: 1; grid-row: 2; }
  .mkt .o-closes { grid-column: 2; grid-row: 2; }
  .mkt .o-left { grid-column: 3; grid-row: 2; width: 72px; }
  .mkt .ocard > .o-num:not(.o-key), .mkt .ocard > .o-gtd { display: none; }
  .mkt .o-left .o-sub, .mkt .o-id .o-sub { display: none; }
  .mkt .o-av { width: 30px; height: 30px; }
  .mkt .o-name .seal-mark, .mkt .o-name .seal { display: none; }
}
@media (max-width: 479px) {
  .mkt .brand-sep, .mkt .brand-name { display: none; }
}