/*
  16-bastion.css — v41.22

  Two fixes.

  1. The Bastion turn buttons
  ---------------------------
  `.bastion-schedule-actions` was `flex: 0 0 auto` with no display of its own,
  so its two buttons were plain inline-block siblings with nothing between
  them. Side by side they touched; below 640px each becomes width:100%, so
  they stacked flush and the second overlapped the first's rounded corner.
  It needs to be a flex container with a gap — which is what it looked like it
  already was.

  2. Grouped emplacement units
  ----------------------------
  Styling for the unit chips that replaced one card per mounted weapon.

  Unlayered, loaded after styles.css. No !important.
*/

/* ==========================================================
   1. Turn buttons
   ========================================================== */
.bastion-schedule-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s2);
}

@media (max-width: 640px) {
  .bastion-schedule-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* ==========================================================
   2. Emplacement units
   ========================================================== */
.barm-group { flex-wrap: wrap; }
.barm-k .barm-x {
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
}
.barm-note {
  display: block;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.35;
}
.barm-note b { font-weight: 800; color: var(--muted); }

/* The unit row wraps to its own line under the name and status, so a group of
   twelve doesn't squeeze the weapon stats out of the card. */
.barm-units {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.barm-unit {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--chart);
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
span.barm-unit { cursor: default; }
button.barm-unit:hover { background: var(--paper3); border-color: var(--brass); }
button.barm-unit:active { transform: translateY(1px); }

/* Manned vs idle is carried by the border and a dot, not colour alone — the
   group's own chip states the split in words directly above. */
.barm-unit.is-manned { border-color: color-mix(in srgb, var(--lagoon) 52%, var(--line-strong)); }
.barm-unit.is-idle {
  border-style: dashed;
  background: transparent;
  color: var(--ink-soft);
}