/* =====================================================================
   GVD v23 - centered mobile cue, permanent touch symbols, stable 404 pass
   ===================================================================== */

/* The cue is a direct child of body. Centre it without transforms so older
   animation rules cannot shift the hitless visual left or right. */
@media (max-width: 1100px) {
  html body #global-scroll-cue,
  html body #global-scroll-cue[data-input="touch"],
  html body #global-scroll-cue[data-input="wheel"] {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    inset-inline: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    margin: 0 0 0 -23px !important;
    translate: none !important;
    transform: none !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  #global-scroll-cue .gesture-device,
  #global-scroll-cue .gesture-device-touch,
  #global-scroll-cue .gesture-device-mouse {
    position: static !important;
    inset: auto !important;
    width: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    place-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  #global-scroll-cue svg {
    display: block !important;
    margin: 0 auto !important;
  }

  /* Mobile/tablet is not hover-driven: every phrase already carries its own
     stable, paired sign. This also covers touch laptops with a mouse attached. */
  .capability-list li > .cap-symbol,
  .capability-list li.is-symbol-active > .cap-symbol,
  .capability-list li:not(.is-symbol-active) > .cap-symbol {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: .84 !important;
    color: currentColor !important;
    width: 1em !important;
    min-width: 1em !important;
    height: 1em !important;
    font-size: 1em !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .capability-list li > .cap-symbol-left { grid-column: 1 !important; }
  .capability-list li > .cap-symbol-right { grid-column: 3 !important; }
}