/* ------------------------------------------------------------
       Layout – the calculator must fit inside the viewport.
       ------------------------------------------------------------ */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* no outer scrollbars */
}

.calculator {
  max-width: 460px; /* never wider than a phone screen */
  width: 100%;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.calculator:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.btn {
  transition: all 0.2s ease;
  transform: translateY(0);
}
.btn:active {
  transform: translateY(2px);
}

.display {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.scientific-btn {
  transition: all 0.3s ease;
}
.scientific-btn:hover {
  background-color: #4b5563;
}

/* LaTeX line – only horizontal scroll if needed */
#mathDisplay {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cprt {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 12px;
  padding: 5px;
  color: #d2d2d270;
  background-color: #4b5563;
}
.cprt a {
  text-decoration: none;
  color: #d2d2d270;
  margin-left: 4px;
  margin-right: 4px;
}
/* Mobile – make touch targets a little larger */
@media (max-width: 640px) {
  .btn {
    padding: 0.75rem 0;
    font-size: 1rem;
  }
  .cprt {
    font-size: 9px;
  }
}
/* ------------------------------------------------------------
   WebKit scrollbar – thin + transparent track
   ------------------------------------------------------------ */

/* The whole scrollbar (both vertical & horizontal) */
::-webkit-scrollbar {
  width: 6px; /* vertical scrollbar width */
  height: 6px; /* horizontal scrollbar height */
}

/* The “track” – the area the thumb slides in */
::-webkit-scrollbar-track {
  background: transparent; /* make it invisible */
  border-radius: 3px; /* round the ends */
}

/* The draggable “thumb” */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25); 
  border-radius: 3px;
}

/* Optional – make the thumb a little darker when hovered */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Optional – make the thumb a bit more visible while scrolling */
::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------
   Firefox fallback (thin & transparent track)
   ------------------------------------------------------------ */
* {
  scrollbar-width: thin; /* “auto” | “thin” | “none” */
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}