/*
 * The bot's thinking panel (app/thinking.js): the win / draw / loss bar and
 * the candidate rows. Shared by the Play page (versus.html) and the game
 * replay (play.html); each page keeps its own caption row and spacing.
 */

/* Who is winning, as one bar read from both ends: the first side fills from
   the left, the other counter-fills from the right, each in the colour its
   units are actually wearing on the board (app/team-color.js).

   Class `end` rather than `side` on purpose -- `.side` is the Play page's
   sidebar panel, and reusing it here handed each label that panel's border,
   radius and background. */
.compass { margin-bottom: 18px; }
.compass-cap {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin: 0;
}
.compass .ends {
  display: flex; justify-content: space-between; align-items: flex-end;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: 7px;
}
/* Each side's name sits above its percentage: the first flush left, Draw
   centred, the other flush right, matching where each fills the bar. */
.compass .end { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.compass .end.mid { align-items: center; }
.compass .end.right { align-items: flex-end; }
.compass .pct {
  font-size: 1.25rem; font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.compass .track {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
/* Neutral until the engine assigns the real team colours. */
.compass .track i { display: block; height: 100%; transition: width .35s var(--ease); background: rgba(255,255,255,.14); }
/* A hairline where the two meet, so the boundary reads even when the two
   colours are close in value. */
.compass .track i:first-child { border-right: 1px solid rgba(0,0,0,.45); }
/* The draw chance: a neutral gray stretch between the two sides. */
.compass .track i.draw { background: rgba(160,160,170,.55); }

.decision { margin-bottom: 14px; }
.decision:last-child { margin-bottom: 0; }
.decision .stage {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 5px;
}
.cand {
  /* Wide enough for a flat root's two-part rows ("DSM 4,7 · move to 5,8")
     without starving the bar. */
  display: grid; grid-template-columns: 140px 1fr 34px;
  gap: 8px; align-items: center;
  font-size: .75rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cand .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rows that name a tile light it up on the board while hovered. */
.cand[data-tile], .cand[data-actor] { cursor: pointer; }
.cand[data-tile]:hover, .cand[data-actor]:hover { color: var(--text); }
/* Coordinates ride along quietly behind the unit's name. */
.cand .co { color: var(--text-faint); font-size: .6875rem; }
.decision .stage b { color: var(--text-dim); font-weight: 600; }
.cand[data-top='true'] { color: var(--text); }
.cand .bar { height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.cand .bar i { display: block; height: 100%; background: var(--gold-dim); }
.cand[data-top='true'] .bar i { background: var(--gold); }
.cand .n { text-align: right; }