/* market.css — /p/find/market (Marketplace) full page. Design source:
   Figma frame `find-marketplace` (node 212:2). Card internals follow that
   frame's measurements; the grid itself is a responsive 3/2/1-column layout
   (cards stretch to fill their column) rather than the frame's fixed 360px. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); font-family: var(--font-thai); }

/* ── Phase-disabled state (§7.11/§12, §15.17) — mirrors .find-disabled in
   find.css (this page doesn't load that file, so duplicated here). ────── */
.mk-disabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
  padding: 40px 24px;
  height: calc(100vh - var(--navbar-total-h));
  height: calc(100dvh - var(--navbar-total-h));
  justify-content: center;
}
/* Legal footer fallback for the disabled state — no page container to
   mirror padding from here, so top/bottom are both set flat for symmetry. */
#market-root > .lg-footer-link { margin-top: 20px; padding-bottom: 20px; }
.mk-disabled__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  border: 2px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(var(--accent-gold-rgb),0.08);
}
.mk-disabled__title { font-size: 18px; font-weight: 700; }
.mk-disabled__subtext { font-size: 13px; color: var(--text-secondary); }
.mk-disabled__chip {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.mk-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - var(--navbar-total-h));
  min-height: calc(100dvh - var(--navbar-total-h));
}
/* .mk-content just groups everything above the footer into one block — no
   margin of its own, so it stays pinned to the top of .mk-page (2026-08-16:
   the listing grid grows over time, so it must not shift when short —
   only the footer below chases the bottom of the viewport). */
.mk-content { display: flex; flex-direction: column; gap: 16px; }
/* Legal footer is a flex child of .mk-page too, so it already gets the 16px
   flex `gap` above it like every other child — margin-top only needs to
   make up the rest to reach a flat 20px total (2026-07-09), since gap and
   margin stack additively in flexbox (16 + 4 = 20), matching the page's
   own padding-bottom (also reduced to 20px above). */
/* min-height + margin-top: auto (2026-07-10) — pins the footer to the
   bottom of the viewport when the grid is short/empty. padding-top keeps
   the tuned 16px gap + 4px = 20px total for the overflow case, where auto
   resolves to 0. */
.mk-page .lg-footer-link { margin-top: auto; padding-top: 4px; }

.mk-back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.4px;
  color: var(--text-secondary);
  text-decoration: none;
  background: rgba(var(--surface-rgb),0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4.8px 9.6px 4.8px 8px;
}
@media (hover: hover) { .mk-back-link:hover { color: var(--text-primary); border-color: var(--text-primary); } }

.mk-head-top { display: flex; align-items: center; gap: 8px; }
.mk-head-icon { font-size: 22px; color: var(--accent-gold-text); }
.mk-head-title { font-size: 26px; font-weight: 700; }
.mk-head-desc { font-size: 12px; color: var(--text-secondary); margin-top: -8px; }

.mk-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.mk-search-icon { font-size: 14px; }
.mk-search {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-thai);
  font-size: 13px;
}
.mk-search:focus { outline: none; }
.mk-search-wrap:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb),0.12); }
.mk-search::placeholder { color: var(--text-secondary); }

.mk-filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-select-wrap { position: relative; flex: 1; min-width: 160px; }
.mk-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-secondary);
  pointer-events: none;
}
/* Sized ~15% down from the original (height/font/padding/radius scaled);
   width is unaffected — the wrap above still controls that. */
.mk-select {
  width: 100%;
  height: 36px;
  padding: 0 26px 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-thai);
  font-size: 10px;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}
/* Open option list is native/OS-rendered, ignores the closed box's theming
   above — see CLAUDE.md "Native <select> dropdown theming". */
.mk-select option { background: var(--bg-elevated); color: var(--text-primary); }
.mk-select:focus { outline: none; border-color: var(--accent-gold); }

.mk-disclaimer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(var(--accent-gold-rgb),0.1);
  border: 1px solid rgba(var(--accent-gold-rgb),0.35);
  border-radius: var(--radius-lg);
}
.mk-disclaimer__icon { font-size: 14px; color: var(--accent-gold-text); flex-shrink: 0; }
.mk-disclaimer span:last-child { font-size: 11px; color: var(--text-primary); line-height: 1.5; }

/* Responsive grid: 3 columns desktop -> 2 tablet -> 1 mobile, cards stretch
   to fill their column instead of the fixed 360px in the Figma reference. */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1024px) {
  .mk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mk-grid { grid-template-columns: 1fr; }
}
.mk-panel-loading { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }
.mk-empty {
  width: 100%;
  padding: 32px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-2xl);
}

.mk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.mk-card__rail { height: 5px; width: 100%; flex-shrink: 0; }
/* flex:1 so the body fills whatever height the grid row stretched the card
   to; the divider's margin-top:auto (below) then pushes it + the seller
   block to the bottom regardless of how much price/method content sits
   above, so every card in a row lines up at the bottom edge. */
.mk-card__body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

.mk-card__zone { align-self: flex-start; padding: 4px 9px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; }
/* Floats in the card's top-right corner, out of the body's normal flow —
   stacked so the status badge (top) and report pill (below) never overlap
   each other, and never push the seat row down either. */
.mk-card__head-right {
  position: absolute;
  /* 5px rail + 14px body padding — must match the zone chip's effective
     distance from the card's top edge, or the two look unevenly spaced. */
  top: 19px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.mk-badge { padding: 3px 7px; border-radius: var(--radius-sm); font-size: 9px; font-weight: 600; flex-shrink: 0; }
/* color was a literal dark-mode-only hex (2026-08-08 fix — #02C458/#FABF59
   are exactly --success/--accent-gold's DARK values, hardcoded instead of
   referencing the token) — measured ~1.4:1 in light mode since the literal
   bright color barely differs from its own translucent tint underneath it.
   var(--success)/var(--accent-gold) resolve to the exact same hex in dark
   mode (no visual change there) and to the tuned darker/muted light-mode
   value here, which reads correctly against the tint. */
.mk-badge--verified { background: rgba(2, 196, 88, 0.18); border: 1px solid rgba(2, 196, 88, 0.5); color: var(--success); }
.mk-badge--pending { background: rgba(250, 191, 89, 0.16); border: 1px solid rgba(250, 191, 89, 0.4); color: var(--accent-gold-text); }
.mk-badge--unverified { background: rgba(var(--surface-rgb),0.08); border: 1px solid var(--border); color: var(--text-secondary); }

.mk-card__seat-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
  min-width: 0;
}
.mk-card__seat-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mk-card__seat-value { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }

.mk-card__round {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgb),0.06);
  font-size: 10px;
  color: var(--text-secondary);
}

.mk-card__price-label { font-size: 9px; color: var(--text-secondary); }
.mk-card__price-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Table layout, shown only when the seller's asking price differs from
   face value — every cell centered both ways; the asking column is wider
   (set via <colgroup>) and its value reads bigger (still white, no new
   accent color), with the "what this includes" detail inside that same cell.
   Wrapped in a bordered/rounded frame + real grid lines (header divider +
   column divider) so it actually reads as a table, not just two numbers
   side by side. */
.mk-price-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(var(--surface-rgb),0.02);
}
.mk-price-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mk-price-table th, .mk-price-table td { text-align: center; vertical-align: middle; padding: 8px 10px; }
.mk-price-table thead th {
  font-size: 9px; font-weight: 600; color: var(--text-secondary);
  background: rgba(var(--surface-rgb),0.05);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mk-price-table tbody td { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.mk-price-table--split th:first-child, .mk-price-table--split td:first-child { border-right: 1px solid var(--border); }
.mk-price-table--split tbody td:last-child { background: rgba(var(--surface-rgb),0.03); }
/* Selling price matches face value's size (2026-07-09 ask) — was 21px, now
   equal to .mk-price-table tbody td's 16px so neither price reads as more
   "official" than the other. */
.mk-price-table__asking { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.mk-price-table__detail { font-size: 9px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; margin-top: 4px; }

.mk-card__methods { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mk-card__methods-label { font-size: 10px; color: var(--text-secondary); }
.mk-card__method-chip {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
}

/* margin-top:auto absorbs all leftover space in the card body, pushing this
   divider + the seller block after it down to the bottom of the card —
   regardless of how much price/method content sits above (see .mk-card). */
.mk-divider { height: 0; border-top: 1px solid rgba(var(--surface-rgb),0.08); margin-top: auto; }

.mk-card__seller { display: flex; align-items: center; gap: 10px; }
.mk-card__avatar {
  width: 30px; height: 30px; border-radius: var(--radius-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--bg-primary);
}
.mk-card__who { flex: 1; min-width: 0; }
.mk-card__username { font-size: 12px; font-weight: 600; color: var(--text-primary); }
/* Only rendered when username differs from the X handle above it (2026-07-09). */
.mk-card__sysuser { font-size: 8.1px; color: var(--text-secondary); }
.mk-card__country-chunk { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.mk-card__seller-label { font-size: 8.1px; color: var(--text-secondary); }

.mk-card__dm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--radius-md);
  /* color was var(--bg-primary) (2026-08-08 fix) — this X-brand-style pill's
     background is deliberately FIXED white in both themes (not a bug, see
     §6.23), but the text was following the theme instead of staying fixed
     to match — in light mode --bg-primary IS a light color, landing on a
     white background at 1.27:1. Fixed to the literal dark-mode --bg-primary
     hex, matching the button's own always-white background. */
  background: var(--white); color: var(--fixed-bg-1);
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
@media (hover: hover) { .mk-card__dm:hover { background: rgba(var(--white-rgb), 0.85); } }

/* Sized ~15% down from the original (padding/font/radius/gap all scaled). */
.mk-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 7px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-thai);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.mk-report-btn__flag { color: var(--danger-text); }
@media (hover: hover) { .mk-report-btn:hover { background: rgba(var(--surface-rgb),0.06); } }

/* ── Report modal (M3) — reuses the shared .auth-modal shell from auth.css;
   these are just the report-specific pieces (§15.7). ─────────────────── */
.mk-report-card { max-width: 460px; max-height: 85vh; overflow-y: auto; }
/* Flexbox quirk: once a flex column's height is capped (above), form
   controls like <textarea>/<img> get an intrinsic "shrink to one line"
   minimum instead of respecting their own sizing (e.g. rows="3") — pin
   every direct child to its natural size so the CARD scrolls, not them. */
.mk-report-card > * { flex-shrink: 0; }

.mk-report-summary {
  padding: 10px 12px;
  background: rgba(var(--surface-rgb),0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.mk-report-summary__seat { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mk-report-summary__seller { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.mk-report-reasons { display: flex; flex-direction: column; gap: 8px; }
.mk-report-reason {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.mk-report-reason.is-selected { border-color: rgba(var(--like-red-rgb), 0.6); background: rgba(var(--like-red-rgb), 0.1); }
.mk-report-reason__input { accent-color: var(--like-red); flex-shrink: 0; }

.mk-report-detail {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  background: rgba(var(--surface-rgb),0.05);
  border: 1px solid rgba(var(--surface-rgb),0.1);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-family: var(--font-thai);
  font-size: 13px;
}
.mk-report-detail::placeholder { color: var(--text-secondary); }
.mk-report-detail:focus { outline: none; border-color: rgba(var(--accent-gold-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--accent-gold-rgb),0.12); }

.mk-report-note { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }

.mk-report-submit { background: var(--like-red); color: var(--white); padding: 13px; font-size: 13px; }
:root[data-theme="light"] .mk-report-submit { background: var(--status-like); }
@media (hover: hover) { .mk-report-submit:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(var(--like-red-rgb), 0.3); } }

.mk-report-success {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--success-text);
}

@media (max-width: 768px) {
  .mk-page { padding: 16px 16px 20px; }
  .mk-filter-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mk-select-wrap { min-width: 0; flex: none; }
}