/* css/detachments.css — inner styles for the multi-select Detachments box
   (js/app/detachment-picker.js). The box chrome (section / summary / body) is
   shared with Army setup via the .army-setup-section / .army-setup-summary /
   .army-setup-body classes, so this file only styles the picker's own content. */

/* Push the running-total badge to the right edge of the shared summary. */
.detachments-summary { justify-content: flex-start; }
.detachments-summary-label { flex: 0 0 auto; }
.detachments-total {
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  padding: 1px 8px;
}
.detachments-total:empty { display: none; }

.detachments-empty {
  padding: 6px 2px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.detachments-group-label {
  margin: 2px 2px 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.detachments-list { display: flex; flex-direction: column; gap: 4px; }

.detachment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--card-bg, rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.detachment-row:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.detachment-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.detachment-row.selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
}
/* Row currently open in the Details pane (read view) — distinct from selected. */
.detachment-row.viewing {
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.detachment-row-cb {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  display: inline-grid;
  place-content: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.detachment-row-cb::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.12s ease;
  background: var(--accent);
  /* checkmark glyph */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.detachment-row-cb:hover { border-color: rgba(var(--accent-rgb), 0.6); }
.detachment-row-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.detachment-row-cb:checked {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}
.detachment-row-cb:checked::before { transform: scale(1); }

.detachment-row-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
}
.detachment-row.selected .detachment-row-name { font-weight: 600; }

.detachment-row-pts {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.detachment-row.selected .detachment-row-pts {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.10);
}

.detachments-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.detachments-footer-pts { font-weight: 700; color: var(--text); }

/* ── Detachment / rule detail header ──────────────────────────────────────
   The kind label ("DETACHMENT", "STRATAGEM", …) sits ABOVE the name as a small
   eyebrow. Previously it sat under the name at nearly the same size as the
   other meta text, so the banner read as three undifferentiated stacked rows
   with the points badge stranded below them. */
.unit-detail-rule .detail-eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.85;
}
/* Match the datasheet header's engraved-serif name treatment — the rule and
   detachment banners were the only headers still rendering in the body face. */
.unit-detail-rule .detail-name {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  letter-spacing: 0.04em;
}
/* The banner's lower row: no top margin, since the name underline already
   provides the separation. */
.unit-detail-rule .detail-banner-full { margin-top: 0; }

/* Force Disposition chips. Hover shows the disposition's blurb (title attr). */
.detail-dispositions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.detail-disposition {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid rgba(245, 200, 66, 0.35);
  border-radius: 999px;
  background: rgba(245, 200, 66, 0.10);
  color: #f5c842;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.detail-detachment-block { margin: 0 0 14px; }
.detail-detachment-block:last-child { margin-bottom: 0; }
/* Boxed items (enhancements + stratagems) so each reads as a distinct card. */
.detail-detachment-card {
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--card-bg, rgba(255, 255, 255, 0.02));
  padding: 10px 12px;
  margin-bottom: 10px;
}
.detail-detachment-card .strat-sections { margin-top: 4px; }
.detail-detachment-subname {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  margin-bottom: 3px;
}
.detail-detachment-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-line;   /* preserve the blank-line paragraph breaks in rule text */
}
.detail-inline-pts {
  font-weight: 600;
  font-size: 11px;
  color: var(--accent);
}