/* GATE Virtual Calculator — faithful port of the Android app's UI (activity_calculator.xml) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f2f2f2;
  overscroll-behavior: none;
}
#app {
  display: flex; flex-direction: column;
  height: 100dvh; width: 100%;
  padding: 2px; gap: 0;
  user-select: none; -webkit-user-select: none;
}

/* displays */
.display {
  background: #fff; color: #000; text-align: right;
  border: 1px solid #000; border-radius: 2px;
  overflow: hidden; white-space: nowrap;
}
#expr {
  flex: 1 1 0; min-height: 0;
  font-size: 28px; line-height: 1.15;
  padding: 2px 6px;
  display: flex; align-items: flex-end; justify-content: flex-end;
}
#inputRow { flex: 1 1 0; min-height: 0; display: flex; flex-direction: row; }
#mem {
  flex: 0 0 10%; width: 10%;
  font-size: 20px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0;
}
#input {
  flex: 1 1 90%; width: 90%;
  font-size: 28px; line-height: 1.15;
  padding: 2px 6px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* rows */
.row { display: flex; flex-direction: row; flex: 1 1 0; min-height: 0; }
#bottom { display: flex; flex-direction: row; flex: 2 2 0; min-height: 0; }
#keypad { display: flex; flex-direction: column; flex: 10 1 0; min-height: 0; }
#keypad .row { flex: 1 1 0; }

/* buttons — gradient face mirrors drawable/back.xml */
.btn {
  flex: 1 1 0; min-width: 0; min-height: 0;
  margin: 1px; padding: 0;
  font-size: 17px; color: #000;
  background: linear-gradient(270deg, #ededed 0%, #b0b0b0 100%);
  border: 1px solid #8c8c8c; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.btn:active { background: linear-gradient(270deg, #f0f0f0 0%, #cccccc 100%); }
.btn.num { font-size: 20px; }
.btn sup, .btn sub { font-size: 0.68em; line-height: 0; }
.btn sup { vertical-align: super; }
.btn sub { vertical-align: sub; }
.btn.wide2 { flex-grow: 2; }
.btn.red {
  color: #fff;
  background: linear-gradient(270deg, #ef4444 0%, #992f2f 100%);
  border-color: #8c8c8c; border-radius: 6px;
  font-size: 20px;
}
.btn.red:active { background: linear-gradient(270deg, #fc5656 0%, #d14141 100%); }

/* equals */
#equals {
  flex: 1 1 0; width: 100%; min-height: 0;
  margin: 1px; padding: 0;
  font-size: 35px; color: #fff;
  background: linear-gradient(270deg, #2ecc71 0%, #1d7a45 100%);
  border: 1px solid #8c8c8c; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#equals:active { background: linear-gradient(270deg, #35e680 0%, #2aad62 100%); }

/* deg/rad radio group */
#modeGroup { flex: 3 1 0; display: flex; flex-direction: row; background: #f2f2f2; }
.radio {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  background: #f2f2f2; position: relative; cursor: pointer;
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio span {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #000;
}
.radio input:checked + span { background: #d0d0d0; font-weight: 600; }

/* error flash */
.display.err { color: #b00000; }