/* === Калькулятор возведения дроби в степень ===
   Оверрайд поверх общего drobi.css (единая дизайн-система). Специфика страницы:
   выражение «( дробь )^степень», десятичный режим, таблица примеров. Доска,
   поля .val_fraction, кнопки .btn-r/.btn-c, чипы, блок решения .div_s и адаптив
   наследуются из drobi.css. */

.hidden { display: none !important; }

/* Доска возведения: ( дробь )^степень */
.pow-board { gap: 4px; }
.pow-board .frac-whole { display: block; }           /* целая часть видна всегда (смешанное основание) */

/* Скобки вокруг дроби */
.pow-paren {
  font-size: 58px;
  font-weight: 300;
  line-height: 1;
  color: #111;
  align-self: center;
  user-select: none;
  margin: 0 2px;
}

/* Показатель степени — надстрочно, в правом верхнем углу */
.pow-exp { align-self: flex-start; }
.pow-exp-input { width: 48px; height: 44px; }
@media (min-width: 561px) {
  /* на десктопе доска получает padding-top:26px из drobi.css — поднимаем показатель чуть выше центра */
  .pow-exp { margin-top: 4px; }
}
@media (max-width: 560px) {
  .pow-exp { align-self: flex-start; margin-top: 0; }
}

/* Десятичный режим: одно широкое поле основания */
.dec-input { width: 120px; height: 52px; }

/* Блок ошибки */
.calc-error {
  color: #d32f2f;
  font-size: 14px;
  text-align: center;
  margin: 8px auto 0;
  min-height: 20px;
}

/* Надстрочные степени в решении и таблице */
#decision sup, .pow-table sup { font-size: 70%; }

/* === Таблица примеров возведения дробей в степень === */
.pow-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.pow-table th,
.pow-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
}
.pow-table th { background: #f3f4f6; font-weight: 600; }
.pow-table td:nth-child(3) { font-weight: 700; color: #2196F3; }
.pow-table tbody tr:nth-child(even) { background: #fafbfc; }

@media (max-width: 560px) {
  .pow-table { font-size: 13px; }
  .pow-table th, .pow-table td { padding: 6px 8px; }
  .pow-paren { font-size: 46px; }
  .dec-input { width: 100px; }
  /* drobi.css на мобиле даёт .frac-board>*{flex-basis:100%} (вертикальный стек дробей).
     Для доски возведения это ломает выражение — скобки уезжают вниз. Возвращаем строку. */
  .pow-board { flex-wrap: nowrap; justify-content: center; }
  .pow-board > * { flex-basis: auto; }
}

/* === Переключатель «Обыкновенные / Десятичные» — кнопки в стиле .btn-c («Очистить») ===
   Обе опции = белые кнопки как «Очистить»; выбранная — серая заливка (#f0f0f0). */
.radio-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0 auto 16px;
  max-width: 440px;
}
.radio-group label {
  flex: 1;
  margin: 0;
  box-sizing: border-box;        /* как .btn-c — иначе padding раздувает высоту */
  height: 53px;                  /* ровно как кнопка «Очистить» */
  padding: 4px 14px;
  border: 1px solid #ddd;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.15;
  font-family: "Unbounded", Arial, sans-serif;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all .25s;
  -webkit-user-select: none;
  user-select: none;
}
.radio-group label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.radio-group label:hover { background: #f0f0f0; transform: scale(1.02); }
.radio-group label:has(input[type="radio"]:focus-visible) { outline: 2px solid #2196F3; outline-offset: 1px; }
.radio-group label:has(input[type="radio"]:checked) { background: #f0f0f0; }

/* На ПК каждая кнопка переключателя — не уже 220px (на мобиле остаётся flex:1) */
@media (min-width: 561px) {
  .radio-group { max-width: 480px; flex-wrap: wrap; justify-content: center; }
  .radio-group label { flex: 1 1 220px; min-width: 220px; }
}