/* ===========================================================================
   Marketplace layer (Boards / Firms / Pin / Post a Job)
   ---------------------------------------------------------------------------
   Deliberately its own visual system, adopted verbatim from the
   TradeMesh Package .dc.html references (OKLCH tokens, Manrope/Sora,
   bright near-white surface) rather than the cream/orange "old build"
   tokens used everywhere else in this app. Scoped under body.mkt so it
   never leaks into or collides with base.css/app-shell.css. Still loads
   base.css first on every marketplace page for the reset + toast + sr-only
   utilities only.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@700;800&display=swap');

body.mkt {
  --mkt-bg: oklch(0.99 0.002 260);
  --mkt-surface: #fff;
  --mkt-chip: oklch(0.94 0.006 260);
  --mkt-border: oklch(0.92 0.006 260);
  --mkt-border-2: oklch(0.87 0.006 260);
  --mkt-text: oklch(0.18 0.01 260);
  --mkt-text-2: oklch(0.35 0.01 260);
  --mkt-text-3: oklch(0.45 0.01 260);
  --mkt-accent: #c2432a;
  --mkt-accent-tint: color-mix(in oklch, var(--mkt-accent) 14%, white);
  --mkt-focus: oklch(0.68 0.15 55 / 0.4);
  --mkt-avatar-bg: oklch(0.3 0.03 55);
  --mkt-avatar-text: oklch(0.9 0.1 55);
  --mkt-dark: oklch(0.18 0.01 260);

  margin: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--mkt-bg);
  color: var(--mkt-text);
  font-family: 'Manrope', system-ui, sans-serif;
}

body.mkt * { box-sizing: border-box; }
body.mkt a { color: inherit; text-decoration: none; }
body.mkt button { font: inherit; appearance: none; -webkit-appearance: none; }
body.mkt input:focus, body.mkt textarea:focus { outline: 2px solid var(--mkt-focus); }
body.mkt ::-webkit-scrollbar { height: 8px; width: 10px; }
body.mkt ::-webkit-scrollbar-thumb { background: oklch(0.85 0.005 260); border-radius: 8px; }

/* toast override so the shared base.css toast component fits this bright theme */
body.mkt .toast {
  background: var(--mkt-dark);
  color: #fff;
  border: none;
}

/* ---------------------------------------------------------------- topbar */
.mkt-shell { display: flex; min-height: 100vh; width: 100%; }

.mkt-topbar {
  position: sticky; top: 0; z-index: 50;
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: color-mix(in oklch, var(--mkt-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mkt-border);
}

.mkt-brand {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 8px; border-radius: 50%; width: 40px; height: 40px; justify-content: center;
  transition: background .15s;
}
.mkt-brand:hover { background: oklch(0.94 0.006 260); }
.mkt-brand-mark { width: 26px; height: 26px; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.mkt-brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.mkt-wordmark { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800; flex-shrink: 0; white-space: nowrap; }
.mkt-wordmark span { color: var(--mkt-accent); }

.mkt-tabs { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex-shrink: 0; }
.mkt-tab {
  padding: 10px 16px; border-radius: 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; color: var(--mkt-text-2); white-space: nowrap;
  border: none; background: transparent; display: inline-block;
}
.mkt-tab.active { background: var(--mkt-dark); color: #fff; }

.mkt-search { flex: 1; max-width: 640px; margin: 0 6px; display: flex; align-items: center; background: var(--mkt-chip); border-radius: 24px; padding: 0 18px; min-width: 0; }
.mkt-search input { flex: 1; min-width: 0; background: transparent; border: none; padding: 12px 0; font-size: 14px; color: inherit; font-family: inherit; }
.mkt-search-icon { font-size: 13px; opacity: .55; margin-right: 8px; flex-shrink: 0; }

.mkt-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mkt-bell {
  width: 38px; height: 38px; border-radius: 50%; background: var(--mkt-chip);
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; border: none;
}
.mkt-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--mkt-avatar-bg); color: var(--mkt-avatar-text);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.mkt-avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.mkt-avatar.xs { width: 26px; height: 26px; font-size: 10px; }

/* ---------------------------------------------------------------- icon rail (pin.html / post-job.html) */
.mkt-rail {
  width: 74px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 0; position: sticky; top: 0; height: 100vh;
}
.mkt-rail-brand { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.mkt-rail-brand .mkt-brand-mark { width: 26px; height: 26px; }
.mkt-rail-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: transparent; color: inherit;
}
.mkt-rail-icon.active { background: var(--mkt-accent-tint); color: var(--mkt-accent); }
.mkt-rail-settings {
  margin-top: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--mkt-avatar-bg); color: var(--mkt-avatar-text);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.mkt-rail-main { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- chips */
.mkt-chip-row { display: flex; gap: 10px; padding: 16px 24px; overflow-x: auto; }
.mkt-chip {
  flex-shrink: 0; padding: 9px 16px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--mkt-text-2); border: 1px solid var(--mkt-border-2); white-space: nowrap;
}
.mkt-chip.active { background: var(--mkt-dark); color: #fff; border-color: var(--mkt-dark); }
.mkt-chip.tag.active { background: var(--mkt-accent-tint); color: var(--mkt-accent); border-color: var(--mkt-accent); }

/* ---------------------------------------------------------------- masonry */
.mkt-masonry { column-width: 220px; column-gap: 16px; padding: 4px 24px 60px; }
.mkt-masonry-card {
  display: block; break-inside: avoid; margin-bottom: 16px; border-radius: 18px; overflow: hidden;
  position: relative; background: var(--mkt-chip);
}

/* ---------------------------------------------------------------- generic empty state (mkt palette) */
.mkt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 70px 24px; margin: 0 24px 60px; background: var(--mkt-surface);
  border: 1px dashed var(--mkt-border-2); border-radius: 22px;
}
.mkt-empty-icon { font-size: 30px; }
.mkt-empty-title { font-size: 15px; font-weight: 800; }
.mkt-empty-sub { font-size: 13px; color: var(--mkt-text-3); max-width: 360px; line-height: 1.55; }
.mkt-empty-sub a { color: var(--mkt-accent); font-weight: 700; }

.mkt-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  background: var(--mkt-accent); color: #fff; font-size: 13px; font-weight: 800;
  padding: 10px 20px; border-radius: 22px; cursor: pointer; border: none; white-space: nowrap;
}
.mkt-cta.ghost { background: #fff; color: var(--mkt-text); border: 1px solid var(--mkt-border-2); }

/* ---------------------------------------------------------------- forms (post-job.html) */
.mkt-field-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--mkt-text-3); margin-bottom: 7px; }
.mkt-field {
  width: 100%; background: var(--mkt-chip); border: none; border-radius: 12px;
  padding: 13px 16px; font-size: 14px; color: inherit; font-family: inherit;
}
textarea.mkt-field { resize: vertical; line-height: 1.55; }

/* ---------------------------------------------------------------- firm-row carousel (firms.html) */
.mkt-firm-row { margin-bottom: 30px; }
.mkt-firm-hdr { display: flex; align-items: center; gap: 12px; padding: 0 24px; margin-bottom: 12px; }
.mkt-firm-logo { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.mkt-firm-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-firm-tagline { font-size: 12px; color: var(--mkt-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-firm-view { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--mkt-accent); white-space: nowrap; flex-shrink: 0; }
.mkt-firm-stage { position: relative; height: 300px; margin: 0 24px; border-radius: 26px; overflow: hidden; }
.mkt-firm-slot { position: absolute; left: 50%; top: 50%; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: transform 1s ease, opacity 1s ease; }
.mkt-firm-slot.logo { color: #fff; font-weight: 800; font-size: 28px; letter-spacing: 0.02em; }
.mkt-firm-slot.photo { background: var(--mkt-chip); color: var(--mkt-text-3); font-size: 12px; text-align: center; padding: 10px; }
.mkt-firm-nav { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.mkt-firm-nav-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mkt-border-2); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; background: #fff; }

/* ---------------------------------------------------------------- listing detail (pin.html) */
.mkt-pin-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding: 0 24px 24px; }
.mkt-pin-panel { flex: 0 0 880px; width: 880px; max-width: 100%; background: var(--mkt-surface); border: 1px solid var(--mkt-border); border-radius: 24px; overflow: hidden; display: flex; }
.mkt-pin-hero { position: relative; flex: 0 0 420px; width: 420px; background: var(--mkt-chip); min-height: 480px; display: flex; align-items: center; justify-content: center; color: var(--mkt-text-3); font-size: 13px; text-align: center; padding: 20px; }
.mkt-pin-body { flex: 1; min-width: 0; padding: 18px 20px 20px; display: flex; flex-direction: column; }
.mkt-pin-side { flex: 1; min-width: 260px; }

@media (max-width: 900px) {
  .mkt-tab { padding: 8px 12px; font-size: 13px; }
  .mkt-wordmark { display: none; }
  .mkt-pin-panel { flex-direction: column; }
  .mkt-pin-hero { width: 100%; }
}