/* Calculator (calc.exe) — XP Standard / Scientific */
.app-calc .calc { --b: 36px; --bh: 29px; --g: 5px; --mg: 10px; width: max-content; padding: 6px 7px 9px 7px; display: flex; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; }
.app-calc .calc.sci { --b: 35px; --bh: 29px; --g: 4px; --mg: 14px; }
.app-calc .calc-display {
  height: 21px; line-height: 17px; padding: 1px 4px; background: #fff; display: flex; justify-content: flex-end; white-space: nowrap; overflow: hidden;
  border: 1px solid #7F9DB9; font-size: 11px; margin-bottom: 4px; cursor: var(--cur-arrow); text-overflow: clip; direction: ltr;
}
.app-calc .calc-top { display: flex; align-items: center; gap: var(--mg); }
.app-calc .calc-ind {
  flex: none; width: calc(var(--b) - 8px); height: calc(var(--bh) - 4px); margin: 0 4px; display: grid; place-items: center;
  border: 1px solid; border-color: #ACA899 #fff #fff #ACA899; box-shadow: inset 1px 1px 0 #716F64; background: var(--xp-face);
}
.app-calc .calc-ind.paren { width: 34px; margin: 0; }
.app-calc .calc-edit { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.app-calc .calc-grid { --sp: max(0px, calc(var(--mg) - 2 * var(--g))); display: grid; gap: var(--g); grid-template-columns: var(--b) var(--sp) repeat(5, var(--b)); }
.app-calc .calc.sci .calc-grid { grid-template-columns: var(--b) var(--sp) repeat(3, var(--b)) var(--sp) var(--b) var(--sp) repeat(6, var(--b)); }

/* buttons: XP themed push buttons with coloured captions */
.app-calc .cbtn {
  height: var(--bh); min-width: 0; padding: 0; font: 11px var(--font-ui); color: #0000FF;
  border: 1px solid #003C74; border-radius: 3px; cursor: var(--cur-arrow); position: relative; white-space: nowrap; overflow: hidden;
  background: linear-gradient(to bottom, #FFFFFF 0%, #F9F9F7 30%, #ECEBE6 85%, #D6D0C5 100%);
  touch-action: manipulation;
}
.app-calc .cbtn:hover:not(:disabled) { box-shadow: inset 0 -2px 0 #F8B330, inset 0 2px 0 #FDD889, inset 2px 0 0 #FBCA60, inset -2px 0 0 #FBCA60; }
.app-calc .cbtn:active:not(:disabled), .app-calc .cbtn.pressed:not(:disabled) {
  background: linear-gradient(to bottom, #E5E4DE 0%, #E3E2DB 70%, #F2F1EE 100%); box-shadow: none;
}
.app-calc .cbtn:disabled { color: #A19F92 !important; border-color: #C9C7BA; background: #F4F3EE; }
.app-calc .cbtn.red { color: #FF0000; }
.app-calc .cbtn.blue { color: #0000FF; }
.app-calc .cbtn.navy { color: #000080; }
.app-calc .cbtn.purple { color: #800080; }

/* scientific top rows */
.app-calc .calc-row1, .app-calc .calc-row2 { display: flex; gap: 6px; align-items: center; }
.app-calc .calc-grp {
  display: flex; align-items: center; gap: 10px; height: 25px; padding: 0 8px; flex: 1;
  border: 1px solid #D0D0BF; border-radius: 3px; white-space: nowrap;
}
.app-calc .calc-grp.invhyp { flex: 0 0 auto; gap: 14px; }
.app-calc .calc-row2 .calc-ind { margin: 0; }
.app-calc .calc-row2 .calc-edit { flex: 0 0 auto; width: calc(var(--b) * 6 + var(--g) * 5); margin-left: auto; }

/* narrow screens: let the button grid flex instead of overflowing */
.app-calc .calc.narrow { width: 100%; --b: minmax(0, 1fr); --mg: 8px; --g: 3px; padding: 5px 4px 8px; }
.app-calc .calc.narrow .cbtn { font-size: 10px; letter-spacing: -.3px; }
.app-calc .calc.narrow .calc-row1, .app-calc .calc.narrow .calc-row2 { flex-wrap: wrap; row-gap: 4px; }
.app-calc .calc.narrow .calc-grp { gap: 6px; padding: 0 5px; }
.app-calc .calc.narrow .calc-row2 .calc-edit { width: auto; flex: 1 1 150px; }
.app-calc .calc.narrow .calc-ind { width: 26px; }

/* statistics box */
.app-calc .calc-stats { display: flex; flex-direction: column; height: 100%; padding: 6px; gap: 6px; box-sizing: border-box; }
.app-calc .calc-stat-list { flex: 1; min-height: 60px; }
.app-calc .calc-stat-btns { display: flex; gap: 4px; align-items: center; }
.app-calc .calc-stat-btns .xp-btn { min-width: 38px; padding: 0 4px; }
.app-calc .calc-stat-n { margin-left: auto; }

/* What's This? tooltip */
.calc-tip {
  position: fixed; z-index: 99500; max-width: 260px; padding: 6px 8px; background: #FFFFE1; border: 1px solid #000;
  font: 11px var(--font-ui); white-space: pre-wrap; box-shadow: 2px 2px 3px rgba(0,0,0,.3);
}