/* Job card extras (src/ui/components/jobCard.js, WS-D): the chips row (one time chip, the 💵 deposit,
   the 🧤 small port), the ⚠️ late hint (calm amber icon, slate words: never red), the bank's 🏦 hint and
   a rival captain's face line. components.css keeps the card itself. */

.job-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: 2px;
  min-width: 0;
}

.job-card__chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.1em 0.6em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.job-card__chips .job-card__rush {
  margin-top: 0;
}

.job-card__due {
  background: var(--sea-100);
  color: var(--sea-800);
  white-space: nowrap;
}

.job-card__deposit {
  background: var(--gain-bg);
  color: var(--gain);
  white-space: nowrap;
}

.job-card__deposit.is-refused {
  background: var(--loss-bg);
  color: var(--loss);
}

.job-card__small {
  background: var(--sand-100);
  color: #6d5530;
}

/* The playtest's new regions: the border tax (a cost, slate on pale red) and the danger pay (amber words). */
.job-card__tax {
  background: #f6e7e4;
  color: #7a2e24;
}

.job-card__danger {
  background: #fff6df;
  color: #7a5410;
  white-space: normal;
}

.job-card__late,
.job-card__hint,
.job-card__rival {
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--loss);
  overflow-wrap: anywhere;
}

/* The ⚠️ is the calm amber part; the words stay slate. */
.job-card__late::first-letter {
  color: var(--accent-600);
}

.job-card__rival {
  align-self: flex-start;
  padding: 0.15em 0.7em;
  border-radius: var(--r-md);
  background: var(--sea-50);
  border: 2px dashed var(--sea-300);
  color: var(--sea-800);
}

.job-card.is-blocked .job-card__chip {
  filter: saturate(0.6);
}

/* A too-big job's way to the shipyard ("The shipyard can do that." 🛠️ Shipyard). */
.job-card__why .job-card__grow {
  margin-top: var(--sp-1);
  vertical-align: middle;
}

/* ── C6: the gateway pull (far traders in Halcyon pay extra: sea blue words; wraps like the danger chip) */
.job-card__pull {
  background: #e3f1fa;
  color: #1d4f72;
  white-space: normal;
}