/* Order of battle — on top of style.css and civil-war.css. Sides take the Civil War page's
 * result colours (Union blue, Confederate orange), as a rule beside each army's name. */

.armies { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .armies { grid-template-columns: 1fr; } }
.army h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.army h2 .bar { width: 4px; height: 18px; border-radius: 2px; }
.army.US .bar { background: var(--res-union); }
.army.CS .bar { background: var(--res-confederate); }
.army .who { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; }

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 14px; border-left: 1px solid var(--border); margin-left: 5px; }
.tree details > summary { cursor: pointer; padding: 3px 0; list-style: none; }
.tree details > summary::-webkit-details-marker { display: none; }
.tree details > summary::before { content: "▸"; display: inline-block; width: 12px; color: var(--text-muted); }
.tree details[open] > summary::before { content: "▾"; }
.tree .f-name { font-weight: 600; color: var(--text-primary); }
.tree .corps > details > summary .f-name { font-size: 14px; }
.tree .cmd { color: var(--text-secondary); }
.tree .of { color: var(--text-secondary); font-size: 0.9em; }
.tree .then { color: var(--text-muted); }
.tree .n { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tree .pg { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.tree li.unit { padding: 2px 0 2px 12px; font-size: 13px; }
.tree li.unit .u-name { color: var(--text-primary); }
.tree .arm { display: inline-block; min-width: 14px; font-size: 10px; font-weight: 700;
  color: var(--text-muted); margin-right: 4px; }
.tree mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 2px; }
.tree .hidden { display: none; }