/* On-screen calculator (Data Insights). Loaded with app.css. */
.calc { position: fixed; right: 20px; bottom: 96px; z-index: 65; width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0 12px 12px; touch-action: none; }
.calc-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 6px; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: grab; user-select: none; }
.calc-x { border: 0; background: none; font-size: 16px; color: var(--text-3); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.calc-mem { height: 14px; font-size: 11px; color: var(--text-3); text-align: right; }
.calc-out { display: block; text-align: right; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-keys button { min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); font-size: 16px; font-weight: 650; cursor: pointer; }
.calc-keys button:active { transform: scale(0.97); }
.calc-keys button.op { background: var(--indigo-soft); color: var(--primary); }
.calc-keys button.fn { font-size: 13.5px; color: var(--text-2); }
.calc-keys button[data-k="="] { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
@media (max-width: 600px) { .calc { left: 12px; right: 12px; width: auto; bottom: calc(84px + var(--safe-b)); } }
.calc-btn { gap: 6px; }
@media (max-width: 600px) { .calc-btn .calc-label { display: none; } }
body.exam-mode .player-top .calc-btn { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
/* Phone: a compact six-column pad docked above the action bar (about a third of the screen), with the
   readout in the title row. The page reserves the panel's height so answers can scroll clear of it. */
@media (max-width: 600px) {
  .calc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 8px; padding: 6px 10px 10px; border-radius: 16px 16px 12px 12px; }
  .calc-bar { display: contents; }
  .calc-bar > span { display: none; }
  .calc-mem { grid-column: 1; grid-row: 1; height: auto; min-width: 12px; }
  .calc-out { grid-column: 2; grid-row: 1; font-size: 24px; padding: 4px 4px; }
  .calc-x { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
  .calc-keys { grid-column: 1 / -1; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 4px; }
  .calc-keys button { font-size: 15px; }
  .calc-keys [data-k='7'] { order: 1; } .calc-keys [data-k='8'] { order: 2; } .calc-keys [data-k='9'] { order: 3; } .calc-keys [data-k='÷'] { order: 4; } .calc-keys [data-k='C'] { order: 5; } .calc-keys [data-k='⌫'] { order: 6; }
  .calc-keys [data-k='4'] { order: 7; } .calc-keys [data-k='5'] { order: 8; } .calc-keys [data-k='6'] { order: 9; } .calc-keys [data-k='×'] { order: 10; } .calc-keys [data-k='√'] { order: 11; } .calc-keys [data-k='%'] { order: 12; }
  .calc-keys [data-k='1'] { order: 13; } .calc-keys [data-k='2'] { order: 14; } .calc-keys [data-k='3'] { order: 15; } .calc-keys [data-k='−'] { order: 16; } .calc-keys [data-k='±'] { order: 17; } .calc-keys [data-k='MR'] { order: 18; }
  .calc-keys [data-k='0'] { order: 19; } .calc-keys [data-k='.'] { order: 20; } .calc-keys [data-k='='] { order: 21; } .calc-keys [data-k='+'] { order: 22; } .calc-keys [data-k='MC'] { order: 23; } .calc-keys [data-k='M+'] { order: 24; }
  body.calc-open main#view { padding-bottom: calc(var(--calc-h, 260px) + 110px + var(--safe-b)); }
}