/* Fast Phonics sidebars: two fixed vertical bars (left + right), styled after
   the Alphatrax VRM sidebars. Left: Home, Back, Refresh. Right: Close, Zoom,
   Correct/Wrong. Previous/Next are tabs on the bars' inner edges. */

:root { --fp-sb: clamp(36px, 8.5vh, 110px); }   /* width scales with screen size */

.fp-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;   /* not height:100vh — vh can undershoot the real viewport in a
                  WebView, leaving a gap below the bar */
  width: var(--fp-sb);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;       /* Home/Back sit at the top */
  gap: clamp(1px, 0.4vh, 5px);
  padding: clamp(2px, 0.7vh, 7px) 0;
  background: rgba(20, 20, 20, 0.8);   /* translucent; shows the page behind */
  z-index: 250;
  box-sizing: border-box;
}
.fp-sidebar.left  { left: 0; }
.fp-sidebar.right { right: 0; }

.fp-sidebar-btn {
  width: 70%;
  aspect-ratio: 1 / 1;
  padding: 8%;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 0.15s, transform 0.12s;
}
.fp-sidebar-btn svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fp-sidebar-btn img { width: 100%; height: 100%; display: block; object-fit: contain; }
.fp-sidebar-btn:hover  { background: rgba(255, 255, 255, 0.10); }
.fp-sidebar-btn:active { background: rgba(255, 255, 255, 0.06); transform: scale(0.92); }

.fp-sidebar-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* Home, Back, Refresh on the left, Close + Zoom on the right: larger, at the top */
.fp-sidebar-btn.fp-home,
.fp-sidebar-btn.fp-back,
.fp-sidebar-btn.fp-refresh,
.fp-sidebar-btn.fp-close,
.fp-sidebar-btn.fp-zoom { width: 90%; }

/* Correct / Wrong: vertically centred on the right bar */
.fp-cw {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fp-sb) * 0.2);
}
.fp-cw .fp-sidebar-btn { width: 80%; padding: 0; }

/* Page nav (Prev/Next): Alphatrax's room tabs, hanging off the inner edge of
   each bar at mid height. Proportions are Alphatrax's 31x79 on a 100px bar. */
.fp-nav-handle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--fp-sb) * 0.31);
  height: calc(var(--fp-sb) * 0.79);
  padding: 0;
  border: none;
  background: rgba(20, 20, 20, 0.8);   /* the bars' own colour */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  transition: background 0.15s;
  touch-action: manipulation;
}
.fp-nav-handle:hover  { background: rgba(34, 34, 34, 0.8); }
.fp-nav-handle:active { background: rgba(20, 20, 20, 0.8); }
.fp-nav-handle.is-disabled { display: none; }
.fp-nav-handle-prev { left: var(--fp-sb);  border-radius: 0 10px 10px 0; }
.fp-nav-handle-next { right: var(--fp-sb); border-radius: 10px 0 0 10px; }
.fp-nav-chevron { height: 55%; width: auto; }
.fp-nav-chevron.flipped { transform: scaleX(-1); }