/* Date calculator (years_calc) — две раскладки одной разметки.

   ДЕСКТОП (шире 760px): сцена — оригинальный корпус прибора с datacalc.ru
   (images/date_calc_background.png, 728×600; видимая часть 728×525, зелёное табло нарисовано
   прямо в ней), клавиши — отдельные PNG поверх корпуса. Координаты приходят из config.php
   инлайновыми переменными --x/--y/--w/--h и раскладываются абсолютно; сцена целиком
   масштабируется под ширину (transform: scale, ставит years-scene.js).

   МОБАЙЛ (760px и уже): картинки не используются вовсе — корпус, табло и клавиши рисует CSS
   во всю ширину экрана, подписи берутся из локализации (.ycalc__cap). Порядок блоков тот же,
   что на десктопе, но клавиши крупные: их ширина считается из ширины ЭКРАНА, а не уменьшается
   вместе со сценой. Цвета сняты пипеткой с оригинальных PNG (F:/tmp/yc_palette.php) и лежат
   в токенах --yc-* ниже — магических чисел по месту нет.

   Префикс классов .ycalc. */

/* Переключатель формата даты — строка НАД прибором (в самой сцене места нет: она нарисована
   картинкой и размечена абсолютом по замеру). Ширина совпадает с прибором, чтобы селектор
   стоял по его правому краю, а не по краю страницы. */
.ycalc-format {
    max-width: 728px;
    margin: 0 auto .5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.ycalc-format__label {
    margin: 0;
    font-size: .875rem;
    opacity: .75;
}

.ycalc-format__select {
    width: auto;
    min-width: 8.5rem;
}

.ycalc {
    /* Палитра снята пипеткой с оригинальных ассетов. */
    --yc-case: #292929;            /* корпус прибора */
    --yc-lcd-top: #C1D29B;         /* табло: верх градиента */
    --yc-lcd-mid: #D2E4A8;
    --yc-lcd-bottom: #E4F8B6;      /* табло: низ градиента */
    --yc-key: #fff;                /* клавиша-цифра */
    --yc-well: #1e1e1e;            /* утопленная панель под клавишами (мобайл) */
    --yc-key-edge: #BCBCBC;
    --yc-key-shadow: #767676;
    --yc-key-ink: #333;
    --yc-op-top: #7E6E65;          /* клавиши действий «+», «−», «Difference» */
    --yc-op-bottom: #695A51;
    --yc-clear-top: #B73A3A;       /* «C» */
    --yc-clear-bottom: #A32626;
    --yc-equals: #FF6600;          /* «=» */

    --yc-font: "Times New Roman", Times, serif;
    --yc-title: #fff;              /* подписи колонок на тёмном корпусе */
    --yc-lcd-text: #000;           /* текст на табло */
    --yc-hint: orange;             /* подсветка текущей позиции даты (д/м/г) */

    position: relative;
    max-width: 728px;
    margin: 0 auto;
    overflow: hidden;
    /* размеры ставит years-scene.js; до первого расчёта — по пропорции сцены */
    aspect-ratio: 728 / 525;
}

.ycalc__scene {
    position: relative;
    width: var(--scene-w);
    height: var(--scene-h);
    transform-origin: 0 0;
    font-family: var(--yc-font);
    color: var(--yc-lcd-text);
    background: var(--yc-case) url("images/date_calc_background.png") 0 0 no-repeat;
    -webkit-user-select: none;
    user-select: none;
}

/* Раскладка десктопа: всё стоит по координатам сцены из config.php. Группы клавиш здесь
   в layout не участвуют (display: contents) — они нужны только мобильному гриду. */
.ycalc__display,
.ycalc__allowed,
.ycalc__error,
.ycalc__operations,
.button_title,
.ycalc__scene button {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
}
.ycalc__group { display: contents; }

/* --- Табло --- */

.ycalc__error {
    color: var(--yc-title);
    font-size: 22px;
    line-height: 1.15;
    white-space: nowrap;
}

#date_display_content { position: absolute; right: 10px; bottom: 10px; font-size: 52px; text-align: center; }

#result_text { display: block; width: 100%; text-align: left; font-size: 32px; font-style: italic; }

.date, .operator, .value { float: left; }
.operator { margin-left: 10px; margin-right: 10px; }
.dne { font-size: 20px; }
.day_1, .day_2, .month_1, .month_2, .year_1, .year_2, .year_3, .year_4 { position: relative; }

/* Бледная подсказка «д»/«м»/«г» под ещё не набранной позицией даты. */
.help_label { position: absolute; bottom: 4px; width: 100%; text-align: center; font-size: 32px; opacity: .2; }

/* Длинное выражение показывается уменьшенным кеглем. */
.smaller div { font-size: 30px !important; }
.smaller span { height: 18px !important; font-size: 16px !important; }
.smaller .negative, .smaller .minus, .smaller .percent, .smaller .power { font-size: 30px !important; }
.smaller .minus { margin-top: -1px !important; }

/* Значок промежутка (a •——• b) на табло. */
.interval { display: block; margin-top: 11px; line-height: 0; }
.interval .dot_one, .interval .dot_two { position: relative; font-size: 100px; }
.interval .dot_one { display: block; float: left; width: 20px; height: 20px; margin-right: -4px; }
.interval .line { display: block; float: left; position: relative; width: 80px; height: 20px; margin-top: -3px; font-size: 60px; }
.interval .dot_two { display: block; float: left; width: 20px; height: 20px; }
.interval .dot_one span, .interval .dot_two span { position: absolute; left: 7px; top: 14px; }
.interval .dot_one span { margin-top: -1px; font-size: 24px; }
.interval .dot_two span { font-size: 20px; }
.interval .line span { position: absolute; left: 37px; top: 11px; font-size: 32px; }

/* Крутилка ожидания ответа сервера. */
.loading {
    display: inline-block;
    border: 30px double;
    border-color: #444 transparent;
    border-radius: 50%;
    animation: yc-spin .8s linear infinite;
}
@keyframes yc-spin { to { transform: rotate(359deg); } }

/* --- Подписи колонок --- */

.button_title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--yc-title);
    white-space: nowrap;
}

.letter_lighting { color: var(--yc-hint); }

/* --- Клавиши --- */

.ycalc__scene button {
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer;
    touch-action: manipulation;
    /* Браузерное обрамление при фокусе на сайте не используется (см. theme.css); клавиатурой
       инструмент управляется напрямую — цифры, Enter, Backspace ловит years-keys.js. */
    outline: none;
}
/* В оригинале нажатая клавиша «проваливается» на 1px вправо и 2px вниз. */
.ycalc__scene button:active { transform: translate(1px, 2px); }

/* Подпись внутри клавиши: на десктопе надпись нарисована в самой картинке. */
.ycalc__cap { display: none; pointer-events: none; }

/* Затемнение клавиш, которые сейчас нажимать нельзя (сценарий вешает .button_light). */
.button_light::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .7;
}

/* Белое свечение: «=» и блок действий, когда сценарий подсказывает следующий шаг. */
.result_shadow, .operations_shadow { box-shadow: 0 0 15px 1px #fff; }

/* Слой-подсветка блока действий: только фон под клавишами, клики не перехватывает. */
.ycalc__operations { pointer-events: none; }


/* --- Картинки клавиш: только десктоп. Имя файла = id клавиши; _en — англоязычные надписи.
   Заперты в медиазапросе намеренно: на мобайле клавиши рисует CSS, и «погасить» ID-правило
   пришлось бы через !important. --- */

@media (min-width: 761px) {
    #plus     { background-image: url("images/calc_buttons/plus.png"); }
    #minus    { background-image: url("images/calc_buttons/minus.png"); }
    #interval { background-image: url("images/calc_buttons/interval_en.png"); }
    #cancel   { background-image: url("images/calc_buttons/cancel.png"); }
    #result   { background-image: url("images/calc_buttons/result.png"); }

    #d_1 { background-image: url("images/calc_buttons/d_1.png"); }
    #d_2 { background-image: url("images/calc_buttons/d_2.png"); }
    #d_3 { background-image: url("images/calc_buttons/d_3.png"); }
    #d_4 { background-image: url("images/calc_buttons/d_4.png"); }
    #d_5 { background-image: url("images/calc_buttons/d_5.png"); }
    #d_6 { background-image: url("images/calc_buttons/d_6.png"); }
    #d_7 { background-image: url("images/calc_buttons/d_7.png"); }
    #d_8 { background-image: url("images/calc_buttons/d_8.png"); }
    #d_9 { background-image: url("images/calc_buttons/d_9.png"); }
    #d_0 { background-image: url("images/calc_buttons/d_0.png"); }
    #d_dne { background-image: url("images/calc_buttons/d_dne_en.png"); }
    #d_backspace { background-image: url("images/calc_buttons/d_backspace.png"); }

    #d_today       { background-image: url("images/calc_buttons/d_today_en.png"); }
    #d_yesterday   { background-image: url("images/calc_buttons/d_yesterday_en.png"); }
    #d_start_month { background-image: url("images/calc_buttons/d_start_month_en.png"); }
    #d_start_year  { background-image: url("images/calc_buttons/d_start_year_en.png"); }

    #v_1 { background-image: url("images/calc_buttons/v_1.png"); }
    #v_2 { background-image: url("images/calc_buttons/v_2.png"); }
    #v_3 { background-image: url("images/calc_buttons/v_3.png"); }
    #v_4 { background-image: url("images/calc_buttons/v_4.png"); }
    #v_5 { background-image: url("images/calc_buttons/v_5.png"); }
    #v_6 { background-image: url("images/calc_buttons/v_6.png"); }
    #v_7 { background-image: url("images/calc_buttons/v_7.png"); }
    #v_8 { background-image: url("images/calc_buttons/v_8.png"); }
    #v_9 { background-image: url("images/calc_buttons/v_9.png"); }
    #v_0 { background-image: url("images/calc_buttons/v_0.png"); }
    #v_backspace { background-image: url("images/calc_buttons/v_backspace.png"); }
    #v_day     { background-image: url("images/calc_buttons/v_day_en.png"); }
    #v_month   { background-image: url("images/calc_buttons/v_month_en.png"); }
    #v_year    { background-image: url("images/calc_buttons/v_year_en.png"); }
    #v_century { background-image: url("images/calc_buttons/v_century_en.png"); }
}




/* =======================================================================================
   МОБАЙЛ. Граница совпадает с 'mobile_up_to' в config.php.

   Прибор разворачивается по вертикали: табло → даты → полоса действий → величины → «=».
   Оба способа набора (даты и величины) остаются видимыми и подписанными — это главная мысль
   десктопной расстановки «слева даты, справа величины», на телефоне у неё просто меняется ось.
   Каждый способ лежит в своей утопленной панели, чтобы блоки читались раздельно, а не «в кучу».

   Клавиши здесь рисует CSS, картинки не используются: PNG нарисованы под 66x40 и на клавише
   в 76 px при растяжении мылятся, а подписи вроде «1st day of month» нарисованы ВНУТРИ картинки
   и не переносятся по строкам. Цвета — токены --yc-* сверху, сняты пипеткой с этих же PNG.
   Раскладка утверждена владельцем по макету (вариант «Столбик»).
   ======================================================================================= */

@media (max-width: 760px) {
    .ycalc {
        max-width: none;
        aspect-ratio: auto;
        overflow: visible;   /* иначе обрезается тень корпуса */
    }

    .ycalc__scene {
        --gap: 7px;          /* зазор между клавишами */
        --well-pad: 7px;     /* поле утопленной панели */
        --row-h: 44px;       /* высота клавиши */

        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 10px;
        border-radius: 12px;
        background: var(--yc-case);
        background-image: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    }

    /* Координаты десктопа здесь не действуют: раскладку держит колонка. */
    .ycalc__display,
    .ycalc__error,
    .ycalc__operations,
    .button_title,
    .ycalc__scene button {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
    }
    .ycalc__group { display: grid; gap: var(--gap); min-width: 0; }
    /* Клавиша — точка отсчёта для затемняющего слоя .button_light. */
    .ycalc__scene button { position: relative; }

    /* --- Табло --- */

    .ycalc__display {
        position: relative;
        height: 92px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--yc-lcd-top), var(--yc-lcd-mid) 55%, var(--yc-lcd-bottom));
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, .3);
    }
    /* Строка ошибки уходит внутрь табло: тёмной планки над ним на телефоне нет. */
    .ycalc__error {
        position: absolute;
        inset: 6px 9px auto;
        color: #7a1d18;
        font-size: 15px;
        line-height: 1.2;
        white-space: normal;
    }
    .ycalc__allowed { position: absolute; inset: auto 0 0; width: auto; height: 58px; }
    #date_display_content { right: 10px; bottom: 8px; font-size: 33px; }
    #result_text { font-size: 20px; }
    .help_label { bottom: 3px; font-size: 21px; }

    /* --- Подписи способов набора --- */

    .ycalc__scene .button_title {
        margin: 12px 2px 5px;
        text-align: center;
        font-size: 16px;
        line-height: 1.1;
        white-space: normal;
    }
    /* Полоса действий говорит сама за себя: «+», «−», «Difference», «C» подписаны на клавишах. */
    #operations_title { display: none; }

    /* --- Утопленные панели способов набора --- */

    .ycalc__well {
        padding: var(--well-pad);
        border-radius: 8px;
        background: var(--yc-well);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
    }
    /* Четвёртая колонка шире: в блоке дат в ней быстрые даты, в блоке величин — единицы. */
    #date_buttons,
    #value_buttons { grid-template-columns: repeat(3, 1fr) 1.25fr; }
    #v_backspace { grid-column: span 2; }

    /* --- Клавиши --- */

    .ycalc__scene button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: var(--row-h);
        border-radius: 5px;
        background-color: var(--yc-key);
        box-shadow: 0 1px 0 var(--yc-key-shadow), inset 0 0 0 1px var(--yc-key-edge);
        color: var(--yc-key-ink);
        font-family: var(--yc-font);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.05;
    }
    .ycalc__cap { display: block; overflow: hidden; padding: 0 2px; text-align: center; }

    /* Быстрые даты: подпись мельче и переносится в две строки. */
    .ycalc__scene .button_wrap_fast { font-size: 11px; font-weight: 400; }
    /* Единицы величин и «B.C.» — слово вместо цифры. */
    #v_day .ycalc__cap, #v_month .ycalc__cap, #v_year .ycalc__cap,
    #v_century .ycalc__cap, #d_dne .ycalc__cap { font-size: 15px; }

    /* --- Полоса действий между способами набора --- */

    .ycalc__group--ops {
        position: relative;
        grid-template-columns: repeat(4, 1fr);
        margin: 12px 0 0;
    }
    .ycalc__scene .ycalc__group--ops button { height: 50px; }
    .ycalc__scene .button_wrap {
        background: linear-gradient(180deg, var(--yc-op-top), var(--yc-op-bottom));
        box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
        color: #fff;
        font-size: 24px;
    }
    .ycalc__scene #cancel {
        background: linear-gradient(180deg, var(--yc-clear-top), var(--yc-clear-bottom));
        font-size: 24px;
    }
    #interval .ycalc__cap { font-size: 11px; font-weight: 400; }
    /* Мелкая строка «a ? b» с линией — как нарисовано на оригинальной клавише промежутка. */
    #interval .ycalc__cap::before {
        content: attr(data-hint);
        display: block;
        margin-bottom: 2px;
        padding-bottom: 1px;
        border-bottom: 1px solid rgba(255, 255, 255, .6);
        font-size: 10px;
        letter-spacing: .14em;
    }
    /* Подсветка полосы действий ложится поверх неё целиком. */
    .ycalc__operations { position: absolute; inset: 0; }

    /* --- «=» --- */

    .ycalc__scene .button_wrap_result {
        height: 50px;
        margin-top: 12px;
        background: var(--yc-equals);
        box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
        color: #fff;
        font-size: 22px;
    }

    .button_light::before { position: absolute; inset: 0; width: auto; height: auto; border-radius: 5px; }
}

/* Совсем узкие экраны: клавиши чуть ниже и подписи мельче, чтобы всё оставалось читаемым. */
@media (max-width: 359px) {
    .ycalc__scene { --row-h: 40px; --gap: 5px; --well-pad: 5px; }
    .ycalc__scene button { font-size: 19px; }
    .ycalc__scene .ycalc__group--ops button { height: 46px; }
    #v_day .ycalc__cap, #v_month .ycalc__cap, #v_year .ycalc__cap,
    #v_century .ycalc__cap, #d_dne .ycalc__cap { font-size: 13px; }
    .ycalc__scene .button_wrap_fast { font-size: 10px; }
    .ycalc__scene .button_title { font-size: 15px; }
}