/* The ?debug screen picker. */

#debugPanel {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  /* Right-aligned contents: the panel is pinned by its top-right corner,
     so as the list grows on open the toggle stays put in the corner and
     the panel extends left/down from it (left-aligned, the toggle got
     pushed along as the list widened). */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 9999;
  /* Near-opaque now that the chapter list is tall enough to sit over the
     screen's own text. */
  background: rgba(0, 0, 0, 0.88);
  padding: 0.4rem;
  border-radius: 0.4rem;
}

#debugPanel button {
  font-family: monospace;
  font-size: 0.9rem;
  width: 2rem;
  height: 2rem;
  background: #222222;
  color: #ffffff;
  border: 1px solid #666666;
  cursor: pointer;
}

#debugPanel button:hover {
  background: #444444;
}

/* Grouped into the story's chapters (see DEBUG_CHAPTERS in script.js):
   a small label, then that chapter's screen buttons. Scrolls if the list
   ever gets taller than the screen. */
#debugGrid {
  overflow: hidden;
  margin-top: 0.4rem;
  transition: width 0.35s ease, height 0.35s ease, margin-top 0.35s ease;
}

#debugGridInner {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 11.5rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Chapters fade/slide in one after another once the box has started
   growing (--i set per heading/row in script.js); on close they just fade
   out together. */
#debugGridInner > * {
  opacity: 0;
  transform: translateY(-0.3rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#debugPanel:not(.debugPanel--collapsed) #debugGridInner > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition-delay: calc(80ms + var(--i) * 25ms);
}

#debugPanel .debug-chapter {
  margin: 0.35rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #dddddd;
}

#debugPanel .debug-chapter:first-child {
  margin-top: 0;
}

/* Screens with photos (PHOTO_SCREENS in script.js): a soft warm-gold
   edge + tint - findable at a glance without shouting. */
#debugPanel button.debug-screen--photos {
  background: #2f2a1f;
  border-color: #b8995a;
  color: #f3e4bf;
}

#debugPanel button.debug-screen--photos:hover {
  background: #453c2a;
}

/* Light theme, on the white-backdrop screens 5-35 (see themeDebugPanel
   in script.js): white panel, black lettering, and a light version of the
   photo-screen gold tint. */
#debugPanel {
  transition: background 0.6s ease;
}

/* Theme applied instantly while a (re)loaded page sets itself up - see
   themeDebugPanel in script.js. */
#debugPanel.debugPanel--no-anim,
#debugPanel.debugPanel--no-anim * {
  transition: none !important;
}

#debugPanel.debugPanel--light {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#debugPanel.debugPanel--light button {
  background: #ffffff;
  color: #000000;
  border-color: #bbbbbb;
}

#debugPanel.debugPanel--light button:hover {
  background: #eeeeee;
}

#debugPanel.debugPanel--light .debug-chapter {
  color: #222222;
}

#debugPanel.debugPanel--light button.debug-screen--photos {
  background: #f7eed8;
  border-color: #b8995a;
  color: #5a4520;
}

#debugPanel.debugPanel--light button.debug-screen--photos:hover {
  background: #efe1bd;
}

/* Chapter note: a small circled "i" after the label (see
   makeDebugNoteIcon in script.js) and its bubble, which sits to the LEFT
   of the panel, level with the icon, with a little pointer toward it.
   Follows the panel's dark/light theme. */
#debugPanel .debug-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.35rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.65rem;
  line-height: 1;
  vertical-align: 0.1em;
  opacity: 0.75;
  cursor: pointer;
}

#debugPanel .debug-note-icon:hover {
  opacity: 1;
}

#debugPanel .debug-note {
  position: absolute;
  right: calc(100% + 0.6rem);
  transform: translateY(-50%);
  width: max-content;
  max-width: min(14rem, 60vw);
  padding: 0.45rem 0.65rem;
  border-radius: 0.4rem;
  background: #1c1c1c;
  border: 1px solid #555555;
  color: #eeeeee;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
  pointer-events: none;
}

#debugPanel .debug-note::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 0.35rem solid transparent;
  border-left-color: #555555;
}

/* Narrow phones: just above the icon, spanning the panel, pointer at the
   bottom aimed down at the icon. */
#debugPanel .debug-note.debug-note--above {
  right: 0.4rem;
  left: 0.4rem;
  width: auto;
  max-width: none;
  transform: translateY(-100%);
}

#debugPanel .debug-note.debug-note--above::after {
  top: 100%;
  /* --note-arrow-x is the icon's center, relative to the panel (set in
     showDebugNote); the bubble itself starts 0.4rem in. */
  left: calc(var(--note-arrow-x, 2rem) - 0.4rem);
  transform: translateX(-50%);
  border-left-color: transparent;
  border-top-color: #555555;
}

#debugPanel.debugPanel--light .debug-note.debug-note--above::after {
  border-left-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.96);
}

#debugPanel.debugPanel--light .debug-note {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  color: #222222;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#debugPanel.debugPanel--light .debug-note::after {
  border-left-color: rgba(255, 255, 255, 0.96);
}

#debugPanel .debug-chapter__screens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Collapsed (the default - see script.js): only the toggle button shows,
   so the panel is a single 2rem square instead of the full grid sitting on
   top of whatever's underneath. */
#debugPanel.debugPanel--collapsed #debugGrid {
  width: 0;
  height: 0;
  margin-top: 0;
}

/* The screen we're on (see markCurrentScreen in debug.js): its button
   flips to the opposite colors with a soft glow, and its chapter heading
   brightens. Hover variants listed so hovering doesn't dim it, and placed
   after every theme/photo rule above so it always wins. */
#debugPanel button.debug-screen--current,
#debugPanel button.debug-screen--current:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
  box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.55);
}

#debugPanel button.debug-screen--photos.debug-screen--current,
#debugPanel button.debug-screen--photos.debug-screen--current:hover {
  background: #f3e4bf;
  border-color: #f3e4bf;
  color: #2f2a1f;
  box-shadow: 0 0 0.5rem rgba(243, 228, 191, 0.6);
}

#debugPanel.debugPanel--light button.debug-screen--current,
#debugPanel.debugPanel--light button.debug-screen--current:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);
}

#debugPanel.debugPanel--light button.debug-screen--photos.debug-screen--current,
#debugPanel.debugPanel--light button.debug-screen--photos.debug-screen--current:hover {
  background: #5a4520;
  border-color: #5a4520;
  color: #f7eed8;
  box-shadow: 0 0 0.5rem rgba(184, 153, 90, 0.6);
}

#debugPanel .debug-chapter.debug-chapter--current {
  color: #ffffff;
  font-weight: 600;
}

#debugPanel.debugPanel--light .debug-chapter.debug-chapter--current {
  color: #000000;
}

/* The toggle's two glyphs, stacked in the same spot: "#" while closed,
   an X while open, rotating/crossfading into each other. */
#debugToggle {
  position: relative;
}

#debugPanel .debug-toggle__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.35s ease;
}

#debugPanel .debug-toggle__glyph--close {
  font-size: 1.25rem;
  opacity: 1;
  transform: rotate(0deg);
}

#debugPanel .debug-toggle__glyph--open {
  opacity: 0;
  transform: rotate(-90deg);
}

#debugPanel.debugPanel--collapsed .debug-toggle__glyph--close {
  opacity: 0;
  transform: rotate(90deg);
}

#debugPanel.debugPanel--collapsed .debug-toggle__glyph--open {
  opacity: 1;
  transform: rotate(0deg);
}

/* A ?debug&screen=N link to a white screen (5-35): the backdrop starts
   already white instead of black, so the load doesn't flash black first.
   Set from the inline script in index.html's <head>, cleared by debug.js
   once the jump has put .color-wipe.active on. */
html.debug-jump--light .color-wipe {
  background-position: 0% 0%;
  transition: none;
}