/* Commander contracts: faction accents stay local to these Codex cards. */
.codex-tradefront .codex-tradefront-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px;
}
.codex-tradefront .codex-tradefront-faction {
  --front-rgb: 128, 190, 223; --front-accent: #80bedf;
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 13px; min-width: 0; padding: 16px;
  border: 1px solid rgba(var(--front-rgb), .32); border-radius: 14px;
  background: radial-gradient(ellipse at top left, rgba(var(--front-rgb), .14), transparent 72%), linear-gradient(145deg, #101c32, #080f23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 0 18px rgba(var(--front-rgb), .04);
  overflow-wrap: anywhere;
}
.codex-tradefront-faction[data-faction="wayne_frontier_guild"] { --front-rgb: 223, 180, 120; --front-accent: #dfb478; }
.codex-tradefront-faction[data-faction="ember_caravan"] { --front-rgb: 220, 142, 119; --front-accent: #dc8e77; }
.codex-tradefront-faction[data-faction="nyx_quantum_collective"] { --front-rgb: 182, 157, 222; --front-accent: #b69dde; }
.codex-tradefront .codex-tradefront-heading {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0;
}
.codex-tradefront .codex-tradefront-portrait {
  display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden;
  border: 1px solid rgba(var(--front-rgb), .34); border-radius: 12px; background: rgba(4, 10, 25, .7);
  color: var(--front-accent); box-shadow: 0 0 14px rgba(var(--front-rgb), .1); font-size: 25px; font-weight: 800;
}
.codex-tradefront .codex-tradefront-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.codex-tradefront .codex-tradefront-commander { min-width: 0; }
.codex-tradefront .codex-tradefront-commander > span { display: block; color: var(--front-accent); font-size: 11px; line-height: 1.45; }
.codex-tradefront .codex-tradefront-commander h3 {
  margin: 4px 0 0; color: #edf3fc; font-size: 17px; line-height: 1.3; font-weight: 800;
  text-shadow: 0 0 12px rgba(var(--front-rgb), .22);
}
.codex-tradefront .codex-tradefront-progress { display: grid; gap: 7px; min-width: 0; }
.codex-tradefront .codex-tradefront-progress-label {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px;
  color: #a9bbd2; font-size: 11px; line-height: 1.4;
}
.codex-tradefront .codex-tradefront-progress-label strong {
  color: var(--front-accent); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.codex-tradefront .codex-tradefront-progress-label small { color: #a9bbd2; font-size: 10px; font-weight: 500; }
.codex-tradefront .codex-tradefront-progress-track {
  display: block; height: 7px; overflow: hidden; border: 1px solid rgba(var(--front-rgb), .2);
  border-radius: 999px; background: #040c1a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}
.codex-tradefront .codex-tradefront-progress-track > i {
  display: block; width: var(--front-progress); max-width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--front-rgb), .5), var(--front-accent)); box-shadow: 0 0 8px rgba(var(--front-rgb), .32);
}
.codex-tradefront .codex-tradefront-slots { display: grid; align-content: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.codex-tradefront .codex-tradefront-slots > li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 9px 10px;
  border: 1px solid rgba(var(--front-rgb), .11); border-radius: 9px; background: rgba(4, 11, 26, .38);
}
.codex-tradefront .codex-tradefront-slot-number {
  display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(var(--front-rgb), .28);
  border-radius: 50%; color: #a9bbd2; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.codex-tradefront .codex-tradefront-slot-number svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
}
.codex-tradefront .codex-tradefront-slot-copy { min-width: 0; }
.codex-tradefront .codex-tradefront-slots strong { display: block; color: #d8e3f3; font-size: 12px; font-weight: 650; line-height: 1.4; }
.codex-tradefront .codex-tradefront-slot-status {
  display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #a0b1c9; font-size: 10px; line-height: 1.4;
}
.codex-tradefront .codex-tradefront-slot-status > i { width: 6px; height: 6px; flex: none; border: 1px solid currentColor; border-radius: 50%; }
.codex-tradefront .codex-tradefront-slots > li[data-status="completed"] { border-color: rgba(var(--front-rgb), .3); background: rgba(var(--front-rgb), .075); }
.codex-tradefront [data-status="completed"] .codex-tradefront-slot-number { color: var(--front-accent); border-color: rgba(var(--front-rgb), .5); background: rgba(var(--front-rgb), .12); }
.codex-tradefront [data-status="completed"] .codex-tradefront-slot-status { color: var(--front-accent); font-weight: 650; }
.codex-tradefront [data-status="completed"] .codex-tradefront-slot-status > i { background: currentColor; }
.codex-tradefront [data-status="active"] .codex-tradefront-slot-status { color: #dfb478; }
.codex-tradefront [data-status="in_operation"] .codex-tradefront-slot-status { color: #9dceec; }
.codex-tradefront [data-status="in_operation"] .codex-tradefront-slot-status > i { background: currentColor; }
.codex-tradefront [data-status="expired"] .codex-tradefront-slot-status { color: #d8a2ad; }
.codex-tradefront .codex-tradefront-faction > .codex-tradefront-post-link {
  display: flex; align-items: center; justify-content: center; align-self: end; min-height: 44px; margin: 0; padding: 8px 12px;
  border: 1px solid rgba(var(--front-rgb), .25); border-radius: 9px; background: rgba(var(--front-rgb), .055);
  color: var(--front-accent); font-size: 11px; line-height: 1.4; font-weight: 750; text-align: center; text-decoration: none;
}
.codex-tradefront .codex-tradefront-post-link:hover { background: rgba(var(--front-rgb), .12); border-color: rgba(var(--front-rgb), .45); }
.codex-tradefront .codex-tradefront-post-link:focus-visible { outline: 2px solid var(--front-accent); outline-offset: 3px; }
@media (max-width: 680px) {
  .codex-tradefront .codex-tradefront-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .codex-tradefront .codex-tradefront-faction { gap: 11px; padding: 13px; }
  .codex-tradefront .codex-tradefront-heading { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .codex-tradefront .codex-tradefront-portrait { width: 56px; height: 56px; border-radius: 10px; }
  .codex-tradefront .codex-tradefront-commander h3 { font-size: 16px; }
  .codex-tradefront .codex-tradefront-slots > li { padding: 8px 9px; }
}
@media (max-width: 380px) {
  .codex-tradefront .codex-tradefront-faction { padding: 11px; gap: 10px; }
  .codex-tradefront .codex-tradefront-heading { grid-template-columns: 50px minmax(0, 1fr); gap: 9px; }
  .codex-tradefront .codex-tradefront-portrait { width: 50px; height: 50px; }
  .codex-tradefront .codex-tradefront-commander > span { font-size: 10px; }
  .codex-tradefront .codex-tradefront-commander h3 { font-size: 15px; }
}