/* =====================================================================
   Resize image (resize_photo) — стили инструмента.
   Каркас на Bootstrap + локальные токены НА КОНТЕЙНЕРЕ инструмента (.rsz),
   сайтовые токены/шапку/меню/H1 не трогаем (см. .tool_conventions/image_tools.md,
   _common.md «Подложка инструмента и шрифт тела»). Дизайн — общий с rotate_photo/cut_photo
   (синий акцент); изображение рисуется на <canvas>, vendor-библиотек нет.
   ===================================================================== */

.rsz {
    --rsz-accent:        #0352f1;
    --rsz-accent-hover:  #0344cc;
    --rsz-accent-soft:   #f2f7fe;
    --rsz-work-bg:       #f4f7fb;
    --rsz-drop-bg:       #f9fbfe;
    --rsz-drop-border:   #b9cdf9;
    --rsz-card-border:   #e6e8ec;
    --rsz-line:          #dde1e8;
    --rsz-text:          #1f2733;
    --rsz-muted:         #6b7480;
    --rsz-btn-outline:   #d7dbe2;
    --rsz-ok:            #1a7f4b;
    --rsz-warn:          #b26a1e;
    --rsz-err:           #b21e1f;
    --rsz-err-bg:        #feefef;
    --rsz-err-border:    #f6d2d2;
    /* Высота рабочей области. На телефоне её пересчитывает JS под конкретный экран
       (см. fitStage в js_originals/resize-photo.js) — здесь только исходное значение.
       Копия решения из cut_photo: инструменты автономны, общего кода у них нет. */
    --rsz-stage-h:       400px;
    --rsz-stage-pad:     22px;
    --rsz-edge-pad:      16px;   /* боковые поля карточки на телефоне */

    --rsz-radius:        16px;
    --rsz-radius-sm:     12px;
    --rsz-radius-xs:     10px;

    max-width: 880px;
    margin-inline: auto;
    background: #fff;
    border: 1px solid var(--rsz-card-border);
    border-radius: var(--rsz-radius);
    box-shadow: 0 2px 14px rgba(20, 30, 60, .06);
    padding: 24px;
    color: var(--rsz-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.45;
}

.rsz *,
.rsz *::before,
.rsz *::after { box-sizing: border-box; }

/* Фокус: убираем ring при клике мышью, оставляем аккуратный — только с клавиатуры
   (см. CLAUDE.md «без bootstrap/браузерного обрамления поля при нажатии»). */
.rsz__drop:focus, .rsz__seg:focus, .rsz__chip:focus, .rsz__lock:focus, .rsz__view:focus,
.rsz__info:focus, .rsz__alert-close:focus, .rsz__dim-num:focus, .rsz__target-num:focus,
.rsz__range:focus, .rsz__format:focus { outline: none; }
.rsz__drop:focus-visible, .rsz__seg:focus-visible, .rsz__chip:focus-visible,
.rsz__lock:focus-visible, .rsz__view:focus-visible, .rsz__info:focus-visible, .rsz__alert-close:focus-visible,
.rsz__dim-num:focus-visible, .rsz__target-num:focus-visible, .rsz__range:focus-visible,
.rsz__format:focus-visible { outline: 2px solid var(--rsz-accent); outline-offset: 2px; }

/* поля без bootstrap-ring (focus-reset темы покрывает .form-select/.form-control;
   собственные обёртки полей подсвечиваем рамкой-акцентом сами) */
.rsz__dim-field:focus-within,
.rsz__target-field:focus-within { border-color: var(--rsz-accent); }

.rsz__upload,
.rsz__errstate { max-width: 480px; margin-inline: auto; }

/* ---------------- общие кнопки (поверх Bootstrap .btn) ---------------- */
.rsz .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            font-weight: 600; border-radius: var(--rsz-radius-xs); border: 1px solid transparent;
            padding: .6rem 1.05rem; font-size: .95rem; line-height: 1.2; }
.rsz .btn i { font-size: 1.05em; line-height: 0; }

.rsz__btn-primary { background: var(--rsz-accent); color: #fff; border-color: var(--rsz-accent); }
.rsz__btn-primary:hover,
.rsz__btn-primary:focus-visible { background: var(--rsz-accent-hover); color: #fff; border-color: var(--rsz-accent-hover); }

.rsz__btn-outline { background: #fff; color: var(--rsz-text); border-color: var(--rsz-btn-outline); }
.rsz__btn-outline:hover,
.rsz__btn-outline:focus-visible { background: #f5f7fa; color: var(--rsz-text); border-color: #c7ccd6; }

.rsz__btn-ghost { background: #fff; color: var(--rsz-text); border-color: var(--rsz-btn-outline);
                  padding: .42rem .8rem; font-size: .9rem; border-radius: var(--rsz-radius-xs); }
.rsz__btn-ghost:hover,
.rsz__btn-ghost:focus-visible { background: #f5f7fa; }

/* =====================================================================
   СОСТОЯНИЕ 1: ЗАГРУЗКА  (и дропзона в состоянии ошибки)
   ===================================================================== */
.rsz__drop {
    border: 2px dashed var(--rsz-drop-border);
    background: var(--rsz-drop-bg);
    border-radius: 14px;
    padding: 30px 20px;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    text-align: center;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.rsz__drop.is-drag { border-color: var(--rsz-accent); background: var(--rsz-accent-soft); }
.rsz__drop-icon { font-size: 2.1rem; color: var(--rsz-accent); line-height: 1; margin-bottom: .15rem; }
.rsz__drop-title { font-size: .98rem; color: var(--rsz-text); margin: 0; font-weight: 500; }
.rsz__drop-or { font-size: .88rem; color: var(--rsz-muted); margin: 0 0 .35rem; }
.rsz__drop .rsz__choose { margin-top: .1rem; }

.rsz__formats { text-align: center; color: var(--rsz-muted); font-size: .82rem; margin: 1rem 0 0; }
.rsz__formats-dot { margin: 0 .4rem; }

/* =====================================================================
   СОСТОЯНИЕ 2: РЕДАКТОР
   ===================================================================== */
.rsz__toolbar { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; margin-bottom: .9rem; }

.rsz__work { display: flex; gap: 1rem; align-items: stretch; }
.rsz__stage { position: relative; flex: 1 1 auto; min-width: 0; background: var(--rsz-work-bg);
              border-radius: var(--rsz-radius-sm); overflow: hidden;
              display: flex; align-items: center; justify-content: center;
              padding: var(--rsz-stage-pad); min-height: var(--rsz-stage-h);
              /* шахматка для прозрачного фона (PNG/WebP) */
              background-image:
                  linear-gradient(45deg, #e9edf3 25%, transparent 25%),
                  linear-gradient(-45deg, #e9edf3 25%, transparent 25%),
                  linear-gradient(45deg, transparent 75%, #e9edf3 75%),
                  linear-gradient(-45deg, transparent 75%, #e9edf3 75%);
              background-size: 18px 18px;
              background-position: 0 0, 0 9px, 9px -9px, -9px 0; }

/* рамка обтягивает холст — на ней сидят ручки */
.rsz__frame { position: relative; display: inline-block; line-height: 0; max-width: 100%; }
.rsz__canvas { display: block; max-width: 100%;
               max-height: calc(var(--rsz-stage-h) - var(--rsz-stage-pad) * 2);
               box-shadow: 0 1px 6px rgba(20, 30, 60, .12); }

/* ручки ресайза */
.rsz__handle { position: absolute; z-index: 3; background: #fff; border: 2px solid var(--rsz-accent);
               box-shadow: 0 1px 3px rgba(20,30,60,.3); touch-action: none; }
/* углы — квадратные маркеры (пропорциональный масштаб) */
.rsz__handle--nw, .rsz__handle--ne, .rsz__handle--sw, .rsz__handle--se {
    width: 14px; height: 14px; border-radius: 3px; }
.rsz__handle--nw { top: -7px; left: -7px; cursor: nwse-resize; }
.rsz__handle--se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.rsz__handle--ne { top: -7px; right: -7px; cursor: nesw-resize; }
.rsz__handle--sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
/* стороны — продолговатые маркеры (одна сторона) */
.rsz__handle--n, .rsz__handle--s { width: 26px; height: 9px; border-radius: 5px; left: 50%; margin-left: -13px; cursor: ns-resize; }
.rsz__handle--e, .rsz__handle--w { width: 9px; height: 26px; border-radius: 5px; top: 50%; margin-top: -13px; cursor: ew-resize; }
.rsz__handle--n { top: -5px; }
.rsz__handle--s { bottom: -5px; }
.rsz__handle--w { left: -5px; }
.rsz__handle--e { right: -5px; }
.rsz__handle:hover { background: var(--rsz-accent); }

/* тег текущего размера во время drag */
.rsz__dimtag { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%);
               background: #1f2733; color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2;
               padding: .3rem .6rem; border-radius: 999px; pointer-events: none; white-space: nowrap; }

/* кнопка зума «реальный размер 1:1» */
.rsz__view { position: absolute; z-index: 5; top: 10px; right: 10px; width: 34px; height: 34px;
             border: 1px solid var(--rsz-card-border); border-radius: var(--rsz-radius-xs);
             background: rgba(255,255,255,.92); color: var(--rsz-text); cursor: pointer;
             display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
             box-shadow: 0 1px 4px rgba(20,30,60,.12); }
.rsz__view:hover { border-color: var(--rsz-accent); color: var(--rsz-accent); }
.rsz__view.is-on { background: var(--rsz-accent); color: #fff; border-color: var(--rsz-accent); }
.rsz__view .bi { line-height: 0; }

/* режим «реальный размер»: область скроллится, ручки скрыты */
.rsz__stage[data-view="full"] { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.rsz__stage[data-view="full"] .rsz__canvas { max-width: none; max-height: none; }
.rsz__stage[data-view="full"] .rsz__handle { display: none; }

.rsz__params { flex: 0 0 210px; display: flex; flex-direction: column; gap: .9rem; }
.rsz__param { display: flex; flex-direction: column; gap: .1rem; }
.rsz__param-cap { font-size: .82rem; font-weight: 700; color: var(--rsz-text); }
.rsz__param-main { font-size: .92rem; color: var(--rsz-text); }
.rsz__param-sub { font-size: .85rem; color: var(--rsz-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
.rsz__saving { font-size: .8rem; font-weight: 700; }
.rsz__saving--down { color: var(--rsz-ok); }
.rsz__saving--up { color: var(--rsz-warn); }

/* ---------------- группы контролов ---------------- */
.rsz__group { margin-top: 1.1rem; }
.rsz__group-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; }
.rsz__group-title { display: block; font-size: .92rem; font-weight: 700; margin-bottom: .55rem; }
.rsz__group-head .rsz__group-title { margin-bottom: 0; }
.rsz__info { color: var(--rsz-muted); cursor: help; font-size: .95rem; }
.rsz__info:hover { color: var(--rsz-accent); }

/* ---- Размер: компактные поля W × H + замок + «Original» ---- */
.rsz__size { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.rsz__dim { display: flex; flex-direction: column; gap: .25rem; flex: 0 0 auto; width: 128px; }
.rsz__dim-cap { font-size: .8rem; color: var(--rsz-muted); font-weight: 600; }
.rsz__dim-field { display: flex; align-items: center; gap: .3rem; background: #fff;
                  border: 1px solid var(--rsz-btn-outline); border-radius: var(--rsz-radius-xs);
                  padding: .42rem .6rem; transition: border-color .12s; }
.rsz__dim-num { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; color: var(--rsz-text);
                font-size: 1rem; font-weight: 600; padding: 0; }
.rsz__dim-num::-webkit-outer-spin-button,
.rsz__dim-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rsz__dim-num { -moz-appearance: textfield; }
.rsz__dim-unit { color: var(--rsz-muted); font-size: .85rem; flex: 0 0 auto; }

.rsz__lock { flex: 0 0 auto; align-self: flex-end; margin-bottom: 1px;
             width: 40px; height: 40px; border: 1px solid var(--rsz-btn-outline);
             border-radius: var(--rsz-radius-xs); background: #fff; color: var(--rsz-muted);
             cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
             font-size: 1.15rem; transition: all .12s; }
.rsz__lock:hover { border-color: #c2c8d2; color: var(--rsz-text); }
.rsz__lock.is-on { background: var(--rsz-accent); border-color: var(--rsz-accent); color: #fff; }
.rsz__lock .bi { line-height: 0; }

/* кнопка «вернуть оригинальный размер» */
.rsz__original { align-self: flex-end; margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
                 height: 40px; padding: 0 .85rem; border: 1px solid var(--rsz-btn-outline);
                 border-radius: var(--rsz-radius-xs); background: #fff; color: var(--rsz-text);
                 cursor: pointer; font-size: .86rem; font-weight: 600; white-space: nowrap; transition: all .12s; }
.rsz__original:hover { border-color: var(--rsz-accent); color: var(--rsz-accent); background: var(--rsz-accent-soft); }
.rsz__original .bi { font-size: .95rem; line-height: 0; }
.rsz__original:focus { outline: none; }
.rsz__original:focus-visible { outline: 2px solid var(--rsz-accent); outline-offset: 2px; }

/* ---- Пресеты (чипы) ---- */
.rsz__presets { margin-top: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.rsz__preset-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rsz__preset-cap { font-size: .8rem; color: var(--rsz-muted); font-weight: 600; flex: 0 0 auto;
                   min-width: 42px; }
.rsz__chip { border: 1px solid var(--rsz-btn-outline); background: #fff; color: var(--rsz-text);
             border-radius: 999px; padding: .32rem .7rem; font-size: .84rem; font-weight: 600;
             cursor: pointer; transition: all .12s; }
.rsz__chip:hover { border-color: var(--rsz-accent); color: var(--rsz-accent); background: var(--rsz-accent-soft); }
.rsz__chip:active { background: var(--rsz-accent); color: #fff; border-color: var(--rsz-accent); }

/* ---- Вес файла ---- */
.rsz__weight.is-muted .rsz__weight-row { opacity: .5; pointer-events: none; }
.rsz__weight-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

.rsz__segment { display: inline-flex; border: 1px solid var(--rsz-btn-outline);
                border-radius: var(--rsz-radius-xs); overflow: hidden; background: #fff; flex: 0 0 auto; }
.rsz__seg { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: #fff;
            color: var(--rsz-text); padding: .45rem .8rem; cursor: pointer; font-size: .88rem; font-weight: 600; }
.rsz__seg + .rsz__seg { border-left: 1px solid var(--rsz-line); }
.rsz__seg:hover { background: #f2f4f7; }
.rsz__seg.is-active { background: var(--rsz-accent); color: #fff; }
.rsz__seg i { font-size: 1em; }

.rsz__weight-ctl { flex: 1 1 200px; min-width: 0; }
.rsz__quality { display: flex; align-items: center; gap: .8rem; }
.rsz__range { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none;
              height: 6px; border-radius: 999px; background: var(--rsz-line); cursor: pointer; }
.rsz__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
              width: 18px; height: 18px; border-radius: 50%; background: var(--rsz-accent);
              border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20,30,60,.3); cursor: pointer; }
.rsz__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
              background: var(--rsz-accent); border: 2px solid #fff;
              box-shadow: 0 1px 4px rgba(20,30,60,.3); cursor: pointer; }
.rsz__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--rsz-line); }
.rsz__q-val { flex: 0 0 auto; font-size: .9rem; font-weight: 700; color: var(--rsz-text);
              min-width: 3em; text-align: right; }

.rsz__target-field { display: inline-flex; align-items: center; gap: .25rem; background: #fff;
                     border: 1px solid var(--rsz-btn-outline); border-radius: var(--rsz-radius-xs);
                     padding: .42rem .6rem; transition: border-color .12s; }
.rsz__target-num { width: 5em; border: 0; background: none; color: var(--rsz-text);
                   font-size: 1rem; font-weight: 600; text-align: right; padding: 0; }
.rsz__target-num::-webkit-outer-spin-button,
.rsz__target-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rsz__target-num { -moz-appearance: textfield; }
.rsz__target-unit { color: var(--rsz-muted); font-size: .85rem; }

.rsz__weight-note { margin: .6rem 0 0; font-size: .82rem; color: var(--rsz-muted); }

/* ---- Формат ---- */
.rsz__group--format .rsz__format { max-width: 220px; font-size: .92rem; font-weight: 600;
                                   border-radius: var(--rsz-radius-xs); border-color: var(--rsz-btn-outline); }

/* короткие подписи параметров — только на мобайле */
.rsz__cap-short { display: none; }

/* действия редактора: главная — группа Download + dropdown Copy */
.rsz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.rsz__download { display: inline-flex; flex: 0 0 auto; }
.rsz__dl-main { flex: 1 1 auto; }
.rsz__dl-split { flex: 0 0 auto; }
.rsz__dl-main, .rsz__dl-split { border-radius: 0; }
.rsz__dl-main { border-top-left-radius: var(--rsz-radius-xs); border-bottom-left-radius: var(--rsz-radius-xs); }
.rsz__dl-split { border-top-right-radius: var(--rsz-radius-xs); border-bottom-right-radius: var(--rsz-radius-xs);
                 border-left: 1px solid rgba(255,255,255,.35); }
.rsz__dl-menu { font-size: .92rem; }
.rsz__dl-menu.disabled, .rsz__copy[disabled] { pointer-events: none; opacity: .5; }

/* =====================================================================
   СОСТОЯНИЕ ОШИБКИ
   ===================================================================== */
.rsz__alert { display: flex; align-items: flex-start; gap: .7rem; background: var(--rsz-err-bg);
              border: 1px solid var(--rsz-err-border); border-radius: var(--rsz-radius-sm);
              padding: .9rem 1rem; margin-bottom: 1.1rem; color: var(--rsz-err); }
.rsz__alert-icon { font-size: 1.25rem; line-height: 1.3; flex: 0 0 auto; }
.rsz__alert-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; }
.rsz__alert-title { font-size: .98rem; }
.rsz__alert-hint { color: #8a4b4b; font-size: .88rem; font-weight: 400; }
.rsz__alert-close { background: none; border: 0; color: var(--rsz-err); opacity: .6; cursor: pointer;
                    padding: .1rem; line-height: 1; flex: 0 0 auto; }
.rsz__alert-close:hover { opacity: 1; }
.rsz__actions--error { justify-content: center; margin-top: 1.1rem; }

/* =====================================================================
   Всплывающая подсказка ⓘ — отдельный fixed-элемент (см. _common.md).
   ===================================================================== */
.rsz-tip { position: fixed; z-index: 1080; max-width: 260px; background: #1f2733; color: #fff;
           font-size: .82rem; line-height: 1.4; padding: .6rem .75rem; border-radius: 8px;
           box-shadow: 0 6px 20px rgba(0,0,0,.18); white-space: pre-line; pointer-events: none;
           opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.rsz-tip.is-open { opacity: 1; transform: translateY(0); }

/* тост «скопировано» */
.rsz__toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
              background: #1f2733; color: #fff; font-size: .88rem; padding: .5rem .9rem;
              border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 1085; }

/* =====================================================================
   Адаптив. Узкая колонка/планшет → одна колонка; мобайл 360 без гор.скролла.
   ===================================================================== */
@media (max-width: 720px) {
    .rsz { padding: 16px; }
    .rsz__work { flex-direction: column; }
    .rsz { --rsz-stage-h: 300px; }
    .rsz__params { flex-basis: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .rsz__param-cap { font-size: .78rem; }
    .rsz__param-main { font-size: .8rem; }
    .rsz__param-sub { font-size: .78rem; }
    .rsz__cap-full { display: none; }
    .rsz__cap-short { display: inline; }

    /* размер: поля делят ряд пополам, Original — отдельной строкой на всю ширину */
    .rsz__dim { flex: 1 1 0; width: auto; }
    .rsz__original { width: 100%; margin-left: 0; justify-content: center; order: 9; }

    /* вес: сегмент и контрол в столбик, оба на всю ширину */
    .rsz__weight-row { flex-direction: column; align-items: stretch; gap: .7rem; }
    .rsz__segment { width: 100%; }
    .rsz__seg { flex: 1 1 0; justify-content: center; }
    .rsz__weight-ctl { flex: 1 1 auto; }
    .rsz__target-field { width: 100%; justify-content: flex-end; }
    .rsz__target-num { width: auto; flex: 1 1 auto; }
    .rsz__group--format .rsz__format { max-width: none; }

    /* действия: главная (Download-группа) — на всю ширину, вторичные — текстовые в ряд */
    .rsz__download { flex: 1 0 100%; display: flex; }
    .rsz__actions { gap: .5rem; }
    .rsz__actions .rsz__btn-outline { flex: 1 1 0; background: none; border-color: transparent;
                                      color: var(--rsz-accent); white-space: nowrap; font-size: .9rem; }
    .rsz__actions .rsz__btn-outline:hover { background: #f5f7fa; }
}

@media (max-width: 380px) {
    .rsz { --rsz-stage-h: 260px; }
    .rsz__preset-cap { min-width: 100%; margin-bottom: -.2rem; }
    .rsz__chip { padding: .3rem .6rem; font-size: .82rem; }
}

/* =====================================================================
   Телефон: рабочая область во всю ширину экрана.
   Класс вешает JS, когда раскладка телефонная и открыт рабочий экран — карточка
   отдаёт свои боковые поля картинке, а текстовые блоки забирают их себе, чтобы
   подписи не липли к кромке. Высоту сцены считает fitStage().
   ===================================================================== */
@media (max-width: 720px) {
    /* Нижнее поле карточки вдвое меньше: под ней и так идёт следующий блок страницы,
       а каждый её пиксель отнят у снимка. Верхнее трогать нельзя — им карточка
       упирается в кромку экрана. */
    .rsz.is-wide-stage { padding-left: 0; padding-right: 0;
                        padding-bottom: calc(var(--rsz-edge-pad) / 2);
                        border-left: 0; border-right: 0; border-radius: 0;
                        margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
                        max-width: 100vw; }
    .rsz.is-wide-stage .rsz__toolbar,
    .rsz.is-wide-stage .rsz__params,
    .rsz.is-wide-stage .rsz__group,
    .rsz.is-wide-stage .rsz__actions,
    .rsz.is-wide-stage .rsz__download { padding-left: var(--rsz-edge-pad); padding-right: var(--rsz-edge-pad); }
    .rsz.is-wide-stage .rsz__stage { border-radius: 0; }

    /* Панель действий липнет к низу экрана: содержимое инструмента в телефон целиком
       не влезает, а кнопка скачивания обязана быть видна всегда (требование владельца). */
    .rsz.is-wide-stage .rsz__actions { position: sticky; bottom: 0; z-index: 3; background: #fff;
                                      padding-top: .55rem;
                                      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + .45rem);
                                      box-shadow: 0 -8px 16px rgba(20, 30, 60, .07); }

    .rsz.is-wide-stage .rsz__params { gap: .45rem; }
    .rsz.is-wide-stage .rsz__param-cap  { font-size: .72rem; line-height: 1.15; }
    .rsz.is-wide-stage .rsz__param-main { font-size: .78rem; line-height: 1.2; }
    .rsz.is-wide-stage .rsz__param-sub  { font-size: .72rem; line-height: 1.15; }
    .rsz.is-wide-stage .rsz__work { gap: .5rem; }
}