/* ============================================================
   NEXUS BUILD RECOMMENDER — styles UNIQUEMENT nouveaux.
   Les composants communs (.slot, .champ-card, .grid,
   .role-pill, .search-box) viennent de draft-analyzer.css.
   ============================================================ */

/* ─── Layout ──────────────────────────────────────────────── */
.nx-br-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-6);
  align-items: start;
  container-type: inline-size;
}
@container (max-width: 640px) {
  .nx-br-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nx-br-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Left panel ──────────────────────────────────────────── */
.nx-br-left {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.nx-br-section-label {
  font-family: var(--ff-ui);
  font-size: var(--fz-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* hero slot — ally accent (override auto neutral) */
.nx-br-hero-slot {
  --accent: var(--c-ally);
  --accent-glow: var(--c-ally-glow);
  cursor: default;
}

/* enemy slots column — red accent on all .slot children */
.nx-br-enemy-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.nx-br-enemy-col .slot {
  --accent: var(--c-enemy);
  --accent-glow: var(--c-enemy-glow);
  min-height: 52px;
}

/* mode pills row */
.nx-br-pills {
  display: flex;
  gap: var(--s-2);
}
.nx-br-pills .role-pill { flex: 1; justify-content: center; }

/* lane pills — 5 pills, compact */
.nx-br-lanes { flex-wrap: wrap; }
.nx-br-lanes .role-pill {
  flex: 1 0 auto;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  font-size: var(--fz-2xs);
  justify-content: center;
}
.nx-br-profile {
  display: grid;
  gap: var(--s-2);
  margin-top: 12px;
}
.nx-br-profile[hidden] { display: none; }
.nx-br-profile__select {
  width: 100%;
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  font-family: var(--ff-ui);
  font-size: var(--fz-xs);
}
.nx-br-profile__select:focus {
  outline: none;
  border-color: var(--border-subtle);
}
/* enemy mode pill when active → red */
[data-build-board][data-build-mode="enemy"] [data-build-mode="enemy"][aria-pressed="true"] {
  color: var(--c-enemy);
  border-color: var(--border-hot);
  background: rgba(255, 90, 90, 0.08);
}

/* search-box width override (default has max-width:240px) */
.nx-br-search { max-width: 100%; margin-left: 0; }

/* grid height limit + scrollable */
.nx-br-grid {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-ink-5) transparent;
  /* override draft default column width for compact layout */
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: var(--s-2);
}
.nx-br-grid .champ-card {
  min-width: 0;
}
.nx-br-grid .champ-card__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}
.nx-br-grid .champ-card__portrait img,
.nx-br-hero-slot .slot__portrait img,
.nx-br-enemy-col .slot__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* reset button */
.nx-br-reset {
  align-self: flex-start;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-faint);
  background: none;
  color: var(--text-muted);
  font-family: var(--ff-ui);
  font-size: var(--fz-xs);
  cursor: pointer;
  transition: color var(--d-fast), border-color var(--d-fast);
}
.nx-br-reset:hover { color: var(--text-secondary); border-color: var(--border-subtle); }

/* ─── Right panel / result ────────────────────────────────── */
.nx-br-right { position: sticky; top: 80px; }

.nx-br-result {
  background: var(--bg-card);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Empty state */
.nx-br-result[data-state="empty"] { padding: 48px 24px; text-align: center; }
.nx-br-empty__icon { font-size: 2rem; opacity: .25; margin-bottom: var(--s-5); }
.nx-br-empty__title { font-family: var(--ff-ui); font-size: var(--fz-lg); color: var(--text-secondary); margin-bottom: var(--s-3); }
.nx-br-empty__sub   { font-size: var(--fz-sm); color: var(--text-muted); }

/* Header */
.nx-br-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--border-faint);
}
.nx-br-summary {
  flex: 1;
  margin: 0;
  font-size: var(--fz-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* badge gold variant (draft already defines .badge — add tone) */
.badge[data-tone="gold"] {
  color: var(--c-gold-1);
  border-color: var(--c-gold-3);
  background: rgba(200, 161, 74, .08);
}
.badge[data-tone="steel"] {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: rgba(142, 161, 190, .1);
}

/* Sections */
.nx-br-section {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border-faint);
}
.nx-br-section:last-child { border-bottom: none; }
.nx-br-section-title {
  font-family: var(--ff-ui);
  font-size: var(--fz-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-4);
}

/* ─── Threat chips ────────────────────────────────────────── */
.nx-br-threats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.nx-br-threat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.02);
  font-family: var(--ff-ui);
  font-size: var(--fz-2xs);
}
.nx-br-threat[data-level="2"] { border-color: rgba(255,181,71,.35); background: rgba(255,181,71,.06); }
.nx-br-threat[data-level="3"] { border-color: rgba(255,90,90,.4);  background: rgba(255,90,90,.07); }
.nx-br-threat__label { color: var(--text-secondary); }
.nx-br-threat[data-level="3"] .nx-br-threat__label { color: var(--c-rose-1); }
.nx-br-threat__dots  { color: var(--c-gold-2); letter-spacing: .05em; }
.nx-br-threat[data-level="3"] .nx-br-threat__dots { color: var(--c-rose-1); }

.nx-br-decision__headline {
  margin: 0 0 var(--s-3);
  color: var(--text-secondary);
  font-size: var(--fz-sm);
  line-height: 1.45;
}
.nx-br-decision__list {
  display: grid;
  gap: var(--s-2);
}
.nx-br-decision__item {
  display: grid;
  grid-template-columns: minmax(96px, .42fr) 1fr;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-faint);
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.014);
}
.nx-br-decision__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--ff-ui);
  font-size: var(--fz-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-br-decision__text {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--fz-xs);
  line-height: 1.35;
}

/* ─── Item cards ──────────────────────────────────────────── */
.nx-br-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.nx-br-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.015);
  transition: border-color var(--d-fast);
}
.nx-br-item:hover { border-color: var(--border-subtle); }
.nx-br-item__num {
  width: 16px; flex-shrink: 0;
  font-family: var(--ff-num);
  font-size: var(--fz-2xs);
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 3px;
  text-align: right;
}
.nx-br-item__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-xs);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--c-ink-3);
  display: grid; place-items: center;
}
.nx-br-item__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-br-item__body  { flex: 1; min-width: 0; }
.nx-br-item__name  {
  display: block;
  font-family: var(--ff-ui); font-size: var(--fz-md);
  font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.nx-br-item__name:hover { color: var(--c-gold-1); }
.nx-br-item__score { font-size: var(--fz-2xs); color: var(--c-gold-2); margin-top: 2px; }
.nx-br-item__expl  { font-size: var(--fz-xs); color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }

.nx-br-alts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.nx-br-alt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.018);
}
.nx-br-alt[data-alt-kind="replacement"] {
  border-color: rgba(200, 161, 74, .24);
  background: rgba(200, 161, 74, .045);
}
.nx-br-alt__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-ink-3);
}
.nx-br-alt__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-br-alt__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nx-br-alt__top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.nx-br-alt__name {
  font-family: var(--ff-ui);
  font-size: var(--fz-2xs);
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.nx-br-alt__name:hover { color: var(--c-gold-1); }
.nx-br-alt__kind {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-faint);
  color: var(--text-tertiary);
  font-family: var(--ff-ui);
  font-size: var(--fz-3xs);
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}
.nx-br-alt[data-alt-kind="replacement"] .nx-br-alt__kind {
  color: var(--c-gold-2);
  border-color: rgba(200, 161, 74, .32);
}
.nx-br-alt__reason {
  font-size: var(--fz-3xs);
  color: var(--c-gold-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-br-alt__expl {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 2px;
  overflow: hidden;
  font-size: var(--fz-3xs);
  line-height: 1.35;
  color: var(--text-muted);
}

/* ─── Boots row ───────────────────────────────────────────── */
.nx-br-boots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.nx-br-boots-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.015);
}
.nx-br-boots-card__label {
  font-family: var(--ff-ui);
  font-size: var(--fz-3xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.nx-br-boots-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--c-ink-3);
  display: grid; place-items: center;
}
.nx-br-boots-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-br-boots-card__name {
  font-family: var(--ff-ui);
  font-size: var(--fz-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.nx-br-boots-card__name:hover { color: var(--c-gold-1); }
.nx-br-boots-card__expl { font-size: var(--fz-xs); color: var(--text-secondary); line-height: 1.4; }

@container (max-width: 640px) {
  .nx-br-right { position: static; }
  .nx-br-header { flex-direction: column; gap: var(--s-3); }
  .nx-br-boots { grid-template-columns: 1fr; }
  .nx-br-alts { grid-template-columns: 1fr; }
  .nx-br-decision__item { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 760px) {
  .nx-br-right { position: static; }
  .nx-br-header { flex-direction: column; gap: var(--s-3); }
  .nx-br-boots { grid-template-columns: 1fr; }
  .nx-br-alts { grid-template-columns: 1fr; }
}