/* ============================================================
   Zen ("fullscreen") mode for the trainers.
   Markup and behaviour live in static/js/utils/zenMode.js; this file styles the
   one button that morphs between the fullscreen toggle and the little tab, plus
   the top-edge hover strip.
   ============================================================ */

/* The toggle doubles as the tab. While the header is on screen it hangs off the
   header's bottom edge in the same top-right spot as the timer's header toggle:
   square at the top (flush, no gap) and rounded at the bottom, so it reads as
   part of the header. When zen mode slides the header away the same element
   rides up with it and shrinks into the tab that pulls the header back down —
   one box changing shape, never two elements swapping. Mirrors
   .timer-toolbar-button's size and colours from timer.css, which is only loaded
   on the timer page. */
.zen-mode-toggle {
    position: fixed;
    top: var(--header-height, 64px);
    right: 0.55rem;
    z-index: 1026;
    width: 2.45rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 0.6rem 0.6rem;
    background: var(--bg-secondary);
    color: var(--text-color);
    line-height: 1;
    cursor: pointer;
    /* Matches the header's own slide (see .navbar in base.html) so the two
       travel together and the button stays welded to its bottom edge. */
    transition:
        top 0.3s ease-in-out,
        height 0.3s ease-in-out,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.15s ease;
}

.zen-mode-toggle:hover,
.zen-mode-toggle:focus-visible {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
    color: var(--primary-color);
}

.zen-mode-toggle[aria-pressed="true"] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* The two glyphs cross-fade while the box changes shape: the expand/compress
   icon while the header is on screen, the tab's chevron while it is away. */
.zen-mode-toggle-icon {
    position: absolute;
    transition: opacity 0.15s ease;
}

.zen-mode-toggle-icon--tab {
    font-size: 0.62rem;
    opacity: 0;
}

/* Tab state: the header is hidden, so the toggle has ridden all the way up and
   become the little flap hanging off the top edge of the window. */
body.zen-mode.layout-header-hidden .zen-mode-toggle {
    top: 0;
    height: 1.15rem;
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 90%, var(--card-bg) 10%);
    color: var(--text-muted);
}

body.zen-mode.layout-header-hidden .zen-mode-toggle:hover,
body.zen-mode.layout-header-hidden .zen-mode-toggle:focus-visible {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

body.zen-mode.layout-header-hidden .zen-mode-toggle-icon--action {
    opacity: 0;
}

body.zen-mode.layout-header-hidden .zen-mode-toggle-icon--tab {
    opacity: 1;
}

/* Hot strip along the very top of the window: moving the pointer into it pulls
   the site header back down while zen mode is on. Sits just under Bootstrap's
   fixed navbar (z-index 1030) so it never swallows clicks meant for the nav. */
.zen-hover-zone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 1029;
    display: none;
}

body.zen-mode .zen-hover-zone {
    display: block;
}

/* ── Zen mode layout ───────────────────────────────────────────────────── */

/* Keep the content pinned to the top of the window even while the header is
   temporarily pulled back down, so showing/hiding it is a pure overlay: the
   trainer never reflows under the cursor. */
body.zen-mode {
    padding-top: 0 !important;
}

body.zen-mode #content-wrapper {
    margin-top: 0 !important;
}

/* Hide the footer without taking its box out of the flow: trainer pages keep
   the same scroll range, which is what lets trainers (alg_trainer2,
   inspection2, ...) still scroll their own header out of view on Start. */
body.zen-mode #site-footer {
    visibility: hidden;
}

/* Below this width the centred trainer container reaches into the top-right
   corner, where the fixed fullscreen toggle lives, so keep the header actions
   clear of it. (Wider screens have margin to spare; the .intro-box based
   trainers use 80% width and never collide.) */
@media (min-width: 768px) and (max-width: 1240px) {

    .trn-header-actions,
    .flw-header-actions {
        padding-right: 3.1rem;
    }
}

/* Touch devices have no pointer to aim at the top edge, so the hover strip
   stays out of the way there. */
@media (pointer: coarse) {

    .zen-hover-zone {
        display: none;
    }
}

/* Zen mode is a desktop affordance: on phone-sized screens it is removed
   outright, so there is nothing to press. */
@media (max-width: 767px) {

    .zen-mode-toggle,
    .zen-hover-zone {
        display: none;
    }
}