/* Reader and search text below the free CW web apps and on the German landing pages.
   Colours come from the page. The native apps strip this block when they are bundled. */
.app-guide {
    box-sizing: border-box;
    width: 100%;
    max-width: 1100px;
    margin: 32px auto 0;
    padding: 28px 16px 12px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    font-size: 15px;
    line-height: 1.6;
}
.app-guide h2 { margin: 0 0 10px; font-size: 1.45rem; line-height: 1.25; }
.app-guide h3 { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.3; }
.app-guide p { margin: 0; }
.app-guide-intro { max-width: 72ch; }
.app-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 32px;
    margin-top: 22px;
}
.app-guide-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.app-guide-links a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* The games size themselves from the free height of the body, on phones too. The text
   stays out of that layout, so the app behaves as if it were not there, and starts where
   the body ends. A body locked for play clips it. */
body:has(.app-guide-below-app) { position: relative; }
.app-guide-below-app { position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; padding-bottom: 40px; }

/* The trainers and MorseChat are pinned to the window. That window scrolls on to the
   text, except during a session: training controls must stay where they are. Removing
   the text at session start also brings a scrolled page back to the top. */
html:has(body.trainer-workspace .app-guide), html:has(body.chat-workspace .app-guide) { overflow: hidden; }
body.trainer-workspace:has(.app-guide), body.chat-workspace:has(.app-guide) {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
body.trainer-running .app-guide { display: none; }

.app-guide-page { max-width: 1180px; margin-top: 0; padding: 40px 20px 48px; border-top: 0; font-size: 17px; }