/* GCH character recommendation disclosure and horizontal overflow protection.
   Loaded after character_hybrid.css; does not alter existing animations. */

/* Unlike overflow:hidden, overflow:clip creates no intermediate scroll container:
   sticky chapter navigation therefore remains functional. */
html:has(> body.theme-comic-hybrid),
body.theme-comic-hybrid {
  overflow-x: clip;
}

/* 100vw includes the scrollbar gutter in some browsers; use container width. */
body.theme-comic-hybrid .gch-h-viewport-wallpaper {
  width: 100% !important;
}
body.theme-comic-hybrid .gch-hybrid {
  width: min(2900px, calc(100% - clamp(24px, 3vw, 100px)));
}
@media (max-width:710px) {
  body.theme-comic-hybrid .gch-hybrid {
    width: calc(100% - 24px);
  }
}

/* Visibility is controlled only after JS initialises. Without JS all entries stay visible. */
.gch-hybrid [data-gch-expand-list] > [hidden] {
  display: none !important;
}
.gch-hybrid .gch-rec-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 42px;
  margin: 16px 0 3px;
  padding: 8px 19px;
  background: #f9d15d;
  color: #14233d;
  border: 3px solid #14233d;
  border-radius: 4px;
  box-shadow: 3px 4px 0 #14233d;
  font: 900 13px/1.25 'Trebuchet MS',Arial,sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .16s, translate .16s, box-shadow .16s;
}
.gch-hybrid .gch-rec-expand-button[hidden] {
  display: none !important;
}
.gch-hybrid .gch-rec-expand-button:hover {
  background: #bff0e8;
  translate: 1px 1px;
  box-shadow: 2px 3px 0 #14233d;
}
.gch-hybrid .gch-rec-expand-button:focus-visible {
  outline: 3px solid #2e67d9;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .gch-hybrid .gch-rec-expand-button { transition: none; }
}