/* The country names, over the map canvas and under the markers: ink-2 on a halo of the land colour, a long name
   balanced over two lines. The map sets its own font, so the names take the page's. */
.labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.labels div{position:absolute;left:0;top:0;max-width:7em;font-family:var(--body);font-weight:500;line-height:1.15;text-align:center;
  text-wrap:balance;color:var(--ink-2);opacity:.85;transition:opacity .3s;
  text-shadow:-1px -1px 0 var(--paper-2),1px -1px 0 var(--paper-2),-1px 1px 0 var(--paper-2),1px 1px 0 var(--paper-2),0 0 3px var(--paper-2)}
/* letter spacing trails the last letter, and the start padding evens it out */
.labels .caps{text-transform:uppercase;letter-spacing:.18em;padding-inline-start:.18em}
/* Arabic, Indic and Thai letters run smaller than capitals and ideographs of the same size */
.labels div:not(.caps, .ideo){font-size:1.2em}
.labels .off{opacity:0}
@media (prefers-reduced-motion:reduce){.labels div{transition:none}}
/* The leaders: a thin line from a marker's icon to its name where the name stands aside, under the markers */
.leaders{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.leaders line{stroke:var(--ink-2);stroke-width:1;opacity:.8}
/* a name with no room for its note shows alone; the note keeps its place, so the name does not move */
.mk.ld-short > small{visibility:hidden}
/* The tally: its label, the page's figure and a note in a box at the top of the map, in the corner the 2D | 3D switch
   leaves free. A phone sets it under the map tools, with the note behind an info button. The box is 17rem wide, or
   as wide as its figure, and the note wraps inside it. */
.tally{position:absolute;top:.714rem;inset-inline-start:.714rem;z-index:2;width:max-content;min-width:min(17rem,calc(100% - 1.429rem));max-width:calc(100% - 1.429rem);padding:.429rem .714rem .5rem;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.15);line-height:1.3}
.tally[hidden],.tally .tl-info{display:none}
.tally .tl-label{display:block;font-size:.786rem;font-weight:600;color:var(--ink-2)}
.tally .tl-figure{display:block;font-family:var(--display);font-size:1.357rem;font-weight:600;line-height:1.2;white-space:nowrap}
.tally .tl-note{display:block;width:0;min-width:100%;margin-top:.286rem;padding-top:.286rem;border-top:1px solid var(--rule);font-size:.714rem;color:var(--ink-2)}
@media (max-width:900px){
  .tally{top:calc(.571rem + max(40px,2.857rem) + .429rem);inset-inline-start:.571rem;min-width:min(14rem,calc(100% - 1.143rem));max-width:calc(100% - 1.143rem);
    display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.143rem;padding-block:.286rem;padding-inline-end:0}
  .tally[hidden]{display:none}
  .tally .tl-label,.tally .tl-figure{grid-column:1}
  .tally .tl-figure{font-size:1.214rem}
  .tally .tl-info{display:grid;place-items:center;grid-column:2;grid-row:1/3;width:max(44px,3.143rem);height:max(40px,2.857rem);
    padding:0;border:0;border-radius:4px;background:none;color:var(--ink-2);cursor:pointer}
  .tally .tl-info svg{width:1.143rem;height:1.143rem}
  .tally .tl-info[aria-expanded="true"]{color:var(--ink)}
  .tally .tl-info:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* the note wraps at the box's width, so the info button stays where the reader tapped it */
  .tally .tl-note{grid-column:1/-1;width:0;min-width:calc(100% - .714rem)}
  .tally:not(.open) .tl-note{display:none}
  body[data-tab="text"] .tally{display:none}
}
/* A battle's card on a wide map, docked at the map's end edge under the map tools. The script sets its top, width and
   height, and the page's frame fits the room beside it. The card scrolls inside it. */
.bc-dock{position:absolute;inset-inline-end:.714rem;z-index:4;display:flex;flex-direction:column;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.bc-dock .bc{flex:1 1 auto;min-height:0;max-height:none}
.bc-dock .bc-close{position:absolute;inset-inline-end:.429rem;top:.429rem;width:1.857rem;height:1.857rem;border:0;border-radius:3px;
  background:none;color:var(--ink-2);font:18px/1 var(--body);cursor:pointer}
.bc-dock .bc-close:hover{color:var(--ink);background:var(--paper-2)}
.bc-dock .bc-close:focus-visible{outline:2px solid var(--accent)}