/* v1.11 Squad pack: morale / fatigue bars in the roster, casualty triage, fireteam B controls, debrief chatter. */
.sq-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 1px; }
.sq-b { display: flex; align-items: center; gap: 3px; min-width: 0; }
.sq-b i { font-style: normal; font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em; color: var(--dim); }
.sq-b .bar { flex: 1; height: 2px; }
.sq-b .bar > span { transition: width 0.4s linear; }
.r-top i.sq-red { color: var(--red); } .r-top i.sq-ok { color: var(--green); } .r-top i.sq-lost { color: #8A948A; }
.r-top b em.sq-lead { font-style: normal; font-family: var(--mono); font-size: 8px; color: #0B1220; background: #8EC0FF; padding: 0 3px; margin-left: 4px; vertical-align: middle; letter-spacing: 0.06em; }

.sq-brow { display: flex; align-items: center; gap: 4px; padding: 0 4px 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; min-width: 0; }
.sq-brow button { height: 22px; padding: 0 6px; background: transparent; border: 1px solid #2B3A2F; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; }
.sq-brow button:hover { border-color: #8EC0FF; }
.sq-brow button.on { color: #8EC0FF; border-color: #8EC0FF; background: rgba(142,192,255,0.08); }
#sq-bstat { margin-left: auto; color: #8EC0FF; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.sq-triage { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border: 1px solid rgba(224,83,61,0.5); background: rgba(48,12,9,0.4); }
.sq-tt { display: flex; align-items: center; justify-content: space-between; }
.sq-medic { font-family: var(--mono); font-size: 9px; color: var(--green); letter-spacing: 0.1em; }
.sq-cas { display: grid; grid-template-columns: minmax(0, 64px) 1fr auto; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; min-height: 26px; }
.sq-cn { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: #F3F6F2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-cas b { font-weight: 500; font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; } .sq-cas b.red { color: var(--red); } .sq-cas b.amber { color: var(--amber); } .sq-cas b.green { color: var(--green); } .sq-cas b.grey { color: #8A948A; }
.sq-cas.bleedout .sq-cn { color: #FFB4A6; }
.sq-cas.lost { opacity: 0.55; }
.sq-act { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.sq-act em { font-style: normal; color: var(--green); font-size: 9px; letter-spacing: 0.1em; }
.sq-act button { height: 24px; padding: 0 7px; background: transparent; border: 1px solid #5A2A22; color: #FFB4A6; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; }
.sq-act button:hover { border-color: var(--red); color: #fff; }
.sq-ins { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.sq-kv { align-items: center; }
.sq-kv .bar { flex: 1; height: 4px; margin: 0 4px; }
.sq-kv > span:first-child { width: 58px; flex: 0 0 auto; }
.sq-ins .ins-actions { margin-top: 4px; }
#mb-cas { border-color: var(--red) !important; color: #FFB4A6 !important; }

.db-chatter { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dbc-line { display: grid; grid-template-columns: 30px 78px 1fr; align-items: center; gap: 8px; opacity: 0; transform: translateY(4px); animation: dbcIn 0.45s ease-out forwards; }
.dbc-line img { width: 30px; height: 34px; object-fit: cover; border: 1px solid var(--line2); }
.dbc-line b { font-family: var(--display); font-size: 15px; letter-spacing: 0.04em; color: #F3F6F2; }
.dbc-line span { font-size: 13px; line-height: 1.35; color: #D9E0DA; font-style: italic; }
@keyframes dbcIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dbc-line { animation: none; opacity: 1; transform: none; } }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .sq-brow button { height: 30px; padding: 0 9px; font-size: 10px; }
  .sq-act button { height: 32px; padding: 0 10px; font-size: 10px; }
  .sq-cas { min-height: 34px; }
  .dbc-line { grid-template-columns: 30px 64px 1fr; }
}