/* ============================================================
   Crew tab — Phase 1 of the staff system
   ============================================================ */
.crew-tab { padding: 20px 24px; }
.crew-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.crew-payroll-summary { color: var(--text-dim); font-size: var(--fs-sm); }

.crew-active, .crew-recruits { margin-top: 18px; }
.crew-active h3, .crew-recruits h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 10px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.staff-card, .recruit-card {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.staff-card > .staff-icon,
.recruit-card > .recruit-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(79, 195, 247, 0.1);
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.staff-card > .staff-body,
.recruit-card > .recruit-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Bumped 4 → 6 so inner rows breathe consistently with the .staff-row
     horizontal gap (8). Meta row also centers its items so italic tally
     text and button baselines line up. */
  gap: 6px;
}
.staff-card .staff-row-meta { align-items: center; }
.staff-head, .recruit-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.recruit-hire {
  align-self: flex-end;
  background: var(--accent);
  color: #0a1419;
  border-color: var(--accent);
}
.staff-actions {
  display: flex;
  gap: 6px;
  align-self: flex-end;
  margin-top: 2px;
}
.staff-name, .recruit-name { font-weight: var(--fw-bold); }
.staff-role, .recruit-role { color: var(--text-dim); font-size: var(--fs-sm); }
.staff-mood, .recruit-cv  { font-size: var(--fs-sm); color: var(--text); }
.staff-stats, .recruit-stats {
  display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--text-dim);
}
.staff-stats span, .recruit-stats span { font-variant-numeric: tabular-nums; }
.staff-wage, .recruit-wage { font-size: var(--fs-sm); color: var(--money); }
.staff-fire, .recruit-hire, .staff-praise {
  padding: 4px 12px; font-size: var(--fs-sm);
  border: 1px solid var(--border); background: var(--bg-card-hover);
  color: var(--text); border-radius: var(--r-sm); cursor: pointer;
}
.staff-praise {
  background: rgba(240, 198, 58, 0.15); border-color: rgba(240, 198, 58, 0.45);
  color: #f0c63a;
}
.staff-praise:hover:not(.is-cooldown) {
  background: rgba(240, 198, 58, 0.28); border-color: #f0c63a;
}
.staff-praise.is-cooldown {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.65;
}
.staff-praise.is-cooldown:hover {
  background: var(--bg-card);
}
.staff-fire:hover  { background: rgba(232,80,58,0.15); border-color: #e8503a; color: #f0b4a8; }

/* Quirk chips — small rounded pills inside the card body. Each chip
   carries a tooltip with the quirk's full description. */
.staff-quirks {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 2px;
}
.quirk-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(120, 200, 255, 0.10);
  border: 1px solid rgba(120, 200, 255, 0.35);
  color: #c8e6ff;
  border-radius: 10px;
  cursor: help;
}

.staff-mood-bar {
  width: 100%; height: 4px; background: rgba(0,0,0,0.3);
  border-radius: 2px; overflow: hidden; margin-top: 2px;
}
/* Tier-colored mood fill. The old version painted a 3-stop gradient
   clipped to mood% width, which made every worker read "red-orange
   danger" for the first 30%-50% of the bar. Now the fill is a flat
   color matching the same thresholds the emoji uses (≥70 high, ≥30
   mid, <30 low). Emitted via data-mood-tier on the fill div. */
.staff-mood-bar > div {
  height: 100%;
  background: var(--good);
  transition: width var(--dur-slow) var(--ease);
}
.staff-mood-bar > div[data-mood-tier="high"] { background: var(--good); }
.staff-mood-bar > div[data-mood-tier="mid"]  { background: var(--money); }
.staff-mood-bar > div[data-mood-tier="low"]  { background: var(--bad); }

.crew-locked, .crew-empty {
  padding: 24px; color: var(--text-dim); text-align: center;
  border: 1px dashed var(--border); border-radius: var(--r-md);
}

.staff-tally {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-style: italic;
}

.staff-tenure {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* Compact card layout — Autonomy v2 */
.staff-card .staff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.staff-card .staff-row-head {
  justify-content: space-between;
}
.staff-card .staff-row-meta {
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.staff-card .staff-name {
  font-weight: var(--fw-bold);
  flex: 1 1 auto;
  min-width: 0;
}
.staff-card .staff-role {
  color: var(--text-dim);
  font-weight: var(--fw-reg);
  font-size: var(--fs-sm);
}
.staff-card .staff-row-mood {
  font-size: var(--fs-sm);
}
.staff-card .staff-mood-num { color: var(--text); }
.staff-card .staff-mood-bar {
  flex: 1 1 80px;
  height: 4px;
  min-width: 60px;
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  overflow: hidden;
}
.staff-card .staff-mood-bar > div {
  height: 100%;
  background: var(--good);
}
.staff-card .staff-mood-bar > div[data-mood-tier="high"] { background: var(--good); }
.staff-card .staff-mood-bar > div[data-mood-tier="mid"]  { background: var(--money); }
.staff-card .staff-mood-bar > div[data-mood-tier="low"]  { background: var(--bad); }
.staff-card .staff-wage {
  color: var(--money);
  font-weight: var(--fw-semi);
}
.staff-card .staff-tenure { color: var(--text-dim); }
.staff-card .staff-tally  { color: var(--text-dim); font-style: italic; }
.staff-card .staff-actions { display: flex; gap: 4px; }

/* The "Settings ▾ / Hide ▴" button. The old tiny ⚙ glyph was easy to
   miss, leading players to never discover the per-worker auto-buy /
   accept-threshold / brand-filter knobs hiding behind it. This version
   is a proper labeled pill with an accent border that explicitly reads
   as a call to action when collapsed and a clear "Hide" affordance
   when expanded. */
.staff-card .staff-cog {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(79, 195, 247, 0.10);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 28px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease),
              border-color  var(--dur-fast) var(--ease),
              color         var(--dur-fast) var(--ease);
}
.staff-card .staff-cog:hover {
  background: rgba(79, 195, 247, 0.20);
  color: var(--text);
}
.staff-card .staff-cog:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.staff-card .staff-cog .staff-cog-gear {
  font-size: 13px;
  line-height: 1;
}
.staff-card .staff-cog .staff-cog-chevron {
  font-size: 10px;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
  display: inline-block;
}
/* aria-expanded="true" rotates the chevron up so the open state reads
   unambiguously even at a glance — same convention native <details>
   uses. Combined with the label text-flip "Settings" → "Hide", that's
   two redundant cues for the same state. */
.staff-card .staff-cog[aria-expanded="true"] {
  background: var(--bg-card-hover);
  border-color: var(--border);
  color: var(--text-dim);
}
.staff-card .staff-cog[aria-expanded="true"] .staff-cog-chevron {
  transform: rotate(180deg);
}

.staff-drawer {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-xs);
}
.staff-drawer.is-open { display: block; }
.staff-drawer .drawer-title {
  font-weight: var(--fw-bold);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  margin-bottom: 6px;
}
.staff-drawer .drawer-empty {
  color: var(--text-dim);
  font-style: italic;
  padding: 4px 0;
}

/* Stock targets editor */
.staff-drawer .stock-target-row {
  display: grid;
  grid-template-columns: 80px 90px 60px 24px;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.staff-drawer .stock-target-row input[type="number"] {
  width: 100%;
  padding: 2px 4px;
}
.staff-drawer .st-remove {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--bad);
  cursor: pointer;
  /* Lifted to a 24×24 minimum for tap reachability. */
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  line-height: 1;
}
.staff-drawer .stock-target-add {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 8px;
}
.staff-drawer .stock-target-add select,
.staff-drawer .stock-target-add input {
  padding: 2px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.staff-drawer .stock-target-add input { width: 50px; }
.staff-drawer .st-add-btn {
  background: var(--accent);
  color: #0a1419;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  cursor: pointer;
}

/* Weekly budget */
.staff-drawer .weekly-budget {
  margin-top: 8px;
}
.staff-drawer .weekly-budget input {
  width: 60px;
  padding: 2px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
}
.staff-drawer .ws-readout {
  color: var(--text-dim);
  margin-top: 2px;
}

/* Accept threshold slider */
.staff-drawer .accept-threshold input[type="range"] {
  width: 100%;
}
.staff-drawer .at-pct {
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.staff-drawer .at-preview {
  color: var(--text-dim);
  margin-top: 4px;
}

/* Buyer drawer — Autonomy v2 */
.staff-drawer .buyer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.staff-drawer .buyer-row-label {
  color: var(--text-dim);
  flex: 0 0 auto;
}
.staff-drawer .buyer-row label {
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.staff-drawer .buyer-row input[type="number"] {
  width: 64px;
  padding: 2px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.staff-drawer .buyer-row select {
  padding: 2px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
}
.staff-drawer .buyer-brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.staff-drawer .buyer-brand-chip {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.5;
  appearance: none;
  cursor: pointer;
  user-select: none;
}
.staff-drawer .buyer-brand-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.staff-drawer .buyer-brand-chip.is-on {
  background: var(--accent);
  color: #0a1419;
  border-color: var(--accent);
}
.staff-drawer .brand-empty-hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 10px;
}
.staff-drawer .buyer-row-specials {
  flex-direction: row;
}
.staff-drawer .buyer-special {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  margin-right: 6px;
}
.staff-drawer .buyer-special input[type="checkbox"] {
  margin: 0;
}

/* Wage + vacation row — universal across all roles */
.staff-drawer .staff-wage-vacation-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.staff-drawer .wage-info {
  flex: 0 0 auto;
  color: var(--money);
  font-weight: var(--fw-semi);
  margin-right: 4px;
}
.staff-drawer .wage-info .wage-base {
  color: var(--text-dim);
  font-weight: var(--fw-reg);
  font-size: 10px;
}
.staff-drawer .staff-wage-btn,
.staff-drawer .staff-vacation-btn {
  appearance: none;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
  flex: 1 1 auto;
}
.staff-drawer .staff-wage-btn:hover:not(.is-disabled),
.staff-drawer .staff-vacation-btn:hover:not(.is-disabled) {
  border-color: var(--accent);
  color: var(--text);
}
.staff-drawer .staff-wage-btn.is-disabled,
.staff-drawer .staff-vacation-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-dim);
}

/* Workshop Hand drawer (shared with Parts Runner tier row — same row /
   radio / label shape, same dim styling). */
.staff-drawer .hand-row,
.staff-drawer .runner-row {
  margin-bottom: 6px;
}
.staff-drawer .hand-row-pref.is-dim {
  opacity: 0.55;
}
.staff-drawer .hand-row-label,
.staff-drawer .runner-row-label {
  color: var(--text-dim);
  margin-right: 6px;
}
.staff-drawer .hand-toggle,
.staff-drawer .hand-radio,
.staff-drawer .runner-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  margin-right: 8px;
  cursor: pointer;
}
.staff-drawer .hand-toggle input,
.staff-drawer .hand-radio input,
.staff-drawer .runner-radio input {
  margin: 0;
}
.staff-drawer .drawer-hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 10px;
  margin-top: 4px;
}

/* Sales Clerk — closes-mode radio (sale / rent / both) — pill row. */
.staff-drawer .clerk-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.staff-drawer .clerk-mode-label {
  color: var(--text-dim);
  margin-right: 2px;
}
.staff-drawer .clerk-mode-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.staff-drawer .clerk-mode-radio:hover {
  border-color: var(--accent);
  color: var(--text);
}
.staff-drawer .clerk-mode-radio:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a1419;
}
.staff-drawer .clerk-mode-radio input { margin: 0; }
.staff-drawer .accept-threshold.is-dim { opacity: 0.55; }

/* Sales Clerk — auto-list controls */
.staff-drawer .clerk-autolist {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.staff-drawer .clerk-autolist-row {
  margin-top: 6px;
}
.staff-drawer .clerk-autolist-row.is-dim {
  opacity: 0.55;
}
.staff-drawer .clerk-autolist-row input[type="range"] {
  width: 100%;
}
.staff-drawer .al-pct {
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* ============================================================
   Compact recruitment board — Phase: pack more cards per row
   ============================================================
   The Recruitment board now grows to 6 candidates per cycle, so the
   one-card-per-row layout was eating too much vertical space. Turn the
   container into a responsive grid (auto-fill, min 260px) and slim the
   per-card chrome so 2–3 cards sit side-by-side on a normal viewport
   and 4+ on wide displays. Heading still spans the full row.
   ============================================================ */
.crew-recruits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  align-items: start;
}
.crew-recruits > h3 {
  grid-column: 1 / -1;
  margin: 0;
}

/* Slim a recruit card without touching the hired-staff card styles
   (they live on `.staff-card` and remain full-width). */
.recruit-card {
  padding: 8px 10px;
  gap: 8px;
  margin-bottom: 0;            /* grid gap handles spacing now */
}
.recruit-card > .recruit-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  font-size: 22px;
}
.recruit-card > .recruit-body {
  gap: 2px;
}
.recruit-card .recruit-cv {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  /* Clamp long blurbs to 2 lines so card heights stay close to even. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.recruit-card .recruit-stats { font-size: 10px; gap: 8px; }
.recruit-card .recruit-wage  { font-size: var(--fs-xs); }
.recruit-card .recruit-hire {
  align-self: stretch;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  margin-top: 2px;
}
/* Quirk chips inside a recruit card sit tighter, smaller, and clip to
   one row so a 2-quirk recruit doesn't reflow taller than a 1-quirk one. */
.recruit-card .staff-quirks {
  margin-top: 0;
  gap: 3px;
  max-height: 18px;
  overflow: hidden;
}
.recruit-card .quirk-chip {
  font-size: 9px;
  padding: 0 5px;
}

/* "+ Add all parts" button — sits below the per-type Add row. */
.staff-drawer .stock-target-add-all {
  margin-top: 4px;
  margin-bottom: 8px;
}
.staff-drawer .st-add-all-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  cursor: pointer;
  font-size: var(--fs-xs);
  width: 100%;
  text-align: left;
}
.staff-drawer .st-add-all-btn:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--text);
}

/* ============================================================
   Per-role color stripe + icon tint
   ============================================================
   Both staff and recruit cards previously shared a cyan left-accent
   regardless of role, so the only role differentiator was the emoji.
   Cards now emit data-role="${s.role}" and we key the left border +
   icon background tint off it. Tokens are existing — no new palette.
   ============================================================ */
.staff-card[data-role="workshop_hand"],
.recruit-card[data-role="workshop_hand"] { border-left-color: var(--good); }
.staff-card[data-role="workshop_hand"] > .staff-icon,
.recruit-card[data-role="workshop_hand"] > .recruit-icon {
  background: rgba(76, 175, 80, 0.12);
  color: var(--good);
}

.staff-card[data-role="parts_runner"],
.recruit-card[data-role="parts_runner"] { border-left-color: var(--accent); }
.staff-card[data-role="parts_runner"] > .staff-icon,
.recruit-card[data-role="parts_runner"] > .recruit-icon {
  background: rgba(79, 195, 247, 0.12);
  color: var(--accent);
}

.staff-card[data-role="sales_clerk"],
.recruit-card[data-role="sales_clerk"] { border-left-color: var(--money); }
.staff-card[data-role="sales_clerk"] > .staff-icon,
.recruit-card[data-role="sales_clerk"] > .recruit-icon {
  background: rgba(255, 209, 102, 0.12);
  color: var(--money);
}

.staff-card[data-role="buyer"],
.recruit-card[data-role="buyer"] { border-left-color: var(--premium); }
.staff-card[data-role="buyer"] > .staff-icon,
.recruit-card[data-role="buyer"] > .recruit-icon {
  background: rgba(196, 123, 255, 0.12);
  color: var(--premium);
}

.staff-card[data-role="tester"],
.recruit-card[data-role="tester"] { border-left-color: var(--warn); }
.staff-card[data-role="tester"] > .staff-icon,
.recruit-card[data-role="tester"] > .recruit-icon {
  background: rgba(255, 170, 58, 0.12);
  color: var(--warn);
}

/* ============================================================
   Buyer specials — restyled as pill chips for parity with brand chips
   ============================================================
   .buyer-special was a plain native checkbox + label, while the row
   above it (.buyer-brand-chip) was a pill-shaped toggle. Same purpose,
   two different controls. Now the checkbox is visually hidden and the
   chip itself reflects its checked state via :has(input:checked).
   The underlying input keeps state — no JS or handler change needed.
   ============================================================ */
.staff-drawer .buyer-special {
  /* IMPORTANT: position:relative anchors the absolutely-positioned hidden
     checkbox below to THIS chip. Without it, the input's positioning
     context falls back to <html>/<body>, and when the chip is focused
     (e.g. clicking the label toggles + focuses the hidden input) the
     browser scrolls the page to bring that off-canvas 1×1 element into
     view — which manifests as "the whole GUI shifts down and gets stuck".
     Adding the relative here keeps the input's coordinate space inside
     the chip itself, so focus-auto-scroll is a no-op. */
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-right: 4px;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.staff-drawer .buyer-special:hover {
  border-color: var(--accent);
  color: var(--text);
}
.staff-drawer .buyer-special input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  pointer-events: none;
}
.staff-drawer .buyer-special:has(input[type="checkbox"]:checked) {
  background: var(--accent);
  color: #0a1419;
  border-color: var(--accent);
}
.staff-drawer .buyer-special input[type="checkbox"]:focus-visible + * {
  /* Forward focus ring to the chip itself when the hidden input has focus. */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Phase B — recruit fit signal, summary strip, sort tabs,
   status chips, Loner-conflict quirk warning.
   ============================================================ */

/* --- Recruit fit signal: bold the role-primary stat + dot --- */
.recruit-card .recruit-stats .primary {
  color: var(--text);
  font-weight: var(--fw-bold);
}
.recruit-card .recruit-stats .primary.is-good  { color: var(--good); }
.recruit-card .recruit-stats .primary.is-ok    { color: var(--money); }
.recruit-card .recruit-stats .primary.is-poor  { color: var(--bad); }
.recruit-card .recruit-stats .fit-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  background: var(--text-dim);
}
.recruit-card .recruit-stats .fit-dot.is-good {
  background: var(--good);
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}
.recruit-card .recruit-stats .fit-dot.is-ok   { background: var(--money); }
.recruit-card .recruit-stats .fit-dot.is-poor { background: var(--bad); }

/* --- Quirk warning chip (Loner with non-empty crew) --- */
.recruit-card .quirk-chip.is-warn {
  background: rgba(232, 80, 58, 0.12);
  border-color: rgba(232, 80, 58, 0.45);
  color: #f0a89b;
}

/* --- Crew summary strip --- */
.crew-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}
.crew-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(79, 195, 247, 0.10);
  border-radius: 999px;
  color: var(--text);
}
.crew-summary-pill .crew-summary-label {
  color: var(--text-dim);
}
.crew-summary-pill strong {
  color: var(--text);
  font-weight: var(--fw-bold);
}
.crew-summary-pill.is-warn {
  background: rgba(255, 209, 102, 0.15);
  color: var(--money);
}
.crew-summary-pill.is-warn strong { color: var(--money); }
.crew-summary-pill.is-alert {
  background: rgba(232, 80, 58, 0.15);
  color: #f0a89b;
}
.crew-summary-pill.is-info {
  background: rgba(120, 200, 255, 0.10);
  color: #c8e6ff;
}

/* --- Sort tab row --- */
.crew-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  flex-wrap: wrap;
}
.crew-sort-label {
  color: var(--text-dim);
  margin-right: 2px;
}
.crew-sort-btn {
  appearance: none;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.crew-sort-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.crew-sort-btn.is-active {
  background: rgba(79, 195, 247, 0.18);
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Staff stat chips (Speed / Accuracy / Charm) ---
   One row per hired worker showing the three random-roll stats as
   human-readable labels (Lightning / Sharp / Charmer) instead of just
   raw numbers, so the player can scan "is this hand fast?" at a glance.
   The role-primary stat gets a star prefix and bumped weight. */
.staff-card .staff-row-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--fs-xs);
}
.staff-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2px;
  border-radius: 999px;
  border: 1px solid;
  cursor: help;
}
.staff-stat-chip .stat-glyph { font-size: 11px; line-height: 1; }
.staff-stat-chip .stat-num {
  font-weight: var(--fw-reg);
  opacity: 0.7;
  margin-left: 1px;
}
.staff-stat-chip.is-good {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.50);
  color: var(--good);
}
.staff-stat-chip.is-ok {
  background: rgba(255, 209, 102, 0.12);
  border-color: rgba(255, 209, 102, 0.45);
  color: var(--money);
}
.staff-stat-chip.is-neutral {
  background: rgba(155, 172, 193, 0.08);
  border-color: var(--border);
  color: var(--text-dim);
}
.staff-stat-chip.is-poor {
  background: rgba(232, 80, 58, 0.10);
  border-color: rgba(232, 80, 58, 0.40);
  color: #f0a89b;
}
/* Role-primary stat — the one the worker is actually paid to do well.
   Star prefix via ::before so the label content stays clean for SR. */
.staff-stat-chip.is-primary::before {
  content: "★ ";
  margin-right: 1px;
}
.staff-stat-chip.is-primary { font-weight: 800; }

/* --- Status chips on staff cards --- */
.staff-card .staff-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--fs-xs);
}
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2px;
  border-radius: 999px;
  border: 1px solid;
}
.hc-chip.is-good {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.50);
  color: var(--good);
}
.hc-chip.is-warn {
  background: rgba(255, 209, 102, 0.15);
  border-color: rgba(255, 209, 102, 0.50);
  color: var(--money);
}
.hc-chip.is-alert {
  background: rgba(232, 80, 58, 0.15);
  border-color: rgba(232, 80, 58, 0.50);
  color: #f0a89b;
}
.hc-chip.is-info {
  background: rgba(120, 200, 255, 0.10);
  border-color: rgba(120, 200, 255, 0.40);
  color: #c8e6ff;
}
.hc-chip.is-neutral {
  background: rgba(155, 172, 193, 0.08);
  border-color: var(--border);
  color: var(--text-dim);
}