/* ==========================================================
   SCIENTIFIC CALCULATOR
   Extracted from calculator-tools.css (lines 3992-4480)
   ========================================================== */
/* ----------------------------------------------------------
   CALCULATOR (BASIC + SCIENTIFIC) — Tool-specific styles
   Phone-native dark theme
   ---------------------------------------------------------- */

/* ===== CALCULATOR CONTAINER ===== */
.ct-calc {
  background   : #000;
  border-radius: var(--ct-r-xl);
  border       : 1px solid rgba(255, 255, 255, .08);
  box-shadow   : 0 18px 44px rgba(0, 0, 0, .45);
  overflow     : hidden;
  user-select  : none;
  -webkit-user-select: none;
  max-width    : 480px;
  margin       : 0 auto;
}

/* ===== MODE TOGGLE ===== */
.ct-calc-toggle {
  display        : flex;
  padding        : 10px 16px 6px;
  gap            : 4px;
  background     : #000;
}

.ct-calc-toggle-btn {
  flex           : 1;
  padding        : 8px 0;
  font-size      : 13px;
  font-weight    : 700;
  font-family    : var(--ct-font);
  text-align     : center;
  color          : #8e8e93;
  background     : transparent;
  border         : none;
  border-radius  : 8px;
  cursor         : pointer;
  transition     : all .25s ease;
  letter-spacing : .3px;
}

.ct-calc-toggle-btn:hover {
  color: #fff;
}

.ct-calc-toggle-active {
  color      : #fff !important;
  background : #2c2c2e !important;
}

/* ===== DISPLAY ===== */
.ct-calc-display {
  position   : relative;
  padding    : 14px 20px 16px;
  min-height : 100px;
  display    : flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  background : #000;
  overflow   : hidden;
}

.ct-calc-history {
  font-size   : 14px;
  font-weight : 500;
  color       : #636366;
  text-align  : right;
  min-height  : 22px;
  max-width   : 100%;
  overflow    : hidden;
  text-overflow: ellipsis;
  white-space : nowrap;
  word-break  : break-all;
  direction   : rtl;
}

.ct-calc-expr {
  font-size   : 38px;
  font-weight : 300;
  color       : #fff;
  text-align  : right;
  line-height : 1.15;
  max-width   : 100%;
  overflow-x  : auto;
  overflow-y  : hidden;
  white-space : nowrap;
  word-break  : break-all;
  transition  : font-size .15s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ct-calc-expr::-webkit-scrollbar {
  display: none;
}

/* Memory badge */
.ct-calc-mem-badge {
  position     : absolute;
  top          : 14px;
  left         : 20px;
  font-size    : 11px;
  font-weight  : 800;
  color        : #fff;
  background   : rgba(255, 149, 0, .3);
  padding      : 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.ct-calc-mem-badge[hidden] { display: none; }

/* ===== BUTTON ROWS ===== */
.ct-calc-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap    : 1px;
  padding: 0 1px;
}

.ct-calc-row-mem {
  /* memory buttons slightly smaller */
}

/* ===== BUTTONS BASE ===== */
.ct-calc-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : 62px;
  font-size      : 22px;
  font-weight    : 500;
  font-family    : var(--ct-font);
  border         : none;
  cursor         : pointer;
  transition     : background .12s ease, transform .1s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
  outline        : none;
  position       : relative;
  overflow       : hidden;
  padding        : 0;
  line-height    : 1;
  border-radius  : 0;
}

.ct-calc-btn::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: rgba(255,255,255,0);
  transition: background .15s ease;
  pointer-events: none;
}

.ct-calc-btn:active {
  transform: scale(.94);
}

.ct-calc-btn:active::after {
  background: rgba(255,255,255,.15);
}

.ct-calc-btn:focus-visible {
  outline: 2px solid rgba(255, 149, 0, .85);
  outline-offset: -2px;
}

/* ===== NUMBER BUTTONS ===== */
.ct-calc-num {
  background : #333333;
  color      : #fff;
  font-size  : 26px;
  font-weight: 400;
}

.ct-calc-num:hover {
  background: #3d3d3d;
}

/* ===== ZERO BUTTON (span 2) ===== */
.ct-calc-zero {
  grid-column    : span 2;
  justify-content: flex-start;
  padding-left   : 28px;
  border-radius  : 0;
}

/* ===== OPERATOR BUTTONS ===== */
.ct-calc-op {
  background : #ff9500;
  color      : #fff;
  font-size  : 30px;
  font-weight: 500;
}

.ct-calc-op:hover {
  background: #ffaa33;
}

.ct-calc-op.ct-calc-op-active {
  background: #fff;
  color     : #ff9500;
}

/* ===== EQUALS BUTTON ===== */
.ct-calc-eq {
  background : #ff9500;
  color      : #fff;
  font-size  : 30px;
  font-weight: 500;
}

.ct-calc-eq:hover {
  background: #ffaa33;
}

/* ===== TOP ROW BUTTONS (AC, DEL, %) ===== */
.ct-calc-top {
  background : #a5a5a5;
  color      : #000;
  font-size  : 20px;
  font-weight: 600;
}

.ct-calc-top:hover {
  background: #b8b8b8;
}

/* ===== FUNCTION BUTTONS (Scientific) ===== */
.ct-calc-fn {
  background    : #2c2c2e;
  color         : #fff;
  font-size     : 16px;
  font-weight   : 500;
  letter-spacing: .2px;
}

.ct-calc-fn:hover {
  background: #3a3a3c;
}

/* 2nd button active state */
.ct-calc-2nd-btn.ct-calc-2nd-active {
  background: #636366;
  color     : #000;
  font-weight: 700;
}

/* DEG/RAD button */
.ct-calc-deg-btn {
  font-size  : 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}

/* ===== MEMORY BUTTONS ===== */
.ct-calc-mem {
  background : #1c1c1e;
  color      : #8e8e93;
  font-size  : 14px;
  font-weight: 700;
  height     : 40px;
}

.ct-calc-mem:hover {
  color: #fff;
}

/* ===== SCIENTIFIC PANEL ===== */
.ct-calc-sci {
  border-top: 1px solid #1c1c1e;
}

.ct-calc-sci[hidden] { display: none; }

/* ===== FIRST/LAST ROW ROUNDING ===== */
.ct-calc-main .ct-calc-row:last-child .ct-calc-zero {
  border-bottom-left-radius: var(--ct-r-xl);
}

.ct-calc-main .ct-calc-row:last-child .ct-calc-eq {
  border-bottom-right-radius: var(--ct-r-xl);
}

/* ===== BUTTON RIPPLE EFFECT ===== */
@keyframes ctCalcRipple {
  0%   { transform: scale(0); opacity: .5; }
  100% { transform: scale(4); opacity: 0; }
}

.ct-calc-btn .ct-calc-ripple {
  position      : absolute;
  width         : 50px;
  height        : 50px;
  border-radius : 50%;
  background    : rgba(255,255,255,.3);
  transform     : scale(0);
  animation     : ctCalcRipple .5s ease-out;
  pointer-events: none;
}

/* ===== 2ND SWAP BUTTON LABEL CHANGE ===== */
.ct-calc-2nd-swap {
  position: relative;
}

.ct-calc-2nd-swap .ct-calc-2nd-label {
  position  : absolute;
  top       : 4px;
  left      : 50%;
  transform : translateX(-50%);
  font-size : 9px;
  color     : #ff9500;
  font-weight: 700;
  opacity   : 0;
  transition: opacity .2s ease;
}

.ct-calc-2nd-on .ct-calc-2nd-swap .ct-calc-2nd-label {
  opacity: 1;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
  .ct-calc-btn {
    height   : 58px;
    font-size: 20px;
  }

  .ct-calc-num {
    font-size: 24px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 28px;
  }

  .ct-calc-fn {
    font-size: 14px;
  }

  .ct-calc-display {
    padding   : 14px 18px 16px;
    min-height: 100px;
  }

  .ct-calc-expr {
    font-size: 32px;
  }

  .ct-calc-history {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .ct-calc-btn {
    height   : 54px;
    font-size: 18px;
  }

  .ct-calc-num {
    font-size: 22px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 26px;
  }

  .ct-calc-fn {
    font-size: 13px;
    height   : 48px;
  }

  .ct-calc-mem {
    font-size: 12px;
    height   : 36px;
  }

  .ct-calc-top {
    font-size: 18px;
  }

  .ct-calc-display {
    padding   : 12px 14px 14px;
    min-height: 90px;
  }

  .ct-calc-expr {
    font-size: 30px;
  }

  .ct-calc-history {
    font-size: 13px;
  }

  .ct-calc-zero {
    padding-left: 22px;
  }

  .ct-calc-toggle {
    padding: 8px 10px 4px;
  }

  .ct-calc-toggle-btn {
    font-size: 12px;
    padding  : 6px 0;
  }

  .ct-calc-deg-btn {
    font-size: 12px !important;
  }
}

/* Very small */
@media (max-width: 360px) {
  .ct-calc-btn {
    height   : 48px;
    font-size: 16px;
  }

  .ct-calc-num {
    font-size: 20px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 22px;
  }

  .ct-calc-fn {
    font-size: 12px;
    height   : 42px;
  }

  .ct-calc-mem {
    font-size: 11px;
    height   : 32px;
  }

  .ct-calc-expr {
    font-size: 32px;
  }

  .ct-calc-display {
    min-height: 80px;
    padding   : 10px 12px;
  }
}

/* Desktop — cap calculator width for aesthetics */
@media (min-width: 769px) {
  .ct-calc {
    max-width    : 420px;
    margin       : 0 auto;
    border-radius: var(--ct-r-xl);
  }

  .ct-calc-main .ct-calc-row:last-child .ct-calc-zero {
    border-bottom-left-radius: var(--ct-r-xl);
  }

  .ct-calc-main .ct-calc-row:last-child .ct-calc-eq {
    border-bottom-right-radius: var(--ct-r-xl);
  }

  .ct-calc-btn {
    height   : 64px;
    border-radius: 0;
  }

  /* Add slight rounding on desktop for premium feel */
  .ct-calc-row {
    gap: 2px;
    padding: 0 2px;
  }

  .ct-calc-btn {
    border-radius: 4px;
    margin: 1px 0;
  }
}