/* ============================================================================
   ATLAS REDESIGN — Import Agent (Gold Peach Agent Market) modal  (v2.6)
   Branch: atlas-redesign-2026-06-29 · pairs with js/redesign/import-agent.js

   A WIDE variant of the shared .rd-modal chrome (defined in hire-agent.css,
   which loads first) presenting a 2-up grid of ready-made "Market" agents to
   import. Both themes via html[data-rtheme]. Tokens-only — ZERO raw hex.
   Reuses .rd-modal-scrim / .rd-modal / .rd-modal-head / .rd-modal-close /
   .rd-modal-foot / .rd-btn-ghost; adds only the market grid, the "included in
   your plan" banner, and the secondary header button.

   ISOLATED + additive — reverts by removing the one <link> + one <script> tag.
   The rename point: agents are *included in the plan*, not a paid per-seat
   add-on. That positioning is why "Hire" became "Create" (hire-agent.js) and
   why this Market exists — import as many as you need at no extra cost.
   ========================================================================== */

/* secondary "Import agent" button in the AI Workforce header (ghost) */
.rd-agents__import {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--r-radius-control);
  border: 1px solid var(--r-border); background: var(--r-surface); color: var(--r-body);
  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease);
}
.rd-agents__import i { font-size: 15px; }
.rd-agents__import:hover { background: var(--r-canvas-raised); border-color: var(--r-primary); }
.rd-agents__import:active { transform: translateY(.5px); }

/* wide modal variant (vs the 540px create modal) */
.rd-modal.rd-modal--wide { width: 680px; }

/* "included in your plan" banner — uses the positive/up chip tokens */
.rd-market-banner {
  display: flex; align-items: center; gap: 9px; margin: 14px 20px 0;
  padding: 10px 13px; border-radius: 11px;
  background: var(--r-chip-up-surface); color: var(--r-chip-up-ink);
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
.rd-market-banner i { font-size: 16px; flex: none; color: var(--r-good); }
.rd-market-banner strong { font-weight: 700; }

/* market grid (2-up, internally scrollable) */
.rd-market-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 16px 20px 20px; max-height: 58vh; overflow-y: auto;
}

/* ready-made agent card */
.rd-market-card {
  display: flex; flex-direction: column;
  background: var(--r-surface); border: 1px solid var(--r-hairline);
  border-radius: var(--r-radius-card); padding: 14px;
  transition: box-shadow var(--r-dur) var(--r-ease), transform var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease);
}
.rd-market-card:hover { box-shadow: var(--r-shadow-hover); transform: translateY(-2px); border-color: var(--r-border); }
@media (prefers-reduced-motion: reduce) { .rd-market-card { transition: none; } }
html[data-rmotion="reduced"] .rd-market-card:hover { transform: none; }

.rd-market-card__head { display: flex; align-items: flex-start; gap: 11px; }
.rd-market-card__ic {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--r-surface-2); border: 1px solid var(--r-hairline); color: var(--r-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.rd-market-card__id { flex: 1; min-width: 0; }
.rd-market-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-market-card__name { font-size: 13.5px; font-weight: 600; color: var(--r-ink); }
.rd-market-card__rating { flex: none; font-family: var(--r-font-mono); font-size: 12px; color: var(--r-amber); }
.rd-market-card__role { font-size: 12px; color: var(--r-faint); margin-top: 1px; }
.rd-market-card__desc { font-size: 12px; color: var(--r-body); margin-top: 10px; line-height: 1.45; flex: 1; }

.rd-market-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--r-hairline);
}
.rd-market-card__meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rd-market-card__included {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--r-chip-up-ink);
  background: var(--r-chip-up-surface); border-radius: var(--r-radius-pill); padding: 2px 8px;
}
.rd-market-card__included i { font-size: 11px; }
.rd-market-card__installs { font-family: var(--r-font-mono); font-size: 12px; color: var(--r-faint); white-space: nowrap; }
.rd-market-card__import {
  flex: none; height: 30px; padding: 0 13px; border-radius: var(--r-radius-badge); border: none;
  background: var(--r-primary); color: var(--r-primary-ink);
  font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter var(--r-dur) var(--r-ease);
}
.rd-market-card__import i { font-size: 13px; }
.rd-market-card__import:hover { filter: brightness(1.06); }
.rd-market-card__import:active { transform: translateY(.5px); }

/* split footer (note left, Done right) */
.rd-modal-foot--split { justify-content: space-between; }
.rd-modal-foot__note { font-size: 12px; color: var(--r-muted); }

/* responsive — single column on narrow viewports */
@media (max-width: 640px) {
  .rd-modal.rd-modal--wide { width: 100%; }
  .rd-market-grid { grid-template-columns: 1fr; }
}