/* /usporedba/ -- the /compare grid (compare.css) with a tile map in
   each panel (tilemap.css supplies the card, readout, notice and legend
   looks). Colours come only from tokens.css. */

/* compare.css centres an <img> in .cstage; a map fills it instead */
.tcmp-stage { display: block; }
.tcmp-map { position: absolute; inset: 0; }
.tcmp-stage.dim .tcmp-map { opacity: 0.3; }

/* the moment this panel shows (leads differ between panels) */
.tcmp-chip {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; color: var(--ink); white-space: nowrap;
  box-shadow: 0 1px 6px var(--shadow-1); pointer-events: none;
}
.tcmp-chip[hidden] { display: none; }

/* compact legend, above the scale bar */
.tcmp-legend {
  position: absolute; left: 8px; bottom: 30px; z-index: 2; width: min(240px, 55%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 0 0 2px; pointer-events: none; font-size: 12px;
}
.tcmp-legend:empty { display: none; }
.tcmp-legend .lg { margin-top: 3px; }

/* the linked cursor in the panels the pointer is not over */
.tcmp-cross {
  position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat;
}
.tcmp-cross[hidden] { display: none; }
.tcmp-readout { z-index: 4; }
/* Below the chip (top: 8px, ~28px tall incl. border/padding), not over it;
   above .ccover (below) so the card -- switches that act on all four
   panels -- stays usable even while this panel's own paywall/notice covers
   it (tilemap.css's top/max-height are for a lone full-stage map). */
.tcmp-stage .tm-card { top: 38px; max-height: calc(100% - 48px); z-index: 7; }

/* messages over a panel: readable over the map, not blocking it, except
   the paywall's button */
.tcmp-stage .ccover { z-index: 6; pointer-events: none; }
.tcmp-stage .ccover .cpaywall { pointer-events: auto; }
.tcmp-stage .cmsg {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
.cmenu .run-item.unavail { color: var(--muted); opacity: 0.6; }
.cmenu .run-item.locked::after { content: " 🔒"; font-size: 10px; opacity: 0.55; }