/* WO-MAPMOG-REV1-PANELS-012: Info opens as a small popover beside the Info button.
   pane-manager.js adds .pc-info-pop to #info-modal and sets --pc-info-left/-top from
   the button's box. The overlay never dims or blocks, so every left-side button stays
   visible and clickable. Loaded after style.css; the extra class wins on specificity. */
#info-modal.pc-info-pop.pc-modal-overlay { background: transparent; pointer-events: none; }
#info-modal.pc-info-pop .pc-modal-box {
  pointer-events: auto;
  position: fixed; margin: 0; transform: none;
  left: var(--pc-info-left, 80px); top: var(--pc-info-top, 20px);
  right: auto; bottom: auto;
  width: min(calc(340px * var(--pc-ui-scale, 1)), calc(100vw - var(--pc-info-left, 80px) - 8px));
  max-width: none; box-sizing: border-box; overflow: auto;
  max-height: calc(100vh - var(--pc-info-top, 20px) - 16px);
}
/* REV1-017 (D-2026-10-01-017): on phones the popover is a bottom sheet above the paint bar,
   so it never covers the More menu or the corner buttons. pane-manager.js writes
   --pc-info-bottom (distance from the screen bottom to the top of the bottom dock) and
   --pc-info-ceiling (lowest visible top-chrome button bottom + 8px; BATCH1-029, replaces the 38vh cap). */
@media (max-width: 600px) {
  body:has(#info-modal.pc-info-pop:not([hidden])) .chrome-corner:not(.pc-bottom-dock) { display: flex; }
  #info-modal.pc-info-pop:not([hidden]) .pc-modal-box {
    left: 8px; right: 8px; top: auto; width: auto;
    bottom: var(--pc-info-bottom, 90px);
    max-height: calc(100vh - var(--pc-info-ceiling, 120px) - var(--pc-info-bottom, 90px));
    /* Same sheet recipe as Settings and Rankings: opaque, with the inner hairline ring. */
    background: rgb(from var(--v-surf) r g b / 1);
    box-shadow: inset 0 0 0 1px var(--v-hair), var(--v-sh);
  }
}