:root {
  --board-columns: 5;
  --sec2-row-height: 248px;
  --sec3-row-height: 188px;
  --regiment-child-indent: 28px;
}

.unit-board {
  grid-template-columns: repeat(var(--board-columns), var(--board-column));
  width: fit-content;
  min-width: calc(var(--board-columns) * var(--board-column) + (var(--board-columns) - 1) * var(--board-gap));
  margin: 0 auto;
}

.wwi-board.has-top-hierarchy > section:nth-child(n + 2)::before,
.wwi-board.has-left-ticks > section:has(img)::after {
  display: none;
}

.wwi-board.has-top-hierarchy > section:nth-child(n + 2):nth-child(-n + 6)::before {
  display: block;
}

.unit-board.wwi-board.has-top-hierarchy > section:nth-child(n + 2):nth-child(-n + 6) img {
  margin: var(--top-row-icon-offset) auto 0;
}

.unit-board.wwi-board.has-top-hierarchy > section:nth-child(n + 7) img {
  margin: 0 auto;
}

.wwi-board #sec2,
.wwi-board #sec3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wwi-board #sec2 .unit-label,
.wwi-board #sec3 .unit-label {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  max-width: 142px;
  text-align: center;
}

.wwi-board #sec3 .unit-label {
  margin-top: 8px;
  font-size: 0.76rem;
  max-width: 132px;
}

.unit-subnote {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.nested-stack-line {
  position: absolute;
  top: calc(var(--sec3-tick-center) - 2px);
  left: var(--left-stack-offset);
  width: var(--connector-width);
  height: calc((var(--sec3-row-height) - var(--sec3-tick-center)) + var(--board-gap) + (var(--nested-depth) * var(--sec3-step)) + var(--sec3-tick-center));
  background: var(--connector-color);
  pointer-events: none;
  z-index: 1;
}

.wwi-board.has-top-hierarchy::before,
.wwi-board.has-top-hierarchy > section:first-child::after,
.wwi-board.has-top-hierarchy > section:nth-child(n + 2):nth-child(-n + 6)::before,
.wwi-board.has-left-ticks > section[id="sec2"]:has(.stack-line)::after,
.wwi-board.has-left-ticks > section[id="sec3"]:has(img)::after,
.wwi-board .stack-line {
  z-index: 1;
}

.wwi-board #sec1 img,
.wwi-board #sec2 img,
.wwi-board #sec3 img {
  position: relative;
  z-index: 3;
}

.wwi-board #sec3.regiment-child {
  align-items: flex-start;
}

.wwi-board #sec3.regiment-child img {
  margin-left: var(--regiment-child-indent) !important;
  margin-right: auto !important;
}

.wwi-board #sec3.regiment-child .unit-label {
  margin-left: var(--regiment-child-indent);
  max-width: 96px;
  text-align: left;
}

.wwi-board.has-left-ticks > section[id="sec3"].regiment-child:has(img)::after {
  width: calc(var(--left-tick-length-lower) + var(--regiment-child-indent));
}

.wwi-board.has-left-ticks > section[id="sec2"]:has(.stack-line)::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(var(--top-row-icon-offset) + 75px);
  left: -7px;
  width: var(--left-tick-length);
  height: var(--connector-width);
  background: var(--connector-color);
  z-index: 2;
  transform: translateY(-50%);
}

.wwi-board.has-left-ticks > section[id="sec3"]:has(img)::after {
  content: "";
  position: absolute;
  display: block;
  top: var(--sec3-tick-center);
  left: var(--left-stack-offset);
  width: var(--left-tick-length-lower);
  height: var(--connector-width);
  background: var(--connector-color);
  z-index: 2;
  transform: translateY(-50%);
}

.board-caption {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.board-caption a {
  color: #fff4cf;
  font-weight: 600;
  text-decoration: none;
}

.board-caption a:hover,
.board-caption a:focus-visible {
  text-decoration: underline;
}