/* Полноэкранный тренажёр использует собственную шкалу и не зависит от темы кабинета. */
.trainer {
    /* Шкала управления тренировки сохраняется при смене типографики кабинета. */
    --size-touch: 2.75rem;
    --weight-semibold: 650;
    --line-button: normal;
    --trainer-white: #ffffff;
    --trainer-white-warm: #fff7d6;
    --trainer-black: #000000;
    --trainer-work-start: #34c26e;
    --trainer-work-middle: #1f9d55;
    --trainer-work-end: #12703a;
    --trainer-rest-start: #4aa8f0;
    --trainer-rest-middle: #2f8fd8;
    --trainer-rest-end: #1d63a0;
    --trainer-finish-start: #2b3340;
    --trainer-finish-middle: #1b1f24;
    --trainer-finish-end: #0e1218;
    --trainer-danger: #ffd8d8;
    --trainer-danger-bg: rgb(92 12 12 / 72%);
    --trainer-glass: rgb(255 255 255 / 18%);
    --trainer-glass-strong: rgb(255 255 255 / 22%);
    --trainer-glass-soft: rgb(255 255 255 / 10%);
    --trainer-glass-border: rgb(255 255 255 / 35%);
    --trainer-glass-border-soft: rgb(255 255 255 / 18%);
    --trainer-dark-glass: rgb(0 0 0 / 22%);
    --trainer-overlay: rgb(0 0 0 / 55%);
    --trainer-shadow: rgb(0 0 0 / 25%);
    --trainer-shadow-strong: rgb(0 0 0 / 30%);
    --trainer-focus: rgb(255 255 255 / 78%);
    --trainer-work-bg: radial-gradient(130% 100% at 50% 0%, var(--trainer-work-start) 0%, var(--trainer-work-middle) 45%, var(--trainer-work-end) 100%);
    --trainer-rest-bg: radial-gradient(130% 100% at 50% 0%, var(--trainer-rest-start) 0%, var(--trainer-rest-middle) 45%, var(--trainer-rest-end) 100%);
    --trainer-finish-bg: radial-gradient(120% 90% at 50% 0%, var(--trainer-finish-start) 0%, var(--trainer-finish-middle) 60%, var(--trainer-finish-end) 100%);
    --trainer-page-padding-y: 3vh;
    --trainer-page-padding-x: 3vw;
    --trainer-header-top: 1.2vh;
    --trainer-header-side: 1.6vw;
    --trainer-header-height: 4.6vh;
    --trainer-header-gap: 1vw;
    --trainer-header-font: 1.8vh;
    --trainer-header-button-height: max(4.2vh, var(--size-touch));
    --trainer-header-button-padding: 1.2vw;
    --trainer-progress-width: 40vw;
    --trainer-progress-height: 0.9vh;
    --trainer-progress-gap: 0.4vh;
    --trainer-content-gap: 2vh;
    --trainer-loaded-timer-gap: 0.9vh;
    --trainer-label-size: 3.2vh;
    --trainer-title-size: 9vh;
    --trainer-load-size: 6.5vh;
    --trainer-hint-size: 3.2vh;
    --trainer-action-size: 4.2vh;
    --trainer-action-padding-y: 1.6vh;
    --trainer-action-padding-x: 4vw;
    --trainer-action-min-height: 7.4vh;
    --trainer-plain-timer-size: 34vh;
    --trainer-ring-size: 52vh;
    --trainer-ring-value-size: 17vh;
    --trainer-ring-stroke: 2.2;
    --trainer-load-gap: 1.5vh;
    --trainer-chip-radius: 2vh;
    --trainer-chip-padding-y: 0.2vh;
    --trainer-chip-padding-x: 2vh;
    --trainer-side-padding-y: 0.7vh;
    --trainer-side-padding-x: 2vh;
    --trainer-footer-bottom: 1.5vh;
    --trainer-footer-font: 2.2vh;
    --trainer-footer-gap: 1vw;
    --trainer-secondary-height: max(4.4vh, var(--size-touch));
    --trainer-secondary-font: 2vh;
    --trainer-secondary-padding: 1.2vw;
    --trainer-rest-left: 44%;
    --trainer-rest-gap: 3vw;
    --trainer-card-radius: 4vh;
    --trainer-card-padding-y: 5vh;
    --trainer-card-padding-x: 4vw;
    --trainer-card-gap: 2.5vh;
    --trainer-next-title-size: 8.5vh;
    --trainer-next-load-size: 5.5vh;
    --trainer-next-hint-size: 3vh;
    --trainer-completed-size: 2.8vh;
    --trainer-completed-padding-y: 1.2vh;
    --trainer-completed-padding-x: 2vw;
    --trainer-pause-gap: 3vh;
    --trainer-pause-icon-size: 16vh;
    --trainer-pause-title-size: 4vh;
    --trainer-finish-title-size: 9vh;
    --trainer-stats-size: 4vh;
    --trainer-fields-gap: 2vw;
    --trainer-field-label-size: 2.6vh;
    --trainer-number-label-height: calc(var(--trainer-field-label-size) * 2.4);
    --trainer-number-width: 22vh;
    --trainer-number-size: 7vh;
    --trainer-number-height: 11vh;
    --trainer-note-width: 80vw;
    --trainer-note-max-width: 900px;
    --trainer-note-size: 3.5vh;
    --trainer-note-height: 11vh;
    --trainer-input-radius: 2vh;
    --trainer-input-padding: 1.5vh;
    --trainer-message-width: 70vw;
    --trainer-message-title-size: 6vh;
    --trainer-message-text-size: 2.8vh;
    --trainer-error-width: 80vw;
    --trainer-error-radius: 1.5vh;
    --trainer-error-padding: 1.5vh 2vw;
    --trainer-blur: 30px;
    --trainer-action-blur: 20px;
    --trainer-border: 1px;
    --trainer-focus-width: 0.4vh;
    --trainer-base-line-height: normal;
    --trainer-pill-radius: 99vh;
    --trainer-content-max-width: 94vw;
    --trainer-copy-max-width: 90vw;
    --trainer-tight-gap: 1vh;
    --trainer-control-gap: 0.8vh;
    --trainer-adjust-popup-width: 18vw;
    --trainer-adjust-popup-offset: 1vh;
    --trainer-adjust-popup-padding: 1vh;
    --trainer-message-gap: 0.7vh;
    --trainer-timer-shadow: 0 1vh 4vh var(--trainer-shadow);
    --trainer-action-shadow: 0 1.5vh 4vh var(--trainer-shadow), inset 0 var(--trainer-border) 0 var(--trainer-glass-border);
    --trainer-card-shadow: 0 3vh 8vh var(--trainer-shadow-strong), inset 0 var(--trainer-border) 0 var(--trainer-glass-border-soft);
    --trainer-z: 40;
    --trainer-overlay-z: 10;
    position: fixed;
    z-index: var(--trainer-z);
    inset: 0;
    overflow: hidden;
    color: var(--trainer-white);
    background: var(--trainer-finish-bg);
    font-family: ui-rounded, -apple-system, "SF Pro Rounded", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    line-height: var(--trainer-base-line-height);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.trainer--work { background: var(--trainer-work-bg); }
.trainer--rest { background: var(--trainer-rest-bg); }
.trainer--finish, .trainer--paused { background: var(--trainer-finish-bg); }
.trainer--work.trainer--paused { background: var(--trainer-work-bg); }
.trainer--rest.trainer--paused { background: var(--trainer-rest-bg); }

.app-shell:has(#trainer-page:not([hidden])) .app-header { display: none; }
.app-shell:has(#trainer-page:not([hidden])) .main-content { padding: 0; }
#trainer-page { gap: 0; }

.trainer *, .trainer *::before, .trainer *::after { box-sizing: border-box; }
.trainer :focus-visible { outline: var(--trainer-focus-width) solid var(--trainer-focus); outline-offset: var(--trainer-focus-width); }
.trainer p, .trainer h2, .trainer h3 { margin: 0; }
.trainer button, .trainer input, .trainer textarea { font-family: inherit; }

.trainer-underlay {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
}

.trainer-header {
    position: fixed;
    z-index: var(--trainer-overlay-z);
    top: var(--trainer-header-top);
    right: var(--trainer-header-side);
    left: var(--trainer-header-side);
    display: flex;
    min-height: var(--trainer-header-height);
    align-items: start;
    justify-content: flex-end;
    gap: var(--trainer-header-gap);
    pointer-events: none;
}

.trainer-header-progress {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: var(--trainer-progress-width);
    align-items: center;
    gap: var(--trainer-header-gap);
    color: var(--trainer-white);
    font-size: var(--trainer-header-font);
    text-align: left;
    pointer-events: auto;
}

.trainer .trainer-header .eyebrow {
    margin: 0;
    color: var(--trainer-white);
    font-size: var(--trainer-header-font);
    opacity: 0.72;
}

.trainer-progress { display: grid; gap: var(--trainer-progress-gap); }
.trainer-header-progress > .eyebrow, .trainer-progress > span {
    position: absolute;
    width: var(--size-sr);
    height: var(--size-sr);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.trainer-progress-track {
    width: var(--trainer-progress-width);
    height: var(--trainer-progress-height);
    overflow: hidden;
    border: 0;
    border-radius: var(--trainer-pill-radius);
    background: var(--trainer-glass);
    color: var(--trainer-white);
    appearance: none;
    -webkit-appearance: none;
}
.trainer-progress-track::-webkit-progress-bar { border-radius: var(--trainer-pill-radius); background: var(--trainer-glass); }
.trainer-progress-track::-webkit-progress-value { border-radius: var(--trainer-pill-radius); background: var(--trainer-white); }
.trainer-progress-track::-moz-progress-bar { border-radius: var(--trainer-pill-radius); background: var(--trainer-white); }

.trainer-header-actions { display: flex; gap: var(--trainer-header-gap); pointer-events: auto; }
.trainer .button {
    border-color: var(--trainer-glass-border);
    border-radius: var(--trainer-pill-radius);
    background: var(--trainer-glass);
    color: var(--trainer-white);
    box-shadow: inset 0 var(--trainer-border) 0 var(--trainer-glass-border);
}
.trainer .button:hover:not(:disabled) { border-color: var(--trainer-white); background: var(--trainer-glass-strong); color: var(--trainer-white); }
.trainer .button:disabled { opacity: 0.55; }
.trainer .trainer-header-button {
    min-height: var(--trainer-header-button-height);
    padding: 0 var(--trainer-header-button-padding);
    border-color: var(--trainer-glass-border-soft);
    background: var(--trainer-glass-soft);
    font-size: var(--trainer-header-font);
}

.trainer-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: var(--trainer-page-padding-y) var(--trainer-page-padding-x);
}

.trainer-work-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    overflow-y: auto;
    gap: var(--trainer-content-gap);
    padding-bottom: calc(var(--trainer-secondary-height) + var(--trainer-footer-bottom) + var(--trainer-content-gap));
}

.trainer-work-stage:has(.trainer-timer--ring):has(.trainer-load) {
    --trainer-content-gap: var(--trainer-loaded-timer-gap);
}

.trainer-work-top, .trainer-work-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--trainer-content-gap);
}

.trainer-work-bottom { max-width: var(--trainer-content-max-width); gap: var(--trainer-tight-gap); }
.trainer-label {
    font-size: var(--trainer-label-size);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}
.trainer-work-title {
    max-width: var(--trainer-content-max-width);
    font-size: var(--trainer-title-size);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.trainer-load {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--trainer-load-gap);
}
.trainer-load-chip, .trainer-side-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--trainer-border) solid var(--trainer-glass-border-soft);
    border-radius: var(--trainer-chip-radius);
    background: var(--trainer-glass-strong);
    color: var(--trainer-white);
    font-size: var(--trainer-load-size);
    font-weight: 700;
    line-height: 1.15;
    padding: var(--trainer-chip-padding-y) var(--trainer-chip-padding-x);
}
.trainer-side-badge {
    border-radius: var(--trainer-pill-radius);
    padding: var(--trainer-side-padding-y) var(--trainer-side-padding-x);
    font-size: calc(var(--trainer-load-size) * 0.62);
    letter-spacing: 0.08em;
}
.trainer-load .trainer-side-badge {
    padding: var(--trainer-chip-padding-y) var(--trainer-chip-padding-x);
    border-radius: var(--trainer-chip-radius);
    font-size: var(--trainer-load-size);
}

.trainer-timer { display: grid; flex: 0 0 auto; place-items: center; }
.trainer-timer-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.trainer-timer--plain { width: 100%; }
.trainer-timer--plain .trainer-timer-value {
    font-size: var(--trainer-plain-timer-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: var(--trainer-timer-shadow);
}
.trainer-timer--ring { width: var(--trainer-ring-size); height: var(--trainer-ring-size); }
.trainer-ring { position: relative; display: grid; width: 100%; height: 100%; place-items: center; }
.trainer-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.trainer-ring-track, .trainer-ring-fill { fill: none; stroke-width: var(--trainer-ring-stroke); stroke-linecap: round; }
.trainer-ring-track { stroke: var(--trainer-glass); }
.trainer-ring-fill { stroke: var(--trainer-white); transition: stroke-dashoffset 250ms linear; }
.trainer-ring .trainer-timer-value {
    position: relative;
    font-size: var(--trainer-ring-value-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: var(--trainer-timer-shadow);
}
.trainer-timer-value--urgent { color: var(--trainer-white-warm); animation: trainer-tick 500ms ease-in-out infinite alternate; }
@keyframes trainer-tick { from { transform: scale(1); } to { transform: scale(1.04); } }

.trainer-hint {
    max-width: var(--trainer-copy-max-width);
    color: var(--trainer-white);
    font-size: var(--trainer-hint-size);
    line-height: 1.25;
    opacity: 0.85;
}

.trainer .trainer-primary-action {
    min-height: var(--trainer-action-min-height);
    padding: var(--trainer-action-padding-y) var(--trainer-action-padding-x);
    border-color: var(--trainer-glass-border);
    background: var(--trainer-glass);
    box-shadow: var(--trainer-action-shadow);
    font-size: var(--trainer-action-size);
    font-weight: 700;
    line-height: 1;
    backdrop-filter: blur(var(--trainer-action-blur));
    -webkit-backdrop-filter: blur(var(--trainer-action-blur));
}

.trainer-secondary-actions {
    position: fixed;
    z-index: calc(var(--trainer-overlay-z) - 1);
    bottom: var(--trainer-footer-bottom);
    left: 50%;
    display: flex;
    gap: var(--trainer-footer-gap);
    transform: translateX(-50%);
}
.trainer .trainer-secondary-action {
    min-height: var(--trainer-secondary-height);
    padding: 0 var(--trainer-secondary-padding);
    border-color: var(--trainer-glass-border-soft);
    background: var(--trainer-glass-soft);
    font-size: var(--trainer-secondary-font);
}
.trainer-hotkeys {
    position: fixed;
    right: var(--trainer-page-padding-x);
    bottom: var(--trainer-footer-bottom);
    display: flex;
    min-height: var(--trainer-secondary-height);
    align-items: center;
    color: var(--trainer-white);
    font-size: var(--trainer-footer-font);
    opacity: 0.68;
}

.trainer-adjust {
    position: fixed;
    z-index: calc(var(--trainer-overlay-z) - 1);
    bottom: var(--trainer-footer-bottom);
    left: var(--trainer-page-padding-x);
    color: var(--trainer-white);
    font-size: var(--trainer-secondary-font);
    text-align: left;
}
.trainer-adjust summary {
    display: flex;
    align-items: center;
    min-height: var(--trainer-secondary-height);
    padding: 0 var(--trainer-secondary-padding);
    border: var(--trainer-border) solid var(--trainer-glass-border-soft);
    border-radius: var(--trainer-pill-radius);
    background: var(--trainer-glass-soft);
    cursor: pointer;
    line-height: normal;
    list-style-position: inside;
}
.trainer-adjust-buttons {
    position: absolute;
    bottom: calc(var(--trainer-secondary-height) + var(--trainer-adjust-popup-offset));
    left: 0;
    display: grid;
    min-width: var(--trainer-adjust-popup-width);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--trainer-control-gap);
    padding: var(--trainer-adjust-popup-padding);
    border: var(--trainer-border) solid var(--trainer-glass-border-soft);
    border-radius: var(--trainer-chip-radius);
    background: var(--trainer-overlay);
    backdrop-filter: blur(var(--trainer-action-blur));
    -webkit-backdrop-filter: blur(var(--trainer-action-blur));
}
.trainer-adjust-buttons .button { min-height: var(--trainer-secondary-height); white-space: nowrap; }

.trainer-rest-layout {
    display: flex;
    align-items: safe center;
    overflow-y: auto;
    gap: var(--trainer-rest-gap);
}
.trainer-rest-primary {
    display: flex;
    flex: 0 0 var(--trainer-rest-left);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--trainer-content-gap);
}
.trainer-next {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--trainer-card-gap);
    padding: var(--trainer-card-padding-y) var(--trainer-card-padding-x);
    border: var(--trainer-border) solid var(--trainer-glass-border-soft);
    border-radius: var(--trainer-card-radius);
    background: var(--trainer-dark-glass);
    box-shadow: var(--trainer-card-shadow);
    backdrop-filter: blur(var(--trainer-blur));
    -webkit-backdrop-filter: blur(var(--trainer-blur));
}
.trainer-next-title {
    max-width: 100%;
    font-size: var(--trainer-next-title-size);
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
}
.trainer-next .trainer-load-chip { font-size: var(--trainer-next-load-size); }
.trainer-next .trainer-side-badge { font-size: var(--trainer-next-load-size); }
.trainer-next-hint { max-width: 100%; font-size: var(--trainer-next-hint-size); line-height: 1.25; opacity: 0.85; }
.trainer-completed-chip {
    max-width: 100%;
    padding: var(--trainer-completed-padding-y) var(--trainer-completed-padding-x);
    border: var(--trainer-border) solid var(--trainer-glass-border-soft);
    border-radius: var(--trainer-pill-radius);
    background: var(--trainer-dark-glass);
    font-size: var(--trainer-completed-size);
    line-height: 1.2;
}
.trainer-completed-chip strong { font-weight: 800; }

.trainer-pause-overlay {
    position: fixed;
    z-index: var(--trainer-overlay-z);
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--trainer-pause-gap);
    padding: var(--trainer-page-padding-y) var(--trainer-page-padding-x);
    background: var(--trainer-overlay);
    backdrop-filter: blur(var(--trainer-blur));
    -webkit-backdrop-filter: blur(var(--trainer-blur));
}
.trainer-pause-icon { font-size: var(--trainer-pause-icon-size); line-height: 1; }
.trainer-pause-title { max-width: var(--trainer-copy-max-width); font-size: var(--trainer-pause-title-size); line-height: 1.15; }

.trainer-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: var(--trainer-content-gap);
    overflow-y: auto;
}
.trainer-finish-title { font-size: var(--trainer-finish-title-size); font-weight: 800; line-height: 1; }
.trainer-status { max-width: var(--trainer-message-width); color: var(--trainer-white); font-size: var(--trainer-stats-size); line-height: 1.35; }
.trainer-fields {
    display: grid;
    grid-template-columns: repeat(4, var(--trainer-number-width));
    justify-content: center;
    gap: var(--trainer-fields-gap);
    width: 100%;
}
.trainer-field { display: grid; justify-items: center; gap: var(--trainer-tight-gap); }
.trainer-field--number { grid-template-rows: var(--trainer-number-label-height) var(--trainer-number-height); }
.trainer-field--number .trainer-field-label { display: flex; align-items: center; justify-content: center; }
.trainer-field-label {
    font-size: var(--trainer-field-label-size);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.75;
}
.trainer-field-input {
    border: var(--trainer-border) solid var(--trainer-glass-border);
    border-radius: var(--trainer-input-radius);
    background: var(--trainer-glass-soft);
    color: var(--trainer-white);
    text-align: center;
}
.trainer-field--number .trainer-field-input {
    width: var(--trainer-number-width);
    height: var(--trainer-number-height);
    font-size: var(--trainer-number-size);
}
.trainer-field--note { grid-column: 1 / -1; width: 100%; }
.trainer-field--note .trainer-field-input {
    width: min(var(--trainer-note-width), var(--trainer-note-max-width));
    height: var(--trainer-note-height);
    padding: var(--trainer-input-padding);
    font-size: var(--trainer-note-size);
    line-height: 1.2;
    text-align: left;
    resize: none;
}
.trainer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--trainer-footer-gap); }
.trainer-error {
    width: min(100%, var(--trainer-error-width));
    padding: var(--trainer-error-padding);
    border: var(--trainer-border) solid var(--trainer-danger);
    border-radius: var(--trainer-error-radius);
    background: var(--trainer-danger-bg);
    color: var(--trainer-danger);
    font-size: var(--trainer-message-text-size);
    line-height: 1.3;
}
.trainer-error p + p { margin-top: var(--trainer-message-gap); }

.trainer-message-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    overflow-y: auto;
    gap: var(--trainer-content-gap);
    padding: var(--trainer-page-padding-y) var(--trainer-page-padding-x);
}
.trainer-message-title { max-width: var(--trainer-message-width); font-size: var(--trainer-message-title-size); line-height: 1.08; overflow-wrap: anywhere; }
.trainer-hidden { display: none !important; }

/* Планшет в портретной ориентации получает вертикальный rest, чтобы кольцо не вылезало из 44%-й колонки. */
@media (orientation: portrait) and (max-width: 1023px) {
    .trainer {
        --trainer-title-size: 7vh;
        --trainer-load-size: 5vh;
        --trainer-plain-timer-size: 28vh;
        --trainer-ring-size: min(42vh, 65vw);
        --trainer-ring-value-size: 13vh;
        --trainer-next-title-size: 6.5vh;
        --trainer-next-load-size: 4.5vh;
        --trainer-card-padding-y: 3.5vh;
        --trainer-portrait-layout-gap: 4vh;
        --trainer-portrait-header-clearance: 7vh;
        --trainer-portrait-footer-clearance: 8vh;
        --trainer-viewport-height: 100vh;
        overflow-y: auto;
    }
    .trainer-underlay { min-height: var(--trainer-viewport-height); height: auto; grid-template-rows: auto; }
    .trainer-work-stage {
        min-height: var(--trainer-viewport-height);
        padding-top: var(--trainer-portrait-header-clearance);
        padding-bottom: var(--trainer-portrait-footer-clearance);
    }
    .trainer-rest-layout {
        min-height: var(--trainer-viewport-height);
        flex-direction: column;
        align-items: stretch;
        gap: var(--trainer-portrait-layout-gap);
        padding-top: var(--trainer-portrait-header-clearance);
        padding-bottom: var(--trainer-portrait-footer-clearance);
    }
    .trainer-rest-primary { flex-basis: auto; }
    .trainer-next { flex: 0 0 auto; }
    .trainer-fields { grid-template-columns: repeat(2, var(--trainer-number-width)); }
    .trainer-finish {
        min-height: var(--trainer-viewport-height);
        height: auto;
        padding-top: var(--trainer-portrait-header-clearance);
        padding-bottom: var(--trainer-portrait-footer-clearance);
    }
    .trainer-message-card { position: relative; min-height: var(--trainer-viewport-height); }
}

/* На узких экранах крупная настенная раскладка превращается в прокручиваемую, но блок «Дальше» остаётся видимым. */
@media (max-width: 700px) {
    .trainer {
        --trainer-page-padding-y: 2.2vh;
        --trainer-page-padding-x: 4vw;
        --trainer-header-side: 3vw;
        --trainer-header-height: 5.2vh;
        --trainer-header-font: 1.8vh;
        --trainer-header-button-height: max(5vh, var(--size-touch));
        --trainer-header-button-padding: 2.8vw;
        --trainer-progress-width: 34vw;
        --trainer-label-size: 2.6vh;
        --trainer-title-size: 5.5vh;
        --trainer-load-size: 4vh;
        --trainer-hint-size: 2.6vh;
        --trainer-action-size: 3vh;
        --trainer-action-padding-x: 7vw;
        --trainer-action-min-height: 6.5vh;
        --trainer-plain-timer-size: 22vh;
        --trainer-ring-size: min(42vh, 86vw);
        --trainer-ring-value-size: 10vh;
        --trainer-next-title-size: 5vh;
        --trainer-next-load-size: 3.7vh;
        --trainer-next-hint-size: 2.5vh;
        --trainer-card-padding-y: 3vh;
        --trainer-card-padding-x: 5vw;
        --trainer-completed-size: 2.2vh;
        --trainer-secondary-font: 1.9vh;
        --trainer-footer-font: 1.8vh;
        --trainer-fields-gap: 1.5vh;
        --trainer-number-width: 42vw;
        --trainer-number-size: 5vh;
        --trainer-number-height: 8vh;
        --trainer-note-width: 90vw;
        --trainer-note-size: 2.7vh;
        --trainer-stats-size: 3vh;
        --trainer-message-width: 90vw;
        --trainer-narrow-content-width: 92vw;
        --trainer-narrow-adjust-bottom: 7.5vh;
        --trainer-narrow-adjust-width: 72vw;
        --trainer-narrow-layout-gap: 4vh;
        --trainer-narrow-header-clearance: 8vh;
        --trainer-narrow-footer-clearance: 8vh;
        --trainer-narrow-work-footer: 15vh;
        --trainer-narrow-finish-footer: 5vh;
        --trainer-viewport-height: 100vh;
        overflow-y: auto;
    }
    .trainer-underlay { min-height: 100%; height: auto; grid-template-rows: auto; }
    .trainer-header-progress { grid-template-columns: 1fr; }
    .trainer .trainer-header .eyebrow { display: none; }
    .trainer-progress > span { display: none; }
    .trainer-work-stage {
        min-height: var(--trainer-viewport-height);
        padding-top: var(--trainer-narrow-header-clearance);
        padding-bottom: var(--trainer-narrow-work-footer);
    }
    .trainer-work-title { max-width: var(--trainer-narrow-content-width); }
    .trainer-work-bottom { max-width: var(--trainer-narrow-content-width); }
    .trainer-adjust { right: auto; bottom: var(--trainer-narrow-adjust-bottom); }
    .trainer-adjust-buttons { min-width: var(--trainer-narrow-adjust-width); }
    .trainer-secondary-actions { bottom: var(--trainer-footer-bottom); left: var(--trainer-page-padding-x); transform: none; }
    .trainer-hotkeys { display: none; }
    .trainer-rest-layout {
        min-height: var(--trainer-viewport-height);
        flex-direction: column;
        align-items: stretch;
        gap: var(--trainer-narrow-layout-gap);
        padding-top: var(--trainer-narrow-header-clearance);
        padding-bottom: var(--trainer-narrow-footer-clearance);
    }
    .trainer-rest-primary { flex-basis: auto; }
    .trainer-next { flex: 0 0 auto; }
    .trainer-fields { grid-template-columns: repeat(2, var(--trainer-number-width)); }
    .trainer-finish {
        min-height: var(--trainer-viewport-height);
        height: auto;
        padding-top: var(--trainer-narrow-header-clearance);
        padding-bottom: var(--trainer-narrow-finish-footer);
    }
    .trainer-field--note { grid-column: 1 / -1; }
    .trainer-message-card { position: relative; min-height: var(--trainer-viewport-height); }
}

/* В портретной раскладке управление идёт в потоке и не перекрывает таймер или основной action. */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1023px) {
    .trainer-header-progress {
        top: calc((var(--trainer-header-button-height) - var(--trainer-progress-height)) / 2);
        left: 0;
        transform: none;
    }
    .trainer-work-stage { padding-bottom: var(--trainer-page-padding-y); overflow-y: visible; }
    .trainer-adjust { position: relative; inset: auto; width: 100%; text-align: center; }
    .trainer-adjust summary { justify-content: center; }
    .trainer-adjust-buttons { position: static; min-width: 0; margin-top: var(--trainer-control-gap); }
    .trainer-secondary-actions { position: static; inset: auto; justify-content: center; flex-wrap: wrap; transform: none; }
    .trainer-hotkeys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .trainer-timer-value--urgent { animation: none; }
}