/* Source: /css/universal-logo-visibility-v17.7.6.css */
/* ==========================================================
   TypingTutor.Online — Universal Logo Visibility v17.7.6

   Nested sections use two theme-aware logo images inside
   .test-logo-stack. Older section styles mixed absolute
   positioning, display switching and opacity switching, which
   could collapse the logo container or hide both images.

   This final stylesheet creates one stable overlapping grid,
   reserves the correct header space and switches only opacity.
========================================================== */

.test-logo {
    box-sizing: border-box !important;
    width: min(280px, 100%) !important;
    min-width: 190px !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

.test-logo-stack {
    box-sizing: border-box !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 280px !important;
    max-width: 100% !important;
    min-width: 190px !important;
    min-height: 58px !important;
    aspect-ratio: 280 / 58 !important;
    overflow: visible !important;
    isolation: isolate;
}

.test-logo-stack > .test-logo-light,
.test-logo-stack > .test-logo-dark {
    box-sizing: border-box !important;
    grid-area: 1 / 1 !important;
    position: static !important;
    inset: auto !important;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 58px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
    pointer-events: none !important;
    transition: opacity .16s ease, visibility .16s ease !important;
}

/* Reliable default, including pages before ThemeManager runs. */
.test-logo-stack > .test-logo-light {
    opacity: 1 !important;
    visibility: visible !important;
}

.test-logo-stack > .test-logo-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}

html[data-theme="light"] .test-logo-stack > .test-logo-light,
html[data-resolved-theme="light"] .test-logo-stack > .test-logo-light {
    opacity: 1 !important;
    visibility: visible !important;
}

html[data-theme="light"] .test-logo-stack > .test-logo-dark,
html[data-resolved-theme="light"] .test-logo-stack > .test-logo-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}

html[data-theme="dark"] .test-logo-stack > .test-logo-light,
html[data-resolved-theme="dark"] .test-logo-stack > .test-logo-light {
    opacity: 0 !important;
    visibility: hidden !important;
}

html[data-theme="dark"] .test-logo-stack > .test-logo-dark,
html[data-resolved-theme="dark"] .test-logo-stack > .test-logo-dark {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .test-logo-stack > .test-logo-light {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    html[data-theme="system"] .test-logo-stack > .test-logo-dark {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="system"] .test-logo-stack > .test-logo-light {
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-theme="system"] .test-logo-stack > .test-logo-dark {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

@media (max-width: 760px) {
    .test-logo {
        width: min(220px, 100%) !important;
        min-width: 165px !important;
        min-height: 46px !important;
    }

    .test-logo-stack {
        width: 220px !important;
        min-width: 165px !important;
        min-height: 46px !important;
    }

    .test-logo-stack > .test-logo-light,
    .test-logo-stack > .test-logo-dark {
        max-width: 220px !important;
        max-height: 46px !important;
    }
}

@media (max-width: 440px) {
    .test-logo {
        width: 178px !important;
        min-width: 150px !important;
        min-height: 37px !important;
    }

    .test-logo-stack {
        width: 178px !important;
        min-width: 150px !important;
        min-height: 37px !important;
    }

    .test-logo-stack > .test-logo-light,
    .test-logo-stack > .test-logo-dark {
        max-width: 178px !important;
        max-height: 37px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .test-logo-stack > .test-logo-light,
    .test-logo-stack > .test-logo-dark {
        transition: none !important;
    }
}

/* Source: /css/universal-selection-v17.7.8.css */
/* ==========================================================
   TypingTutor.Online — high-contrast text selection v17.7.8
   ========================================================== */

/*
 * Use one strong, predictable selection treatment everywhere.
 * White text on saturated blue remains readable on both light and dark
 * surfaces and avoids the pale-selection/white-text conflict seen on blogs.
 */
*::selection {
    color: #ffffff !important;
    background: #075fe4 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

*::-moz-selection {
    color: #ffffff !important;
    background: #075fe4 !important;
    text-shadow: none !important;
}

input::selection,
textarea::selection,
[contenteditable="true"]::selection {
    color: #ffffff !important;
    background: #075fe4 !important;
    -webkit-text-fill-color: #ffffff !important;
}

input::-moz-selection,
textarea::-moz-selection,
[contenteditable="true"]::-moz-selection {
    color: #ffffff !important;
    background: #075fe4 !important;
}

/* Extra contrast for explicit dark mode and System mode on dark devices. */
html[data-theme="dark"] *::selection {
    color: #ffffff !important;
    background: #0057d9 !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] *::-moz-selection {
    color: #ffffff !important;
    background: #0057d9 !important;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] *::selection {
        color: #ffffff !important;
        background: #0057d9 !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    html[data-theme="system"] *::-moz-selection {
        color: #ffffff !important;
        background: #0057d9 !important;
    }
}

/* Source: /css/global-workspace-v17.8.2.css */
/* ==========================================================
   TypingTutor.Online — Global Wide Workspace v17.8.2
   A consistent outer width across the tutor and every public
   section. Reading columns remain intentionally narrower.
========================================================== */

:root {
    --tto-workspace-max: 1500px;
    --tto-workspace-gutter: clamp(14px, 1.7vw, 32px);
    --max-width: var(--tto-workspace-max);
}

/* Main tutor, mode dashboards and progress bars */
.site-shell,
#courseModePanel,
.feature-placeholder,
#statisticsDashboard,
.statistics-course-progress,
.daily-practice-summary,
.settings-dashboard,
.achievements-dashboard,
.more-typing-resources-inner,
.typing-learning-content-inner {
    box-sizing: border-box;
    width: min(
        var(--tto-workspace-max),
        calc(100% - (2 * var(--tto-workspace-gutter)))
    );
    max-width: var(--tto-workspace-max);
    margin-inline: auto;
}

/* Standalone site sections */
.test-page-shell,
.games-shell,
.kids-shell,
.blog-shell,
.certificate-shell,
.share-shell,
.lessons-page-shell,
.page-shell {
    box-sizing: border-box;
    width: min(
        var(--tto-workspace-max),
        calc(100% - (2 * var(--tto-workspace-gutter)))
    );
    max-width: var(--tto-workspace-max);
    margin-inline: auto;
}

/* Footer follows the same visual edges as the page content. */
.universal-footer-inner,
.site-footer-inner {
    width: min(var(--tto-workspace-max), 100%);
    max-width: var(--tto-workspace-max);
}

/* Align horizontal section navigation with the wider workspace. */
.games-subnav,
.kids-subnav {
    padding-inline: max(
        var(--tto-workspace-gutter),
        calc((100vw - var(--tto-workspace-max)) / 2)
    );
}

/* Keep long-form reading comfortable even inside a wide shell. */
.blog-article,
.blog-article-body,
.page-prose,
.content-prose,
.certificate-faq > p,
.certificate-faq details,
.typing-learning-heading {
    max-width: 980px;
}

/* Wide desktop dashboards benefit from balanced multi-column cards. */
@media (min-width: 1280px) {
    .statistics-summary-grid-complete {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .statistics-ranking-grid,
    .statistics-trend-grid {
        gap: 18px;
    }

    .games-grid,
    .kids-path-grid,
    .kids-feature-grid,
    .kids-test-grid,
    .kids-game-grid,
    .kids-badge-grid {
        gap: 20px;
    }
}

/* Maintain generous but safe gutters on tablets and phones. */
@media (max-width: 900px) {
    :root {
        --tto-workspace-gutter: 11px;
    }
}

@media (max-width: 560px) {
    :root {
        --tto-workspace-gutter: 7px;
    }
}

@media print {
    .certificate-shell,
    .kids-shell,
    .page-shell {
        width: 100% !important;
        max-width: none !important;
    }
}