/*##################### aelogos hover #####################*/
#ambiZone {
  position: relative;
  height: 65px;
  background: lightpink;
  color: #fff;
}

div.aelogos {
  position: absolute;
  bottom: 0px;
  left: 5px;
  transition: 3s ease-in;
}

div.aelogos div {
  width: 360px;
  height: 60px;
  background:lightpink;
  transition: 3s ease-in-out;
  cursor: pointer;
}

/* hover final state */
#ambiZone:hover div.aelogos {
  transform: translate(60px, -5px);
}

#ambiZone:hover div.aelogos div {
  transform: rotate(180deg);
}
/*#####################>aelogos hover<#####################*/


div.aeicon5-scroll, body {
  background-color: lightyellow;
  width: 100vw;
  height: 800px;
  overflow: scroll;
}

div.container {
  display: grid;
  grid-template-columns: 40px 75px 40px;
  grid-template-rows: 40px;
  align-items: center;
  justify-items: center;
}

#fixedGithub {
  position: fixed;
  top: 18px; /* aligned with the "ae" logo icon's own top (issue #28), not eyeballed —
                measured via getBoundingClientRect() against the logo's shadow-DOM ion-icon */
  left: 200px;
  width: 32px;
  height: 32px;
  z-index: 60; /* above #aeHeader's opaque background, see its comment below */
}

#circleGithub {
  position: fixed;
  top: 20px; /* keeps its original 2px inset from #fixedGithub's own top, so it stays centered on the icon */
  left: 202px;
  width: 28px;
  height: 29px;
  background: pink;
  border-radius: 50%;
  /* no z-index here — its stacking relative to the octocat icon inside #fixedGithub
     (which is what makes the glyph visible against this circle) was already correct;
     #fixedGithub's own z-index lifts that whole pair above #aeHeader as one unit. */
}

/* Fixed header (issue #23) — pins the ae logo/version-triple/click-info panel to the
   viewport top, same as #fixedGithub already did, so scrolling the icon galleries below
   doesn't take the click-info panel out of sight with it. */
#aeHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: ivory;
}

/* Reserves the space #aeHeader (position:fixed, out of flow) would otherwise occupy, so
   div.aeicon5-scroll's content doesn't start out hidden underneath it. Measured against
   #aeHeader's actual rendered height via a live Puppeteer check, not guessed — re-measure
   and update this whenever #aeHeader's content changes (158px once the issue #29 filter
   toggle moved onto the version-triple row instead of its own line below it). */
body {
  padding-top: 158px;
}

/* "Alphabetic group list" outline/sharp filter (issue #29). Default state (filter ON) is
   this hidden rule — no JS-driven flash-of-unfiltered-content, since the default is already
   correct before the toggle script even runs. #aeGroupList.ae-show-all (added by that script
   when the toggle is switched off) restores them to their normal inline flow. */
#aeGroupList ae-icon5-component[name$="-outline"],
#aeGroupList ae-icon5-component[name$="-sharp"] {
  display: none;
}

#aeGroupList.ae-show-all ae-icon5-component[name$="-outline"],
#aeGroupList.ae-show-all ae-icon5-component[name$="-sharp"] {
  display: inline;
}

#aeIconFilterToggle {
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  min-width: 2.5em;
  background: lightgray;
  color: #333;
  border: 1px solid darkgray;
  border-radius: 10px;
  padding: 2px 10px;
}

/* On/Off read at a glance, not just from the button's own text */
#aeIconFilterToggle[aria-pressed="true"] {
  background: mediumseagreen;
  color: white;
  border-color: seagreen;
}

#aeIconFilterToggle:hover {
  filter: brightness(0.95);
}