/* MathQuill styling */
.mathquill-mathfield .mq-root-block {
    font-size: 3rem; /* Adjust the size as needed */
}

/* MathQuill root index styling */
.math-field > span.mq-root-block > sup > span {
    font-size: 0.8em;
    position: relative;
    top: 1px;
    left: 3px;
}

/* MathQuill exponent styling */
.mq-sup > span {
    font-size: 0.7em;
}

.problem__form__keyboard-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
    justify-content: center; /* Center the keyboard-container */
}

/* Virtual Keyboard Styles */
.keyboard-container {
    display: flex;
    gap: 0;
    align-items: flex-start;
    width: fit-content; /* Shrink to content */
}

/* The toggle arrow button */
#keyboard-toggle {
    cursor: pointer;
    padding: 10px 0 10px 10px;
    background-color: #54689d;
    border-radius: 6px 0 0 6px;
    font-size: 20px;
    color: white;
}

/* The keyboard container */
#keyboard {
    /* background-color: lightseagreen; */
    background-color: #54689d;
    border-radius: 0 6px 6px 6px;
    padding: 10px 10px 5px 10px;
    width: fit-content; /* Allow JavaScript to set fixed width */
    min-width: 90px;
}

/* Container for all key rows */
#keyboard-rows {
    margin-top: 0;
}

/* Each keyboard row */
.keyboard-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(30px, 40px)); /* Tight columns */
    gap: 5px;
    margin-bottom: 5px;
}

/* Hide rows when not active */
.keyboard-row[style*="display: none"] {
    display: none !important;
}

.math-button {
    font-family: "Arial", sans-serif;
    padding: 4px 2px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #eee;
    color: black;
    cursor: pointer;
    text-align: center;
    box-shadow: 4px 4px 4px #030710;
    box-sizing: border-box;
    min-width: 30px;
    min-height: 30px;
}

#keyboard-rows > div:nth-child(2) > button:nth-child(n+5):nth-child(-n+6) {
    font-size: 20px;
}

#keyboard-rows > div:nth-child(2) > button:nth-child(5) {
    font-weight: lighter;
}

#keyboard-rows > div:nth-child(3) > button:nth-child(n+1):nth-child(-n+6) {
    font-size: 18px;
}

#keyboard-rows > div:nth-child(4) > button:nth-child(n+1):nth-child(-n+6) {
    font-size: 14px;
    font-weight: bold;
}

/* Scale single-character buttons by 1.5x */
#keyboard-rows > div[data-row="1"] > button:nth-child(4), /* \infty */
#keyboard-rows > div[data-row="1"] > button:nth-child(5), /* \pi */
#keyboard-rows > div[data-row="1"] > button:nth-child(6), /* \theta */
#keyboard-rows > div[data-row="2"] > button:nth-child(1), /* \cup */
#keyboard-rows > div[data-row="2"] > button:nth-child(2), /* \cap */
#keyboard-rows > div[data-row="2"] > button:nth-child(3), /* \neq */
#keyboard-rows > div[data-row="2"] > button:nth-child(4) /* \pm */ {
  font-size: 14px; /* 1.5 x 12px */
  padding: 1px 1px; /* Adjusted padding to fit larger symbols */
}

.math-button:hover {
    background-color: #0056b3;
    color: white;
    transition: background-color 0.3s, color 0.3s;
}

.keyboard-container[hidden],
.keyboard-container[inert] {
    display: none !important;
}

/* Let hover popouts overflow their grid cell cleanly */
/* ====== Lightweight, non-obtrusive pop ====== */

/* allow the pop to escape the grid without clipping */
#keyboard,
#keyboard-rows,
.keyboard-row {
  overflow: visible;
  position: relative;
}

/* tunables */
#keyboard {
  --vk-pop-scale: 1.3;   /* smaller enlargement */
  --vk-pop-dy: -6px;      /* lift upward so it doesn't hide the row below */
  --vk-pop-dx: 0;         /* no horizontal shift */
  --vk-shadow-rest: 4px 4px 4px rgba(0,0,0,.30);
  --vk-shadow-pop: 0 8px 14px rgba(0,0,0,.28);
}

/* base button: keep your original styles, just smoother motion */
.math-button {
  position: relative;
  z-index: 0;
  box-shadow: var(--vk-shadow-rest);
  transform: translateZ(0);
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease;
  will-change: transform;
  /* background-color: darkgoldenrod; */
  background-image: linear-gradient(#b4826f, #eac8bc);
  color: black;
  font-weight: 700;
}

/* subtle pop on hover/focus — no background override here */
.math-button:is(:hover, :focus-visible) {
  /* transform: translateY(var(--vk-pop-dy)) scale(var(--vk-pop-scale)); */
  transform: translateY(calc(var(--vk-pop-dy))) translateX(var(--vk-pop-dx)) scale(var(--vk-pop-scale));
  z-index: 5; /* float above neighbors */
  box-shadow: var(--vk-shadow-pop);
  filter: saturate(1.05);
}

/* pressed state: tiny squish for click feedback */
.math-button:active {
  transform:
    translateY(calc(var(--vk-pop-dy) + 2px))
    scale(calc(var(--vk-pop-scale) * 0.98));
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .math-button { transition: none !important; }
}