/* ==========================================================================
 * Marketplace tab (Offtaker Exchange v0). Day-mode base + Sky glass safe-zone.
 * Scoped to #panelMarketplace / .mk-*. Honors the AO system: octarine = the
 * machine-computed signature (vacancy is computed), amber = soft/review flags,
 * green/red reserved for LIVE state. Loaded after mobile.css so it wins order;
 * the html.sky block below mirrors the Analysis "safe zone" (one calm content
 * sheet + near-solid cards) so the panel reads clearly over the alpine photo.
 * ==========================================================================*/

/* Per-sub panes: each Marketplace sub-tab renders into its OWN persistent pane
   so a late fetch can never paint over the view you switched to, and switching
   back is instant. [hidden] must WIN over any display rule in the cascade. */
#panelMarketplace .mk-pane[hidden]{ display:none !important; }

#panelMarketplace .mk-wrap{ max-width:1080px; margin:0 auto; padding:8px 0 40px; }

/* sub-nav bar reuses the app's .ao-subnav / .vs-seg pill (see index.html). */
#panelMarketplace .mk-subnav-wrap[hidden]{ display:none; }

.mk-sec{ margin:0 0 26px; }
.mk-sec-head{ display:flex; align-items:baseline; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.mk-sec-head h3{ margin:0; font-size:16px; font-weight:750; letter-spacing:-.01em; color:var(--ink); }
.mk-sec-sub{ font-size:12.5px; color:var(--faint); }

/* ── vacancy hero ─────────────────────────────────────────────────────────── */
.mk-hero{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 22px; margin:0 0 16px;
  border:1px solid var(--line); border-radius:18px; background:var(--card);
  box-shadow:var(--dash-shadow, 0 1px 3px rgba(15,23,42,.07));
  border-left:3px solid var(--ao-oct, #7c3aed);
}
.mk-hero-num{ font-size:34px; font-weight:820; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.mk-hero-lbl{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.mk-hero-exp{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; font-size:12.5px; font-weight:650;
  color:var(--gold2, #b45309); background:#fffbeb; border:1px solid #fde9c8;
}

/* ── vacancy cards ────────────────────────────────────────────────────────── */
.mk-vac-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:14px; }
.mk-vac-card{
  padding:16px 16px 14px; border:1px solid var(--line); border-radius:16px; background:var(--card);
  box-shadow:var(--dash-shadow, 0 1px 3px rgba(15,23,42,.07));
  border-left:3px solid var(--ao-oct, #7c3aed);
  display:flex; flex-direction:column; gap:8px; transition:transform .16s ease, box-shadow .16s ease;
}
.mk-vac-card:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -14px rgba(15,23,42,.22); }
.mk-vac-card--exp{ border-left-color:var(--gold, #d97706); }
.mk-vac-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.mk-vac-name{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.25; }
.mk-vac-prov{ display:inline-block; margin-left:7px; font-size:10px; font-weight:750; letter-spacing:.06em; color:var(--faint); vertical-align:middle; }
.mk-vac-num{ display:flex; align-items:baseline; gap:8px; }
.mk-vac-pct{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--ao-oct, #7c3aed); font-variant-numeric:tabular-nums; }
.mk-vac-lbl{ font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.mk-vac-sub{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mk-vac-note{ font-size:11.5px; color:var(--faint); line-height:1.4; }

.mk-expiry, .mk-hero-exp .mk-expiry-dot{ }
.mk-expiry{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:650; color:var(--gold2, #b45309); }
.mk-expiry-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold, #d97706); flex:0 0 auto; box-shadow:0 0 0 3px rgba(217,119,6,.15); }

.mk-conf{ font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.mk-conf-high{ color:#0369a1; background:rgba(37,99,235,.10); }
.mk-conf-med{ color:var(--gold2, #b45309); background:#fffbeb; }
.mk-conf-none{ color:var(--faint); background:var(--day-chip, #eef2f7); }

.mk-find{
  align-self:flex-start; margin-top:2px; padding:6px 12px; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:650; color:#fff; border:0;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
}
.mk-find:hover{ filter:brightness(1.04); }

/* ── waitlist / intake ────────────────────────────────────────────────────── */
.mk-intake{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px; box-shadow:var(--dash-shadow, 0 1px 3px rgba(15,23,42,.07)); }
.mk-intake-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.mk-in{
  width:100%; box-sizing:border-box; padding:9px 11px; font-size:13px; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; background:var(--card2, #f8fafc);
}
.mk-in:focus{ outline:none; border-color:var(--good, #2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.mk-in-notes{ margin-top:10px; resize:vertical; font-family:inherit; }
.mk-intake-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.mk-intake-hint{ font-size:12px; color:var(--faint); }
.mk-submit{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:700; color:#fff; border:0; text-decoration:none;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
}
.mk-submit:hover{ filter:brightness(1.04); }
.mk-submit:disabled{ opacity:.6; cursor:default; }

.mk-leads{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.mk-lead{
  display:flex; align-items:center; gap:12px; padding:9px 13px;
  border:1px solid var(--line); border-radius:11px; background:var(--card);
}
.mk-lead-who{ font-weight:650; font-size:13px; color:var(--ink); }
.mk-lead-meta{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.mk-lead-status{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }

/* ── brokered board placeholder ───────────────────────────────────────────── */
.mk-board{
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  border:1px dashed var(--line); border-radius:16px; background:var(--card2, #f8fafc);
}
.mk-board-ic{ font-size:22px; opacity:.6; flex:0 0 auto; }
.mk-board-copy{ font-size:13px; color:var(--muted); line-height:1.45; }
.mk-board-copy b{ color:var(--ink); }

/* ── empty / signed-out states ────────────────────────────────────────────── */
.mk-empty{ padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--muted); font-size:13.5px; text-align:center; }
.mk-empty-sm{ padding:16px; margin-top:12px; font-size:13px; }
.mk-empty-signedout{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 26px; }
.mk-empty-signedout b{ font-size:17px; color:var(--ink); }
.mk-empty-signedout span{ max-width:520px; color:var(--muted); line-height:1.5; }

/* ── vacancy chip on the Invoices group headers (integrated in place) ──────── */
/* Lives in the Invoices tab's .rb-grp-head, not #panelMarketplace — octarine =
 * "the system computed this". Amber variant when credits are nearing expiry. */
.rb-grp-vac{
  display:inline-flex; align-items:center; gap:5px; margin-left:8px;
  padding:3px 9px; border-radius:999px; text-decoration:none; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.01em;
  color:var(--ao-oct, #7c3aed); background:var(--ao-oct-soft, rgba(124,58,237,.09));
  border:1px solid var(--ao-oct-line, rgba(124,58,237,.30));
  transition:filter .14s ease, transform .14s ease;
}
.rb-grp-vac:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.rb-grp-vac--reg{ color:var(--faint); background:var(--day-chip, #eef2f7); border-color:var(--line); font-weight:650; }
.rb-grp-vac--exp{ color:var(--gold2, #b45309); background:#fffbeb; border-color:#fde9c8; }
html.sky .rb-grp-vac{ backdrop-filter:blur(6px); }

/* ===================== SKY THEME — safe-zone (glass) ======================= */
/* One calm content sheet wrapping the whole tab + near-solid cards on top, per
 * the Analysis reference (ao-sky-redesign-brief STATUS 3 / glass-opacity rule).
 *
 * THE SHEET LIVES ON THE PANE, NOT ON ANY ONE SUB'S WRAPPER (Ford 2026-07-19:
 * "this array market page needs a background frosted glass so things don't look
 * like they are floating"). It used to be pinned to .mk-wrap — a class only the
 * Credit Exchange sub renders — so Array Market (.aopx-wrap) and the REC desk
 * got NO safe zone and sat naked on the mountain photo, violating the
 * foundation's own rule ("nothing floats naked on the photo", DESIGN.md).
 * .mk-pane is the container EVERY sub mounts into by construction, so putting
 * the sheet here means a future 4th sub is inside the safe zone for free. */
html.sky #panelMarketplace .mk-pane{
  background:var(--sky-glass-content, rgba(255,255,255,.56));
  -webkit-backdrop-filter:var(--sky-sheet-blur, blur(18px) saturate(1.7));
  backdrop-filter:var(--sky-sheet-blur, blur(18px) saturate(1.7));
  border:1px solid var(--sky-glass-edge, rgba(255,255,255,.55));
  border-radius:var(--sky-r-sheet, 32px);
  box-shadow:var(--sky-shadow-sheet, 0 18px 50px -12px rgba(20,60,120,.16));
  padding:22px 22px 40px;
  margin:8px auto 0;
  max-width:1120px;
  box-sizing:border-box;
}
/* .mk-wrap WAS the sheet; now it's a pass-through inside the pane. Stacking two
 * blurred glass planes reads as mush and doubles the paint cost. */
html.sky #panelMarketplace .mk-wrap{
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
  margin-top:0;
  max-width:100%;
}
html.sky #panelMarketplace .mk-hero,
html.sky #panelMarketplace .mk-vac-card,
html.sky #panelMarketplace .mk-intake,
html.sky #panelMarketplace .mk-lead,
html.sky #panelMarketplace .mk-empty{
  background:var(--sky-glass-solid, rgba(255,255,255,.86)) !important;
  border-radius:var(--sky-r-card, 22px) !important;
  box-shadow:var(--sky-shadow-card, 0 8px 30px rgba(20,60,120,.08)) !important;
}
html.sky #panelMarketplace .mk-board{
  background:rgba(255,255,255,.55);
  border-radius:var(--sky-r-card, 22px);
}
html.sky #panelMarketplace .mk-in{ background:rgba(255,255,255,.7); }

/* ── suggestions + lead actions (desk expand) ─────────────────────────────── */
.mk-sugg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.mk-sugg{
  border:1px solid var(--line,#e2e8f0); border-radius:14px; padding:12px 14px;
  background:var(--card,#fff);
}
.mk-sugg-head{ font-size:14px; margin-bottom:4px; }
.mk-sugg-meta{ font-size:12.5px; color:var(--muted,#5a6572); margin-bottom:6px; }
.mk-sugg-why{ margin:0 0 10px 16px; padding:0; font-size:12px; color:var(--muted,#5a6572); }
.mk-sugg-go{ width:100%; }
.mk-expiry-inline{ color:#b45309; font-weight:700; }
.mk-lead{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.mk-lead-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mk-lead-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mk-status-sel{
  font:inherit; font-size:12px; border:1px solid var(--line,#cbd5e1); border-radius:8px;
  padding:5px 8px; background:var(--card,#fff); color:var(--ink,#0f172a);
}
.mk-lead-draft, .mk-lead-link{
  font:inherit; font-size:12.5px; font-weight:650; border-radius:9px; padding:6px 10px;
  border:1px solid var(--line,#cbd5e1); background:var(--card,#fff); color:var(--ink,#0f172a);
  cursor:pointer; text-decoration:none;
}
.mk-lead-draft{ background:var(--ao-oct,#7c3aed); border-color:var(--ao-oct,#7c3aed); color:#fff; }
.mk-lead-link{ color:var(--ao-oct,#7c3aed); font-weight:700; }

/* ── REC desk ─────────────────────────────────────────────────────────────── */
.mk-rec-hero{ align-items:flex-start; gap:18px; flex-wrap:wrap; }
.mk-rec-hero-side{ font-size:13px; color:var(--muted,#5a6572); line-height:1.55; min-width:140px; }
.mk-rec-hero-side b{ color:var(--ink,#0f172a); }
.mk-rec-legal{ font-size:12.5px; color:var(--muted,#5a6572); margin:10px 0 0; max-width:72ch; }
.mk-rec-legal-soft{ opacity:.9; }
.mk-rec-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.mk-rec-card{
  border:1px solid var(--line,#e2e8f0); border-radius:14px; padding:14px 16px;
  background:var(--card,#fff);
}
.mk-rec-card-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.mk-rec-name{ font-weight:800; font-size:15.5px; }
.mk-rec-path{ font-size:12.5px; color:var(--muted,#5a6572); margin:6px 0 12px; }
.mk-rec-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; align-items:end;
}
.mk-rec-form label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#5a6572); }
.mk-rec-note-lab{ grid-column:1 / -1; }
.mk-rec-form .mk-submit{ justify-self:start; }
.mk-rec-meta{ font-size:12px; color:var(--muted,#5a6572); margin:10px 0 6px; }
.mk-rec-checks{ list-style:none; margin:0; padding:0; font-size:12.5px; }
.mk-rec-checks li{ padding:3px 0; color:var(--muted,#5a6572); }
.mk-rec-checks li.ok{ color:var(--ink,#0f172a); }
.mk-rec-checks li.miss .mk-rec-ck{ color:#b45309; }
.mk-rec-ck{ display:inline-block; width:1.1em; font-weight:800; }
.mk-rec-ckd{ color:var(--muted,#5a6572); font-weight:400; }
.mk-rec-vint{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mk-rec-vq{
  min-width:88px; border:1px solid var(--line,#e2e8f0); border-radius:10px; padding:8px 10px;
  background:#f8fafc;
}
.mk-rec-vql{ display:block; font-size:10.5px; font-weight:700; color:var(--muted,#5a6572); text-transform:uppercase; }
.mk-rec-vqn{ display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; }
.mk-rec-vqs{ display:block; font-size:10.5px; color:var(--muted,#5a6572); }
.mk-rec-chip{ display:inline-block; border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:700; }
.mk-rec-chip-go{ background:rgba(22,163,74,.12); color:#0f9d58; }
.mk-rec-chip-warn{ background:#fffbeb; color:#92400e; }
.mk-rec-chip-info{ background:#eef2ff; color:#3730a3; }
.mk-rec-chip-muted{ background:#eef2f7; color:#64748b; }
.mk-rec-save-hint{ font-size:12px; color:#b45309; }
html.sky #panelMarketplace .mk-sugg,
html.sky #panelMarketplace .mk-rec-card{
  background:var(--sky-glass-solid, rgba(255,255,255,.86)) !important;
  border-radius:var(--sky-r-card, 22px) !important;
  box-shadow:var(--sky-shadow-card, 0 8px 30px rgba(20,60,120,.08)) !important;
}

/* ── phone ─────────────────────────────────────────────────────────────────── */
@media (max-width:600px){
  #panelMarketplace .mk-wrap{ padding-left:2px; padding-right:2px; }
  .mk-vac-grid{ grid-template-columns:1fr; }
  .mk-sugg-grid{ grid-template-columns:1fr; }
  .mk-hero{ padding:16px; }
  .mk-hero-num{ font-size:28px; }
  /* phone safe zone: tighten the SHEET (now the pane), not the pass-through wrap */
  html.sky #panelMarketplace .mk-pane{ padding:16px 12px 34px; border-radius:24px; }
}