/* Fraction calculator — стили. Корпус/кнопки воспроизводят оригинальный (картиночный) дизайн средствами
   CSS — поверх Bootstrap-разметки. Цвета вынесены в скин-токены (--fc-*), без магических чисел по месту.
   Базовые токены сайта (шрифт, акцент, границы) — из assets/css/theme.css. */

.fcalc {
    /* Скин калькулятора (палитра оригинала, воспроизведена) */
    --fc-body-top:   #4a4a4a;
    --fc-body-bot:   #1d1d1d;
    --fc-bezel:      #0d0d0d;
    --fc-screen-top: #e9f1b6;
    --fc-screen-bot: #cfe07e;
    --fc-screen-txt: #2a2a1f;
    --fc-sub-txt:    #c9d68a;
    --fc-legend:     #9fb13f;   /* оливково-зелёные подписи/скобки у блока дробей */
    --fc-fieldhdr:   #cfcfcf;   /* светло-серый заголовок «Fraction input» на тёмной панели */

    --fc-int-top:    #565a60;   /* «целые» цифры и скобки — тёмно-серые */
    --fc-int-bot:    #383b40;
    --fc-int-txt:    #ffffff;
    --fc-fn-top:     #f0f0f0;   /* операции/функции — светло-серые */
    --fc-fn-bot:     #cfcfcf;
    --fc-fn-txt:     #2c2c2c;
    --fc-clear-top:  #cf4436;   /* C — красная */
    --fc-clear-bot:  #a5281b;
    --fc-sign-top:   #7c6a5b;   /* ± — коричневая */
    --fc-sign-bot:   #5d4e42;
    --fc-eq-top:     #fba43a;   /* = — оранжевая */
    --fc-eq-bot:     #e07c0a;
    --fc-light-txt:  #ffffff;
    --fc-pad-top:    #ffffff;   /* числитель/знаменатель — белые */
    --fc-pad-bot:    #ececec;
    --fc-pad-txt:    #333333;
    --fc-pad-border: #b9b9b9;

    --fc-gap:        clamp(5px, 1.4vw, 9px);
    --fc-screen-pad: clamp(8px, 2vw, 14px);     /* боковой отступ экрана (рамка табло) */
    --fc-sub-h:      1rem;                      /* полоса под десятичное значение внизу табло (её высота) */
    --fc-radius:     7px;
    --fc-keyh:       clamp(34px, 8.6vw, 54px);   /* высота крупных кнопок (левый блок + ÷ =) */
    --fc-padh:       clamp(19px, 4.8vw, 30px);   /* высота мелких кнопок numpad'ов дробей */

    max-width: 560px;
    margin: 0 auto;
    font-family: var(--tls-font-base);
}

/* ── Надстройка над табло (выражение 2/3 + кнопка-ссылка) ── */
.fcalc__above { min-height: 1.05rem; margin-bottom: .35rem; padding-left: .25rem; }
.fcalc__above.is-hidden { visibility: hidden; }
.fcalc__above.is-shared-view .fcalc__above-link { display: none; }
.fcalc__above.is-shared-view .fcalc__above-expr { flex-basis: 100%; }

.fcalc__above-shared {
    display: block; width: fit-content; margin: 0 0 .05rem; padding: 3px 6px;
    font-size: .75rem; line-height: 1.15; color: #fff;
    background: var(--tls-salmon); border-radius: 5px; white-space: nowrap;
}
.fcalc__above-shared.is-hidden { display: none; }

.fcalc__above-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.fcalc__above-expr {
    flex: 0 1 66%; min-width: 0; border: 0; background: none; padding: 0 0 0 3px;
    font: inherit; font-size: .82rem; line-height: 1.3; color: var(--tls-text-muted);
    text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.fcalc__above-expr:hover { color: var(--tls-accent); text-decoration: underline; }
.fcalc__above-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--tls-border); border-radius: var(--tls-radius); background: var(--tls-surface);
    color: var(--tls-text-muted); padding: .1rem .35rem; font: inherit; font-size: .8rem; line-height: 1.4;
    white-space: nowrap; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.fcalc__above-link:hover { background: var(--tls-menu-hover); }
.fcalc__above-link.is-done { background: var(--tls-text-muted); border-color: var(--tls-text-muted); color: #fff; }
.fcalc__above-link i { font-size: 1rem; line-height: 1; }

/* ── Корпус калькулятора ── */
.fcalc__body {
    background: linear-gradient(180deg, var(--fc-body-top), var(--fc-body-bot));
    border-radius: 16px;
    padding: clamp(10px, 2.5vw, 18px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.fcalc__topbar {
    height: clamp(14px, 3vw, 24px);
    background: var(--fc-bezel);
    border-radius: 8px 8px 0 0;
    /* без зазора до экрана — чёрная область цельная (раньше тут просвечивал корпус) */
}

/* ── Экран ── */
.fcalc__screen {
    background: var(--fc-bezel);
    border-radius: 0 0 8px 8px;
    /* без боковых отступов: содержимое идёт по ширине клавиатуры (заголовок дробей совпадает со столбцом) */
    padding: var(--fc-screen-pad) 0 5px;   /* заголовок ближе к нижней границе рамки */
    margin-bottom: clamp(7px, 1.8vw, 11px);
}
/* инсет-рамку табло (бордюр зелёного дисплея) даёт сам дисплей-блок, а не отступы экрана */
.fcalc__screentop { position: relative; margin: 0 var(--fc-screen-pad); }

/* Ряд заголовка дробей в чёрном обрамлении: идёт по ширине клавиатуры; foot-left = левый блок (1.3),
   foot-right = столбец дробей (1) → заголовок ровно над панелями и той же ширины, что Top/Bottom number. */
.fcalc__screenfoot { display: flex; align-items: center; gap: var(--fc-gap); margin-top: clamp(.55rem, 2.2vw, 1rem); }
.fcalc__foot-left  { flex: 1.3 1 0; }
.fcalc__foot-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .25rem; }
.fcalc__foot-right .fcalc__legend--main { flex: 1 1 auto; min-width: 0; }

.fcalc__display {
    display: flex;
    align-items: center;          /* вертикальное центрирование одной строки */
    width: 100%;
    min-height: clamp(86px, 19vw, 118px);  /* пол высоты; при переносе табло растёт вниз (height auto) */
    height: auto;
    /* Снизу зарезервирована полоса под .fcalc__sub (десятичное значение) — иначе стопка дроби
       наезжала на неё: на узком экране пересечение доходило до 10px (замер 07.09.2026). */
    padding: .35rem .6rem calc(.35rem + var(--fc-sub-h));
    background: linear-gradient(180deg, var(--fc-screen-top), var(--fc-screen-bot));
    color: var(--fc-screen-txt);
    border-radius: 4px;
    font-size: 40px;               /* стартовый; точный подбирает fit() */
    overflow: hidden;
    cursor: text;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25);
}
.fcalc__display:focus, .fcalc__display:focus-visible { outline: none; }

/* Строка-контейнер: всю ширину табло, выравнивание вправо; перенос ТОЛЬКО между членами/операторами
   (числа — inline-flex, внутри не рвутся). Ширина 100% даёт надёжное измерение переполнения в fit(). */
.fcalc__line {
    width: 100%;
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* ── Оверлей помощи (поверх зелёного дисплея): слева пузырёк-пример, справа живой пример ── */
.fcalc__help { position: absolute; inset: 0; display: none; align-items: center; gap: .5rem; padding: .4rem .7rem; }
.fcalc.is-help .fcalc__help { display: flex; }
.fcalc.is-help .fcalc__line { visibility: hidden; }   /* прячем обычное содержимое; зелёный фон остаётся */

.fcalc__help-bubble {
    flex: 0 1 auto; max-width: 52%;
    background: #fff; color: #333; border-radius: 10px; padding: .5rem .7rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28); font-size: clamp(.8rem, 2.4vw, .98rem); line-height: 1.5;
}
.fcalc__help-line { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.fcalc__help-label { font-weight: 600; }
.fcalc__help-ex { font-size: 1.1em; }                 /* пример в пузырьке — крупнее, чтобы дроби читались */
.fcalc__help-ex .fcalc__numer, .fcalc__help-ex .fcalc__denom { font-size: .66em; }  /* стопки крупнее дефолта */
.fcalc__help-ex .fcalc__op { margin: 0 .15em; }
.fcalc__help-tip { margin-top: .3rem; color: #5a5a5a; }

.fcalc__help-demo {
    flex: 1 1 auto; min-width: 0; text-align: right; color: var(--fc-screen-txt);
    font-size: clamp(1.3rem, 5vw, 2.3rem); white-space: nowrap; overflow: hidden;
}

/* Десятичное / приближённое значение — в нижнем-правом углу самого табло (поверх зелёного). */
.fcalc__sub {
    position: absolute; right: .6rem; bottom: .2rem;
    max-width: 70%; font-size: .8rem; line-height: 1; text-align: right;
    color: var(--fc-screen-txt); opacity: .72; pointer-events: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Кнопка помощи "?" — внутри заголовка «Fraction input», абсолютно у правого края.
   Не влияет на ширину заголовка; размер адаптивный (мельче на узких экранах). */
.fcalc__help-btn {
    flex: 0 0 auto; margin-right: 4px;          /* чуть левее края; линии справа от иконки нет */
    width: clamp(.95rem, 3.4vw, 1.3rem); height: clamp(.95rem, 3.4vw, 1.3rem); padding: 0;
    border: 1px solid #6a6a6a; border-radius: 50%;
    background: #3a3a3a; color: #c2c2c2; font-weight: 700; font-size: clamp(.6rem, 2vw, .8rem); line-height: 1;
    cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.fcalc__help-btn[aria-pressed="true"] { background: #555; border-color: #888; color: #fff; }
.fcalc__help-btn:hover { background: #4a4a4a; color: #fff; }

/* Горизонтальный прелоадер вдоль низа экрана (на серверный "="). */
.fcalc__preloader {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    overflow: hidden; opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.fcalc__preloader.is-on { opacity: 1; }
.fcalc__preloader span {
    position: absolute; top: 0; height: 100%; width: 40%;
    background: var(--fc-eq-bot); animation: fcalc-load .9s ease-in-out infinite;
}
@keyframes fcalc-load { 0% { left: -40%; } 100% { left: 100%; } }

/* ── Клавиатура ── */
.fcalc__pads { display: flex; gap: var(--fc-gap); align-items: stretch; }
.fcalc__left {
    flex: 1.3 1 0; min-width: 0;   /* чистая флекс-доля (как пустой спейсер заголовка) → колонки совпадают */
    display: grid; grid-template-columns: repeat(3, 1fr);
    /* ряды не ниже keyh, но тянутся, заполняя высоту блока → «− ×» всегда у самого низа (низы столбцов совпадают) */
    grid-auto-rows: minmax(var(--fc-keyh), 1fr); gap: var(--fc-gap);
}
/* Правый столбец растягивается до высоты левого (align-items:stretch у .fcalc__pads); слабину поглощают
   панели цифр (ряды 1fr), поэтому ÷/= стоит сразу под панелью без провала и ровно вровень с «− ×». */
.fcalc__right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--fc-gap); }
.fcalc__numpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--fc-gap); }
.fcalc__rightbottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fc-gap); }

/* Зелёные подписи числителя/знаменателя — с линиями по бокам. */
.fcalc__legend {
    display: flex; align-items: center; gap: clamp(.2rem, 1vw, .4rem); justify-content: center;
    color: var(--fc-legend); font-size: clamp(.54rem, 1.7vw, .66rem); line-height: 1; text-align: center;
    margin: 0; white-space: nowrap;
}
.fcalc__legend::before, .fcalc__legend::after { content: ''; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .55; }

/* «Fraction input» — главный заголовок: ТА ЖЕ ширина и стиль, что у легенд (эталон), светло-серый цвет;
   контейнер для абсолютной кнопки "?" и резерв высоты под неё. */
.fcalc__legend--main { color: var(--fc-fieldhdr); font-weight: 600; }

/* Скобка слева от numpad'а: вертикаль с РАЗРЫВОМ, в разрыве — стрелка к панели (зелёная). */
.fcalc__fracrow { display: flex; align-items: stretch; gap: .3rem; flex: 1 1 auto; }  /* забирает свободную высоту */
.fcalc__fracrow .fcalc__numpad { flex: 1 1 auto; }
.fcalc__bracket { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 13px; align-self: stretch; }
.fcalc__bracket-top, .fcalc__bracket-bot { width: 100%; flex: 1 1 auto; border-left: 2px solid var(--fc-legend); }
.fcalc__bracket-top { border-top: 2px solid var(--fc-legend); border-top-left-radius: 6px; }
.fcalc__bracket-bot { border-bottom: 2px solid var(--fc-legend); border-bottom-left-radius: 6px; }
.fcalc__bracket-arrow {
    flex: 0 0 auto; color: var(--fc-legend); font-size: .85rem; line-height: .85;
    margin: 1px 0; transform: translateX(-1px);   /* стрелка торчит из разрыва вправо */
}

/* Базовая кнопка */
.fcalc__key {
    appearance: none; border: 1px solid transparent; border-radius: var(--fc-radius);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-weight: 700; cursor: pointer; user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .35);
    transition: filter .1s ease, transform .04s ease;
}
.fcalc__key:active, .fcalc__key.is-active { transform: translateY(1px); filter: brightness(.92); }
.fcalc__key:focus-visible { outline: 2px solid var(--fc-eq-bot); outline-offset: 2px; }

/* Левый блок: крупные кнопки одной высоты */
.fcalc__left .fcalc__key { min-height: var(--fc-keyh); font-size: clamp(1rem, 3.6vw, 1.5rem); }
.fcalc__key.is-tall { grid-row: span 2; }

/* Семейства кнопок */
.fcalc__key.is-int   { background: linear-gradient(180deg, var(--fc-int-top), var(--fc-int-bot)); color: var(--fc-int-txt); }
.fcalc__key.is-fn    { background: linear-gradient(180deg, var(--fc-fn-top), var(--fc-fn-bot)); color: var(--fc-fn-txt); }
.fcalc__key.is-clear { background: linear-gradient(180deg, var(--fc-clear-top), var(--fc-clear-bot)); color: var(--fc-light-txt); }
.fcalc__key.is-sign  { background: linear-gradient(180deg, var(--fc-sign-top), var(--fc-sign-bot)); color: var(--fc-light-txt); }
.fcalc__key.is-equals { background: linear-gradient(180deg, var(--fc-eq-top), var(--fc-eq-bot)); color: var(--fc-light-txt); }
.fcalc__key.is-pad {
    background: linear-gradient(180deg, var(--fc-pad-top), var(--fc-pad-bot));
    color: var(--fc-pad-txt); border-color: var(--fc-pad-border);
    min-height: 0;                 /* высоту задаёт ряд 1fr (равномерно заполняет столбец) */
    font-size: clamp(.78rem, 2.5vw, 1.02rem);
}
/* ÷ и = — той же высоты, что крупные кнопки слева (− × и т.д.). */
.fcalc__rightbottom .fcalc__key { min-height: var(--fc-keyh); font-size: clamp(1rem, 3.2vw, 1.4rem); }
.fcalc__key.is-equals { grid-column: span 2; }
.fcalc__key.is-back { grid-column: span 2; }
.fcalc__key.is-fn sup { font-size: .62em; }

/* ── Рендер выражения «как в тетрадке» ── */
.fcalc__term, .fcalc__numgrp, .fcalc__sqrt { display: inline-flex; align-items: center; vertical-align: middle; }
.fcalc__numgrp { gap: .12em; }
.fcalc__op { margin: 0 .22em; vertical-align: middle; }
.fcalc__paren { margin: 0 .04em; }
.fcalc__neg { margin-right: .04em; }
.fcalc__whole { padding: 0 .04em; }

/* Стопка дроби: числитель над знаменателем, черта = верхняя граница знаменателя */
.fcalc__frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: middle; }
.fcalc__numer { font-size: .54em; padding: 0 .25em .04em; }
.fcalc__denom { font-size: .54em; padding: .04em .25em 0; border-top: 2px solid currentColor; }

/* Корень: знак √ и черта над подкоренным выражением */
.fcalc__sqrt { align-items: flex-start; }
.fcalc__radsign { font-size: 1.05em; line-height: .9; }
.fcalc__radicand { border-top: 2px solid currentColor; padding: .05em .12em 0; margin-left: -.04em; }

/* Степень — надстрочно */
.fcalc__pow { font-size: .5em; align-self: flex-start; margin-top: -.1em; }
.fcalc__pow.is-empty { min-width: .5em; border-bottom: 1px dashed currentColor; }
.fcalc__pct { margin-left: .04em; }
.fcalc__placeholder { display: inline-block; min-width: .5em; border-bottom: 1px dashed currentColor; }

/* ── Блок ошибки / подсказка ── */
.fcalc__error {
    min-height: 1.4em; margin: .6rem 0 0; font-size: .9rem; text-align: center;
    color: var(--tls-danger); visibility: hidden;
}
.fcalc__error.is-on { visibility: visible; }
.fcalc__hint { margin-top: 1rem; margin-bottom: 0; font-size: .85rem; text-align: center; }

/* Очень узкие экраны — раскладка та же, всё пропорционально мельче (см. clamp выше). */
@media (max-width: 360px) {
    .fcalc { --fc-gap: 4px; }
    .fcalc__above-link { font-size: .7rem; padding: .1rem .25rem; }
    .fcalc__above-link i { font-size: .85rem; }
}