[data-save-word] { min-height: 44px; }
/* The English site's only deviations from ThePureLanguage's stylesheet. site.css is a straight copy of
   that file (same colours, buttons, cards, dark mode); keep every difference here, so a future copy of
   a newer site.css can be dropped in without losing them. */

/* PL4's footer is a fixed 60px absolutely-positioned bar with 60px lines, so a footer with several
   paragraphs spills out of the bar. Here it is an ordinary block that grows with its text. */
body { margin-bottom: 0; }
.footer { position: static; height: auto; line-height: 1.5; padding: 1rem 0; margin-top: 2rem; }
.footer-text { white-space: normal; overflow: visible; padding: 0.15rem 0; }

/* The development-only ad placeholder: smaller than PL4's 250px one, and with no generated text. */
.ep-ad-placeholder { min-height: 0; }

/* EnglishLearning4U: readable live lettering, warm accents and clear activity doors. */
.ep-brand-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 0; }
.ep-brand { display:flex; align-items:center; gap:.75rem; color:#153c5b; text-decoration:none; min-width:0; }
.ep-brand img { flex:none; }
.ep-brand-copy { min-width:0; }
.ep-brand strong { display:block; font-size:clamp(1.15rem, 2.6vw, 1.85rem); line-height:1.15; letter-spacing:-.045em; font-weight:800; }
.ep-brand-learning { font-weight:500; }
.ep-brand-4u { color:#a84a15; font-weight:800; }
.ep-brand-name { margin-bottom:.2rem; }
.ep-brand-tagline { display:block; color:var(--bs-secondary-color); font-size:.8rem; }
.ep-brand-note { color:#526575; font-size:.85rem; white-space:nowrap; }
.ep-mobile-browse { display:none; position:relative; }
.ep-mobile-browse > summary { list-style:none; min-height:34px; display:flex; align-items:center; }
.ep-mobile-browse > summary::-webkit-details-marker { display:none; }
.ep-mobile-links { position:absolute; top:calc(100% + .5rem); right:0; z-index:1050; width:min(85vw,22rem); max-height:65vh; overflow:auto; padding:.75rem; text-align:left; border:1px solid var(--bs-border-color); border-radius:.5rem; background:var(--bs-body-bg); box-shadow:0 .5rem 1rem #0002; }
.ep-mobile-links a, .ep-mobile-links summary { display:block; padding:.65rem .75rem; color:var(--bs-body-color); text-decoration:none; border-radius:.25rem; }
.ep-mobile-links a:hover, .ep-mobile-links a:focus-visible { background:var(--bs-tertiary-bg); outline:2px solid var(--bs-primary); }
@media (max-width:767.98px) {
    .ep-nav-desktop { display:none!important; }
    .ep-mobile-browse { display:block; position:static; }
    .ep-main-nav { gap:.35rem; position:relative; }
    .ep-mobile-links { left:0; right:0; width:auto; }
    .ep-main-nav .ep-nav-search { flex:1 1 135px; max-width:220px; }
    .ep-brand-bar { padding:.65rem 0!important; }
}
.ep-home-hero { padding:clamp(1.25rem, 4vw, 3.25rem); border:1px solid #e6decf; border-radius:1.5rem; background:radial-gradient(ellipse at 90% 10%, #fce0ae 0, transparent 55%), linear-gradient(120deg, #fffaf0, #edf7f5); color:#173c53; }
.ep-hero-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:clamp(1.5rem, 4vw, 3.5rem); }
.ep-home-eyebrow { margin-bottom:.7rem; color:#586655; font-size:.76rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.ep-status-dot { display:inline-block; width:.5rem; height:.5rem; background:#267561; border-radius:50%; margin-right:.35rem; }
.ep-home-hero h1 { font-size:clamp(2.3rem, 4.5vw, 3.75rem); line-height:1.06; font-weight:800; letter-spacing:-.045em; margin-bottom:1.3rem; }
.ep-home-hero h1 span { color:#a84a15; }
.ep-home-intro { max-width:36rem; font-size:1.05rem; line-height:1.7; margin-bottom:1.4rem; }
.ep-home-hero .btn, .ep-daily-feature .btn, #reset-scores { min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:.65rem; padding:.7rem 1rem; font-weight:650; }
.ep-home-hero .btn-primary, .ep-daily-feature .btn-primary { background:#153c5b; border-color:#153c5b; }
.ep-home-hero .btn-primary:hover, .ep-daily-feature .btn-primary:hover { background:#205577; }
.ep-home-hero .btn-outline-primary { color:#153c5b; border-color:#153c5b; background:transparent; }
.ep-home-hero .btn-outline-primary:hover { color:#fff; background:#153c5b; }
.ep-home-promises { display:flex; gap:.6rem 1.2rem; flex-wrap:wrap; padding:0; list-style:none; margin:1.2rem 0 0; font-size:.8rem; }
.ep-home-promises i { color:#267561; margin-right:.25rem; }
.ep-home-example { padding:clamp(1rem, 2vw, 1.5rem); border-radius:1.1rem; background:var(--bs-body-bg); color:var(--bs-body-color); border:1px solid var(--bs-border-color); box-shadow:0 16px 40px #153c5b12; }
.ep-home-example h2 { font-size:1.35rem; }
.ep-home-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.ep-home-word { padding:1rem .4rem; border:1px solid var(--bs-border-color); border-radius:.8rem; text-align:center; background:var(--bs-tertiary-bg); }
.ep-home-word img { display:block; width:min(100%,112px); height:auto; margin:0 auto .6rem; }
.ep-home-benefit-icon { display:block; color:#267561; font-size:1.6rem; margin-bottom:1rem; }
.ep-home-section { margin:2.75rem 0; }
.ep-home-section h2 { font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:750; letter-spacing:-.03em; }
.ep-section-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:1.2rem; }
.ep-section-heading a { font-size:.9rem; }
.ep-door-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.ep-home-door { padding:1.5rem; border:1px solid var(--ep-door-border); border-radius:1rem; background:var(--ep-door-bg); color:var(--ep-door-ink); text-decoration:none; display:flex; flex-direction:column; align-items:start; transition:transform .15s ease, box-shadow .15s ease; }
.ep-home-door:hover { color:var(--ep-door-ink); transform:translateY(-3px); box-shadow:0 9px 22px #153c5b14; }
.ep-home-door h3 { color:inherit; font-size:1.18rem; font-weight:750; margin:1rem 0 .65rem; }
.ep-home-door p { font-size:.93rem; line-height:1.65; flex:1; }
.ep-door-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; font-size:1.4rem; background:#ffffff90; }
.ep-door-action { font-size:.88rem; font-weight:750; display:flex; gap:.6rem; align-items:center; }
.ep-door-listen { --ep-door-bg:#eaf3ff; --ep-door-border:#cddff5; --ep-door-ink:#214b7a; }
.ep-door-words { --ep-door-bg:#e9f5ee; --ep-door-border:#cde6d6; --ep-door-ink:#235c45; }
.ep-door-grammar { --ep-door-bg:#fff2e5; --ep-door-border:#f1dcc4; --ep-door-ink:#854716; }
.ep-door-read { --ep-door-bg:#f3edfa; --ep-door-border:#e0d4ee; --ep-door-ink:#624282; }
.ep-daily-feature { display:flex; gap:1.5rem; align-items:center; padding:2rem; border:1px solid #e6d6b7; border-radius:1rem; background:#fff6e4; color:#173c53; }
.ep-daily-symbol { font-size:3rem; color:#ae5a14; }
.ep-daily-feature > div { flex:1; }
.ep-daily-feature p:last-child { margin-bottom:0; }
.ep-daily-feature .btn { flex-shrink:0; }
.ep-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.ep-quick-grid a { display:flex; align-items:center; gap:.85rem; padding:1.1rem; background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:.8rem; color:var(--bs-body-color); text-decoration:none; }
.ep-quick-grid a:hover { border-color:#6889a0; background:var(--bs-tertiary-bg); }
.ep-quick-grid a > i:first-child { color:#346b85; font-size:1.25rem; width:24px; text-align:center; flex:none; }
.ep-quick-grid a > i:last-child { margin-left:auto; font-size:.75rem; }
.ep-quick-grid strong, .ep-quick-grid small { display:block; }
.ep-quick-grid strong { font-size:.94rem; }
.ep-quick-grid small { font-size:.8rem; color:var(--bs-secondary-color); margin-top:.3rem; }
.ep-how { padding:2rem; background:var(--bs-tertiary-bg); border-radius:1rem; }
.ep-how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:1.5rem 0 .5rem; }
.ep-step-number { display:block; font-size:1.8rem; font-weight:800; color:#a84a15; margin-bottom:.5rem; }
.ep-how h3, .ep-about-home h3 { font-size:1.15rem; font-weight:750; }
.ep-how p, .ep-about-home p { line-height:1.7; }
.ep-about-home { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.ep-home-privacy { border:1px solid var(--bs-border-color); border-radius:1rem; padding:1.75rem; }
.ep-footer-brand { font-weight:800; font-size:1.25rem; color:var(--bs-body-color); }
.ep-footer-brand span { display:block; font-weight:400; font-size:.85rem; color:var(--bs-secondary-color); margin-top:.3rem; }
.ep-home-door:focus-visible, .ep-quick-grid a:focus-visible, .ep-brand:focus-visible { outline:3px solid var(--bs-primary); outline-offset:4px; }
#choose-practice, #device-controls { scroll-margin-top:1rem; }
.ep-policy { max-width:60rem; margin-inline:auto; }
.ep-policy h2 { margin-top:2rem; font-size:1.25rem; font-weight:750; }
.ep-policy p, .ep-policy li { line-height:1.75; }
.ep-policy-nav { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; padding:1rem 0; }
[data-bs-theme="dark"] .ep-brand { color:#d7eafa; }
[data-bs-theme="dark"] .ep-brand-4u { color:#ffbd70; }
[data-bs-theme="dark"] .ep-brand-note, [data-bs-theme="dark"] .ep-home-eyebrow { color:#bdcccb; }
[data-bs-theme="dark"] .ep-home-hero { background:radial-gradient(ellipse at 90% 10%, #4b3621 0, transparent 55%), linear-gradient(120deg,#192b3b,#1c3534); border-color:#455052; color:#eef4f8; }
[data-bs-theme="dark"] .ep-home-hero h1 span, [data-bs-theme="dark"] .ep-step-number { color:#ffc08d; }
[data-bs-theme="dark"] .ep-home-hero .btn-primary, [data-bs-theme="dark"] .ep-daily-feature .btn-primary { background:#cde6fa; color:#153c5b; border-color:#cde6fa; }
[data-bs-theme="dark"] .ep-home-hero .btn-outline-primary { color:#d7eafa; border-color:#a4c8e3; }
[data-bs-theme="dark"] .ep-home-promises i, [data-bs-theme="dark"] .ep-home-benefit-icon { color:#a5dfc6; }
[data-bs-theme="dark"] .ep-door-listen { --ep-door-bg:#1e3147; --ep-door-border:#344f6c; --ep-door-ink:#d3e7ff; }
[data-bs-theme="dark"] .ep-door-words { --ep-door-bg:#20392f; --ep-door-border:#3a594a; --ep-door-ink:#ccebd8; }
[data-bs-theme="dark"] .ep-door-grammar { --ep-door-bg:#3a2d22; --ep-door-border:#614935; --ep-door-ink:#ffdec1; }
[data-bs-theme="dark"] .ep-door-read { --ep-door-bg:#342b42; --ep-door-border:#514063; --ep-door-ink:#e8d8fc; }
[data-bs-theme="dark"] .ep-door-icon { background:#ffffff10; }
[data-bs-theme="dark"] .ep-daily-feature { background:#342f24; border-color:#60513c; color:#f5e9d4; }
[data-bs-theme="dark"] .ep-daily-symbol { color:#ffca88; }
[data-bs-theme="dark"] .ep-quick-grid a > i:first-child { color:#aad6ee; }
@media (max-width:991.98px) { .ep-door-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ep-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ep-brand-note { display:none; } .ep-hero-grid { grid-template-columns:1fr; } .ep-daily-feature { flex-wrap:wrap; } }
@media (max-width:575.98px) { .ep-brand img { width:44px; height:44px; } .ep-brand-tagline { font-size:.68rem; } .ep-home-hero { border-radius:1rem; } .ep-door-grid, .ep-quick-grid, .ep-how-grid, .ep-about-home { grid-template-columns:1fr; } .ep-home-section { margin:2rem 0; } .ep-home-door { padding:1.25rem; } .ep-daily-feature, .ep-how { padding:1.25rem; } .ep-daily-symbol { display:none; } .ep-about-home { gap:1.5rem; } .ep-how-grid { gap:.8rem; } .ep-brand-bar { padding:1rem 0; } }
@media (prefers-reduced-motion:reduce) { .ep-home-door { transition:none; } .ep-home-door:hover { transform:none; } }

/* Long catalogues remain keyboard/phone scrollable within the menu. */
.dropdown-menu {max-height:min(70vh,35rem);overflow-y:auto;}

/* The Learning menu has its own colour; Games keeps PL4's purple gamepad button. */
.btn-learning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0c5e58;
    --bs-btn-hover-border-color: #0c5e58;
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a514b;
    --bs-btn-active-border-color: #0a514b;
}
/* Keep wrapped rows compact and centred, as in PL4's shared navigation. */
.ep-main-nav { align-items: center; gap: .375rem; }
.ep-main-nav > * { flex: 0 0 auto; }
.ep-nav-search { width: 13.5rem; max-width: 100%; margin: 0; }
.ep-nav-search .input-group { flex-wrap: nowrap; }
.ep-nav-search .form-control { min-width: 0; }
.ep-main-nav #tplReviewBadge { margin-inline-end: 0; }
@media (min-width: 768px) {
    .ep-main-nav #tplReviewBadge { min-width: 2rem; min-height: 2rem; }
    .ep-main-nav #tplStreakBadge { min-height: 2rem; }
}
.ep-main-nav .dropdown-menu { max-width: calc(100vw - 2rem); }
.ep-main-nav .dropdown-item { white-space: normal; }

/* "Where to go next" on every activity page: phone-sized tap targets. */
.ep-more-practice .btn {
    min-height: 44px;
}

/* Shared player: static poster until a deliberate press. */
.ep-video-frame { position: relative; aspect-ratio: 16 / 9; background: #101820; border-radius: .5rem; overflow: hidden; }
.ep-video-frame img, .ep-video-frame video { width: 100%; height: 100%; object-fit: contain; }
/* A vertical Short (9:16): a phone-shaped frame, centred, never wider than 300px. */
.ep-video-frame--portrait { aspect-ratio: 9 / 16; max-width: 300px; margin-inline: auto; }
/* Its thumbnail on /videos: the top of the poster (the hook) in the same 16:9 slot as the card lessons. */
.ep-video-thumb--portrait { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 37%; }
.ep-video-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: white; }
.ep-video-play span { position: absolute; inset: auto 1rem 1rem; background: #0b355d; padding: .7rem; border-radius: .3rem; }
.ep-video-play:focus-visible { outline: 4px solid #ffc107; outline-offset: -4px; }
[data-ep-lesson-video] { scroll-margin-top: 1rem; }
.ep-print-notice { display: none; }
@media print {
    html, body, main, .card, .card-body { background: white !important; color: black !important; }
    header, footer, .ad-container, .ep-ad-placeholder, .ep-video-frame,
    [data-score-controls], .ep-more-practice, .breadcrumb { display: none !important; }
    main.container { max-width: none; width: auto; margin: 0; padding: 0; }
    .card { box-shadow: none !important; border: 0 !important; }
    h1, h2, h3 { break-after: avoid; }
    li, tr, figure { break-inside: avoid; }
    a { color: black !important; text-decoration: underline; }
    .ep-video-status { display: none !important; }
    .ep-print-notice { display: block !important; margin-top: 1rem; padding-top: .5rem; border-top: 1px solid #888; font-size: 9pt; break-inside: avoid; }
    .ep-print-notice p { margin-bottom: .25rem; }
}

.ep-skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 3000; padding: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); border: 2px solid var(--bs-primary); transform: translateY(-200%); }
.ep-skip-link:focus { transform: none; }
#rp-app button,#fl-app button,#mk-app button,[data-phrase-audio] {min-height:44px;}
#rp-app .btn-outline-primary,#fl-app .btn-outline-primary,#mk-app .btn-outline-primary,.btn[data-phrase-audio] {color:#1b5792;}
[data-bs-theme=dark] #rp-app .btn-outline-primary,[data-bs-theme=dark] #fl-app .btn-outline-primary,[data-bs-theme=dark] #mk-app .btn-outline-primary,[data-bs-theme=dark] .btn[data-phrase-audio] {color:#afd5ff;}
#rp-app .btn-outline-primary:hover:not(:disabled),#fl-app .btn-outline-primary:hover:not(:disabled),#mk-app .btn-outline-primary:hover:not(:disabled),.btn[data-phrase-audio]:hover {color:#fff;background:#1b5792;border-color:#1b5792;}

/* Quiet shared progress controls and readable phone targets. */
#quest-app button,#quest-app input,#quest-app select,#hu-app button,#hu-app input,#hear-use [data-ep-speed-step],#adventure-app button {min-height:44px;}
#quest-app .btn-outline-primary,#hu-app .btn-outline-primary,#adventure-app .btn-outline-primary {color:#1b5792;}
[data-bs-theme=dark] #quest-app .btn-outline-primary,[data-bs-theme=dark] #hu-app .btn-outline-primary,[data-bs-theme=dark] #adventure-app .btn-outline-primary {color:#afd5ff;}
#path-steps [data-path-control] {min-height:44px;display:flex;align-items:center;gap:.5rem;padding:.4rem;}
#guide-check summary {min-height:44px;padding:.5rem;}

/* Review navigation matches PL4, with room for the due-count bubble. */
.tpl-review-nav-badge {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(22, 163, 74, 0.42);
    border-radius: 50%;
    color: #15803d;
    background: rgba(74, 222, 128, 0.14);
}

a#tplReviewBadge:hover .tpl-review-nav-badge,
a#tplReviewBadge:focus-visible .tpl-review-nav-badge {
    border-color: #16a34a;
    background: rgba(74, 222, 128, 0.26);
}

[data-bs-theme="dark"] .tpl-review-nav-badge {
    color: #86efac;
    background: rgba(22, 163, 74, 0.22);
}

.tpl-review-nav-count {
    position: absolute;
    top: -0.4rem;
    right: -0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.25rem;
    border: 2px solid var(--bs-body-bg, #fff);
    border-radius: 999px;
    color: #fff;
    background: #15803d;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tpl-review-nav-count[hidden] {
    display: none;
}


#tplReviewBadge {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-inline-end: 0.25rem;
}
#tplReviewBadge:focus-visible {
    outline: 2px solid var(--bs-body-color);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Streak badge uses PL4’s flame/count/rank appearance. */
.tpl-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    cursor: default;
    user-select: none;
}

[data-bs-theme="dark"] .tpl-streak-badge {
    color: #fbbf24;
    background: rgba(255, 152, 0, 0.18);
}

.tpl-streak-badge.tpl-streak-active {
    border-color: rgba(255, 152, 0, 0.7);
}

/* The header badge is a link to the Streak & Leaderboards page — show it's clickable. */
a#tplStreakBadge,
a#tplStreakBadge .tpl-streak-badge {
    cursor: pointer;
}

a#tplStreakBadge:hover .tpl-streak-badge,
a#tplStreakBadge:focus-visible .tpl-streak-badge {
    border-color: rgba(255, 152, 0, 0.7);
    background: rgba(255, 152, 0, 0.22);
}


#tplStreakBadge { min-height:44px; padding:0 .15rem; }
#tplStreakBadge:focus-visible { outline:2px solid var(--bs-body-color); outline-offset:2px; border-radius:999px; }
.tpl-streak-badge { cursor:pointer; }
.study-progress-bar { width:100%; height:1.25rem; accent-color:#15803d; }
.study-stat { font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; }