/* Calculator's scientific view. The standard view's rules live in apps.css (.calc-*). */
.calc-std { display: flex; flex-direction: column; gap: 8px; }
.calc-key.purple { color: #800080; }
.calc-key:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilite); }
.calc-paren { font-weight: normal; }

.calc-sci { display: flex; flex-direction: column; gap: 6px; }
.calc-modes { display: flex; gap: 6px; }
.calc-group {
  display: flex; align-items: center; gap: 2px 10px; flex-wrap: wrap;
  box-shadow: var(--etched); padding: 4px 8px; min-height: 26px;
}
.calc-modes > .calc-group { flex: 1; }
.calc-group label { display: inline-flex; align-items: center; white-space: nowrap; }
.calc-group input { margin-right: 4px; }

/* Inv/Hyp, the "(=n" and memory boxes, then Backspace/CE/C. */
.calc-sci-top { display: grid; grid-template-columns: auto 36px 36px repeat(3, 1fr); gap: 6px; align-items: center; }
.calc-sci-top .calc-mem { width: 36px; }
.calc-mem-slot { display: none; }

/* Eleven columns: statistics | functions | memory | digits and operators. */
.calc-sci-keys { display: grid; grid-template-columns: repeat(11, 36px); gap: 6px 4px; }
.calc-sci-keys > :nth-child(11n + 1), .calc-sci-keys > :nth-child(11n + 4), .calc-sci-keys > :nth-child(11n + 5) { margin-right: 8px; }

/* The Statistics Box. */
.calc-stat { display: flex; flex-direction: column; gap: 8px; padding: 8px; width: 260px; max-width: calc(100vw - 24px); }
.calc-stat-list { height: 120px; font-variant-numeric: tabular-nums; text-align: right; }
.calc-stat-btns { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; }
.calc-stat-btns .calc-key { height: 24px; color: #0000ff; }
.calc-stat-n { padding-left: 6px; min-width: 42px; }

/* A maximized calculator (phones) scrolls rather than spilling past the window. */
.calc-win.max .win-body { flex: 1; min-height: 0; overflow: auto; }

@media (max-width: 640px) {
  .calc-win.max .calc[data-view="scientific"] { padding: 6px; }
  .calc-modes { flex-direction: column; gap: 4px; }
  .calc-sci-top { grid-template-columns: auto 32px 32px repeat(3, 1fr); gap: 4px; }
  .calc-sci-top .calc-mem { width: auto; }
  .calc-sci-top .calc-key.wide { font-size: 11px; }
  .calc-sci-keys { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px 2px; }
  .calc-sci-keys > :nth-child(11n + 1), .calc-sci-keys > :nth-child(11n + 4), .calc-sci-keys > :nth-child(11n + 5) { margin-right: 3px; }
  .calc-sci-keys .calc-key { height: 34px; font-size: 11px; letter-spacing: -.3px; }
}

/* 10 and 11: the same keys in the flat look of the new Calculator. */
:is([data-win="10"], [data-win="11"]) .calc { background: #e6e6e6; gap: 2px; padding: 4px; }
:is([data-win="10"], [data-win="11"]) .calc .calc-display { height: 64px; padding: 4px 10px; border: 0; box-shadow: none; background: none; font: 300 40px/56px var(--font-ui); }
:is([data-win="10"], [data-win="11"]) .calc-std { gap: 2px; }
:is([data-win="10"], [data-win="11"]) .calc-top { grid-template-columns: 48px repeat(3, 1fr); gap: 2px; }
:is([data-win="10"], [data-win="11"]) .calc-mem { box-shadow: none; height: 40px; color: #666; }
:is([data-win="10"], [data-win="11"]) .calc-keys { grid-template-columns: repeat(6, 48px); gap: 2px; }
:is([data-win="10"], [data-win="11"]) .calc-keys > :nth-child(6n + 1) { margin-right: 0; }
:is([data-win="10"], [data-win="11"]) .calc-key { height: 40px; border: 0; box-shadow: none; background: #f0f0f0; color: #000; font-size: 14px; padding: 0; }
:is([data-win="10"], [data-win="11"]) .calc-keys > :is(:nth-child(6n + 2), :nth-child(6n + 3), :nth-child(6n + 4)) { background: #fafafa; font-weight: 600; font-size: 16px; }
:is([data-win="10"], [data-win="11"]) .calc-key:hover:not(:disabled) { background: #d6d6d6; }
:is([data-win="10"], [data-win="11"]) .calc-key:active:not(:disabled) { background: #bdbdbd; padding: 0; }
:is([data-win="10"], [data-win="11"]) .calc-key[aria-label="="] { background: #8abae0; }
:is([data-win="10"], [data-win="11"]) .calc-key[aria-label="="]:hover { background: #4b9ae0; }
[data-win="11"] .calc { background: #f3f3f3; gap: 4px; }
[data-win="11"] :is(.calc-keys, .calc-top) { gap: 3px; }
[data-win="11"] .calc-key { border-radius: 4px; box-shadow: 0 0 0 1px #e5e5e5; }
[data-win="11"] .calc-key[aria-label="="] { background: #0067c0; color: #fff; }
[data-win="11"] .calc-key[aria-label="="]:hover { background: #1975c5; }