/* mv UK26-MT calculator skin for session drawer */

.fx-calc {
  --fx-body: #1a1a1a;
  --fx-bezel: #2b2b2b;
  --fx-display-bg: #c8d4c0;
  --fx-display-text: #1a2418;
  --fx-key-num: #f4f4f4;
  --fx-key-op: #e8e0d0;
  --fx-key-fn: #d8d0c4;
  --fx-key-accent: #f0c040;
  --fx-key-shift: #f5d76e;
  --fx-key-alpha: #f2a7b8;
  --fx-key-exe: #ffffff;
  --fx-key-text: #1a1a1a;
  --fx-key-shift-label: #c87800;
  --fx-key-alpha-label: #b03050;
  --fx-shadow: rgba(0, 0, 0, 0.35);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--fx-key-text);
  user-select: none;
  max-width: 20rem;
  margin: 0 auto;
}

.fx-calc__shell {
  background: linear-gradient(180deg, #3a3a3a 0%, var(--fx-body) 8%, var(--fx-body) 100%);
  border-radius: 0.65rem;
  padding: 0.55rem 0.5rem 0.65rem;
  box-shadow:
    0 0.35rem 1rem var(--fx-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.fx-calc__brand {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: #aaa;
  text-align: right;
  padding: 0 0.15rem 0.2rem;
  font-weight: 600;
}

.fx-calc__display-wrap {
  background: var(--fx-bezel);
  border-radius: 0.35rem;
  padding: 0.35rem 0.4rem 0.45rem;
  margin-bottom: 0.45rem;
}

.fx-calc__indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 0.85rem;
  font-size: 0.58rem;
  font-weight: 700;
  color: #2a3a28;
  margin-bottom: 0.15rem;
}

.fx-calc__indicator {
  opacity: 0;
  transition: opacity 0.12s;
}

.fx-calc__indicator--on {
  opacity: 1;
}

.fx-calc__display {
  background: var(--fx-display-bg);
  border-radius: 0.2rem;
  min-height: 3.6rem;
  padding: 0.35rem 0.45rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.fx-calc__expr {
  font-size: 0.72rem;
  line-height: 1.25;
  color: #4a5a48;
  text-align: right;
  word-break: break-all;
  min-height: 0.9rem;
  margin-bottom: 0.15rem;
}

.fx-calc__result {
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--fx-display-text);
  text-align: right;
  word-break: break-all;
}

.fx-calc__menu {
  background: var(--fx-display-bg);
  border-radius: 0.2rem;
  min-height: 6.5rem;
  max-height: 8.5rem;
  overflow: auto;
  padding: 0.35rem;
  font-size: 0.72rem;
  color: var(--fx-display-text);
}

.fx-calc__menu-title {
  font-weight: 700;
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  color: #3a4a38;
}

.fx-calc__menu-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.2rem;
  border-radius: 0.15rem;
  cursor: pointer;
}

.fx-calc__menu-item--active {
  background: rgba(60, 90, 55, 0.18);
  outline: 1px solid rgba(60, 90, 55, 0.35);
}

.fx-calc__menu-radio {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid #5a6a58;
  border-radius: 50%;
  flex-shrink: 0;
}

.fx-calc__menu-item--active .fx-calc__menu-radio {
  background: #3a5a35;
  box-shadow: inset 0 0 0 1px #fff;
}

.fx-calc__keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.28rem;
}

.fx-calc__key {
  position: relative;
  border: none;
  border-radius: 0.28rem;
  min-height: 2rem;
  padding: 0.15rem 0.1rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  background: var(--fx-key-num);
  color: var(--fx-key-text);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.05s, box-shadow 0.05s;
}

.fx-calc__key:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.fx-calc__key--op {
  background: var(--fx-key-op);
}

.fx-calc__key--fn {
  background: var(--fx-key-fn);
  font-size: 0.62rem;
}

.fx-calc__key--home {
  background: #3d3d3d;
  color: #f0f0f0;
  font-size: 0.58rem;
}

.fx-calc__key--shift {
  background: var(--fx-key-shift);
}

.fx-calc__key--alpha {
  background: var(--fx-key-alpha);
}

.fx-calc__key--exe {
  background: var(--fx-key-exe);
  font-weight: 700;
}

.fx-calc__key--wide {
  grid-column: span 2;
}

.fx-calc__key--shift-on,
.fx-calc__key--alpha-on {
  outline: 2px solid #c87800;
  outline-offset: -1px;
}

.fx-calc__key--alpha-on {
  outline-color: #b03050;
}

.fx-calc__key-shift {
  position: absolute;
  top: 0.12rem;
  left: 0.18rem;
  font-size: 0.48rem;
  font-weight: 700;
  color: var(--fx-key-shift-label);
  line-height: 1;
}

.fx-calc__key-main {
  display: block;
  margin-top: 0.35rem;
}

.fx-calc__key--fn .fx-calc__key-main {
  margin-top: 0.15rem;
}

.fx-calc__key--trig .fx-calc__key-main {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.fx-calc__key--trig .fx-calc__key-shift {
  font-size: 0.46rem;
}

.fx-calc__hint {
  margin-top: 0.45rem;
  font-size: 0.62rem;
  color: var(--muted, #6a6a6a);
  text-align: center;
  line-height: 1.35;
}

.session-card--calculator {
  padding-bottom: 0.5rem;
}

.session-card--calculator .session-meta {
  margin-bottom: 0.5rem;
}

.session-calculator-controls {
  margin-bottom: 0.75rem;
}

.session-calculator-controls .session-actions {
  margin-top: 0.35rem;
}

.session-calculator-locked {
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: var(--muted, #6a6a6a);
  font-size: 0.88rem;
}

@media (max-width: 420px) {
  .fx-calc {
    max-width: 100%;
  }

  .fx-calc__key {
    min-height: 1.85rem;
    font-size: 0.72rem;
  }

  .fx-calc__result {
    font-size: 1.2rem;
  }
}