/* Ubuntu Web — Calculator (GNOME basic mode) */

.app-calculator .window-content {
  background: var(--win-bg);
}

.app-calculator .calc-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  outline: none;
}

/* ---------- display ---------- */
.app-calculator .calc-display {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 16px 12px;
  background: var(--view-bg);
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.app-calculator .calc-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 4px;
}
.app-calculator .calc-hist-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: right;
}
.app-calculator .calc-hist-row:hover { background: var(--hover); }
.app-calculator .calc-hist-expr { color: var(--fg-faint); }
.app-calculator .calc-hist-val { font-weight: 500; color: var(--fg-dim); }

.app-calculator .calc-expr {
  min-height: 20px;
  font-size: 15px;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-calculator .calc-expr:empty::before { content: '\00a0'; }

.app-calculator .calc-result {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  min-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-calculator .calc-result.error {
  font-size: 19px;
  color: #c96262;
  font-weight: 400;
}
:root[data-scheme="dark"] .app-calculator .calc-result.error { color: #e08d8d; }

/* ---------- button grid ---------- */
.app-calculator .calc-grid {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 56px;
  gap: 6px;
  padding: 10px;
}

.app-calculator .calc-btn {
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--fg);
  font-size: 17px;
  font-weight: 500;
  transition: background 0.1s ease, transform 0.06s ease;
}
.app-calculator .calc-btn:hover { background: var(--btn-hover); }
.app-calculator .calc-btn:active {
  background: var(--btn-active);
  transform: scale(0.96);
}

.app-calculator .calc-btn-fn {
  background: var(--hover);
  color: var(--fg-dim);
  font-size: 15px;
}
.app-calculator .calc-btn-fn:hover { background: var(--btn-hover); color: var(--fg); }

.app-calculator .calc-btn-op {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--fg);
  font-size: 19px;
}
.app-calculator .calc-btn-op:hover { background: rgba(var(--accent-rgb), 0.2); }
.app-calculator .calc-btn-op:active { background: rgba(var(--accent-rgb), 0.3); }

.app-calculator .calc-btn-eq {
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.app-calculator .calc-btn-eq:hover { background: var(--accent-hover); }
.app-calculator .calc-btn-eq:active { background: var(--accent-active); transform: scale(0.96); }