/* Styling specific to expansion.html's binomial expansion practice tool - loaded
   alongside src/portal.css (which provides the shared reset/header/home-link). */

.expansion-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 8px 20px 40px;
}

.expansion-main,
.expansion-main * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* suppress iOS's long-press text-selection magnifier */
}

/* Samsung Internet's font-boosting/accessibility text-scaling doesn't reliably pick up
   text-size-adjust set only on html/body for deeply-nested generated content (unlike
   Chrome-for-Android, which is fine either way) - set it explicitly on every KaTeX
   node too, since that's what was blowing up to a huge font size on that browser. */
.expansion-question,
.expansion-step-inner,
.expansion-question *,
.expansion-step-inner * {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.expansion-controls {
  display: flex;
  gap: 12px;
  touch-action: manipulation; /* disabled buttons don't reliably honour their own touch-action in Safari - the tap gesture falls through to this container instead, still needs it set to stop native double-tap zoom */
}

.expansion-controls-bottom.hidden {
  display: none;
}

.expansion-controls button {
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid #22e8f0;
  background: #171a28;
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation; /* stop iOS Safari's rapid-tap native zoom on this button */
}

.expansion-controls button.hidden {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .expansion-controls button:hover {
    background: #2a2f47;
  }
}

/* Narrow/mobile-portrait screens: drop the home-link's leading arrow to save header width. */
@media (max-width: 600px) {
  .home-link-arrow {
    display: none;
  }
}

.expansion-question {
  width: 100%;
  max-width: min(2200px, 96vw);
  color: #ffffff;
  font-size: clamp(32px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.3em;
  row-gap: 0.05em;
  padding-top: 0.15em; /* KaTeX's outer exponent can rise above the line box and get clipped otherwise */
  touch-action: manipulation; /* stop a rapid tap here misfiring as a native double-tap-zoom */
}

/* Last-resort safety net: if the bracket alone is ever too wide even on its own flex line
   (shouldn't happen in practice - it fits fine even without the "Expand" label competing for
   width). No overflow property set at all (unlike the old scroll fallback) - overflow-x and
   overflow-y can't be set independently (the CSS spec forces "auto" on both once either one
   isn't "visible"), which was turning a fraction's harmless vertical ink overflow into a
   spurious scrollbar even when nothing was actually overflowing horizontally. Handled via a
   JS font-shrink instead (fitBracketToQuestion in expansion.js) so both axes stay truly visible. */
.expansion-question-bracket {
  max-width: 100%;
}

/* KaTeX's own display-mode margin (1em top/bottom) becomes huge at this font-size -
   spacing here is already handled by .expansion-main's flex gap. */
.expansion-question .katex-display,
.expansion-step-inner .katex-display {
  margin: 0;
}

.expansion-step-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 22px;
}

.expansion-step-row p {
  margin: 0;
}

.expansion-step-row canvas {
  max-width: 100%;
}

.expansion-steps {
  width: 100%;
  max-width: min(2200px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.expansion-step-box {
  background: rgba(18, 20, 32, 0.96);
  border: 1px solid #22e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 8px rgba(34, 232, 240, 0.5);
}

.expansion-step-final {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.expansion-step-inner {
  color: #ffffff;
  font-size: clamp(22px, 2.4vw, 30px);
  padding-top: 0.15em; /* KaTeX's outer exponent can rise above the line box and get clipped otherwise */
  touch-action: manipulation; /* stop a rapid tap here misfiring as a native double-tap-zoom */
}

/* Single, indivisible expression (no internal wrap points, e.g. the coloured question restated) -
   old horizontal-scroll/shrink-to-fit fallback. */
.expansion-step-inner--scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Several terms joined by +/- - wrap onto extra lines on a narrow screen instead of ever needing
   horizontal scroll (also sidesteps a Samsung Internet bug where an overflowing overflow-x:auto
   KaTeX box balloons to a huge font size - see repo memory notes for the full diagnosis). */
.expansion-step-inner--wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.35em;
  row-gap: 0.15em;
}

/* Custom scrollbar for the horizontally-scrollable single-expression box, instead of the plain
   native one, when it's too wide to fit even after font-shrinking (the multi-term steps and
   question title never scroll - they wrap onto extra lines instead). */
.expansion-step-inner--scroll {
  scrollbar-width: thin;
  scrollbar-color: #22e8f0 #171a28;
}

.expansion-step-inner--scroll::-webkit-scrollbar {
  height: 10px;
}

.expansion-step-inner--scroll::-webkit-scrollbar-track {
  background: #171a28;
  border-radius: 6px;
}

.expansion-step-inner--scroll::-webkit-scrollbar-thumb {
  background: #22e8f0;
  border-radius: 6px;
  border: 2px solid #171a28;
}

.expansion-step-inner--scroll::-webkit-scrollbar-thumb:hover {
  background: #6ff2ff;
}