/* EngLife Üben Frontend — visual refinement DRAFT v2.8.49
 * CSS-only update based on v2.8.48; widths and H1 typography remain WordPress-owned.
 * The neutral learning footer stays distinct; the right-fading paper grid is legible.
 * No changes to JS, Teacher Mode, stamps, or quiz behavior.
 */

body.englife-generated-exercise-page {
    --el-exercise-content-max: var(--wp--style--global--content-size, 760px);
    --el-ex-bg: #FFFFFF;
    --el-ex-soft: #F3F4F6;
    --el-exercise-surface: #FFFFFF;
    --el-ex-selected: rgba(255,211,87,.16);
    --el-ex-border: #D4D8DF;
    --el-ex-border-strong: #B9C0CB;
    --el-ex-border-hover: #A4ADBA;
    --el-ex-text: #262B33;
    --el-ex-muted: #5B6470;
    --el-ex-green: #0E6633;
    --el-ex-green-hover: #0A542A;
    --el-ex-purple: #5B6470;
}

body.englife-generated-exercise-page .entry-header, body.englife-generated-exercise-page .entry-content {
    margin-top: 0;
}

body.englife-generated-exercise-page .entry-header {
    margin-bottom: 8px;
}

body.englife-generated-exercise-page h1.entry-title, body.englife-generated-exercise-page .wp-block-post-title {
    width: min(100%, var(--el-exercise-content-max));
    margin: 0 auto 8px;
    max-width: var(--el-exercise-content-max);
}

.englife-exercise-shell {
    width: 100%;
    max-width: var(--el-system-max);
    margin: 0 auto;
    color: var(--el-ex-text);
}

.englife-exercise-meta-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 14px;
}

.englife-exercise-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--el-ex-border);
    border-radius: 999px;
    background: var(--el-ex-soft);
    color: var(--el-ex-muted);
    font-size: .76rem;
    line-height: 1.15;
    font-weight: 550;
    white-space: nowrap;
}

.englife-exercise-main-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 24px;
    align-items: start;
}

.englife-exercise-workspace {
    position: relative;
    min-width: 0;
    min-height: 260px;
    padding: 14px;
    border: 1px solid var(--el-ex-border);
    border-radius: 16px;
    background: var(--el-exercise-surface);
    overflow: hidden;
}

.englife-exercise-quiz, .englife-exercise-quiz [id^="ays-quiz-container-"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.englife-exercise-shell.is-initial-loading .englife-exercise-quiz {
    opacity: 0;
    pointer-events: none;
}

.englife-exercise-shell.is-result-loading .englife-exercise-quiz {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0 !important;
    pointer-events: none !important;
}

.englife-exercise-shell.englife-result-mode .englife-exercise-quiz .ays_quiz_results_page {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.englife-exercise-loader {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background: transparent;
    color: var(--el-ex-text);
    text-align: center;
}

.englife-exercise-loader[hidden] {
    display: none !important;
}

.englife-loader {
    width: min(280px,84vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.englife-loader-brand {
    color: var(--el-ex-green);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: .02em;
}

.englife-loader-map {
    width: 220px;
    max-width: 78vw;
    height: 90px;
}

.englife-loader-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.englife-loader-path {
    fill: none;
    stroke: #A4ADBA;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2 8;
    opacity: .72;
    animation: englife-ex-route-dash 1.8s linear infinite;
}

@keyframes englife-ex-route-dash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -20;
    }
}

.englife-loader-stop {
    fill: #FFFFFF;
    stroke: #5B6470;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 100ms ease, stroke 100ms ease, transform 100ms ease, opacity 100ms ease;
}

.englife-loader-stop-mid1, .englife-loader-stop-mid2 {
    fill: #D4D8DF;
}

.englife-loader-stop.is-active {
    fill: var(--el-ex-green);
    stroke: var(--el-ex-green);
    transform: scale(1.3);
    opacity: 1;
}

.englife-loader-traveler {
    fill: var(--el-ex-green);
    filter: drop-shadow(0 0 4px rgba(14,102,51,.24));
}

.englife-loader-traveler-glow {
    fill: var(--el-ex-green);
    opacity: .14;
}

.englife-loader-text {
    color: var(--el-ex-text);
    font-size: .92rem;
    line-height: 1.4;
    opacity: .8;
}

.englife-result-transition {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 22px 18px;
    overflow: hidden;
    color: var(--el-ex-text);
    background: transparent;
    pointer-events: auto;
}

.englife-result-transition[hidden] {
    display: none !important;
}

.englife-result-transition-inner {
    width: min(720px,100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    box-sizing: border-box;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.englife-result-transition-kicker {
    color: var(--el-ex-green);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.englife-result-route-window {
    position: relative;
    width: min(760px,88vw);
    height: 270px;
    overflow: hidden;
    border-radius: 18px;
}

.englife-result-physics-plane {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8200px;
    height: 260px;
    transform: translate(-50%,-50%) rotate(-17deg);
    transform-origin: center center;
    pointer-events: none;
}

.englife-result-physics-svg {
    display: block;
    width: 8200px;
    height: 260px;
    overflow: visible;
}

.englife-result-physics-route {
    fill: none;
    stroke: #A4ADBA;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 13 12;
    opacity: .88;
    vector-effect: non-scaling-stroke;
}

.englife-result-physics-waypoint {
    fill: var(--el-ex-soft);
    stroke: #5B6470;
    stroke-width: 2;
    opacity: .76;
    vector-effect: non-scaling-stroke;
}

.englife-result-physics-traveler-halo {
    fill: var(--el-ex-green);
    opacity: .08;
}

.englife-result-physics-traveler-dot {
    fill: var(--el-ex-green);
}

.englife-result-transition-text {
    max-width: 34rem;
    color: var(--el-ex-text);
    font-size: .96rem;
    line-height: 1.45;
    opacity: .82;
}

.englife-result-transition.is-arriving {
    will-change: transform,opacity;
    animation: englife-result-bridge-arrival 460ms cubic-bezier(.46,0,.95,.44) both;
}

@keyframes englife-result-bridge-arrival {
    0% {
        transform: translate3d(0,0,0) scaleX(1);
        opacity: 1;
    }

    68% {
        opacity: 1;
    }

    100% {
        transform: translate3d(108%,0,0) scaleX(1.025);
        opacity: .98;
    }
}

@media (max-width:700px) {
    .englife-result-route-window {
        width: min(760px,96%);
        height: 190px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .englife-loader-path {
        animation: none !important;
    }

    .englife-exercise-workspace {
        transition: none;
    }
}

.englife-exercise-quiz :is(.ays-questions-container,.ays_quiz_results_page) {
    background: transparent !important;
    box-shadow: none !important;
}

.englife-exercise-quiz p, .englife-exercise-quiz li {
    color: var(--el-ex-text);
    line-height: 1.5;
}

.englife-exercise-quiz :is(h2,h3,h4) {
    color: var(--el-ex-text);
    line-height: 1.3;
}

.englife-exercise-quiz img {
    border-radius: 12px;
}

.englife-exercise-quiz .ays-field:not(.correct_div):not(.wrong_div) {
    background-color: #FFFFFF !important;
    border-color: var(--el-ex-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
}

.englife-exercise-quiz :is(.ays-field.correct_div,.ays-field.wrong_div,.correct_div,.wrong_div) {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.englife-exercise-quiz .ays-field>label,
.englife-exercise-quiz .ays-field label.answered,
.englife-exercise-quiz .ays-field label.answered.correct,
.englife-exercise-quiz .ays-field label.answered.wrong {
    border-radius: inherit !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-quiz .ays-field:not(.correct_div):not(.wrong_div):not(.ays-ranking-field):not(.ays-ranking-item):not(.ays-matching-field-option):hover {
        background-color: var(--el-ex-soft) !important;
        border-color: var(--el-ex-border-hover) !important;
        box-shadow: 0 2px 7px rgba(38,43,51,.06) !important;
    }

    .englife-exercise-quiz .ays-field:has(input[type="radio"],input[type="checkbox"]):not(.correct_div):not(.wrong_div),
    .englife-exercise-quiz .ays-field:has(input[type="radio"],input[type="checkbox"]) label {
        cursor: pointer !important;
    }
}

.englife-exercise-quiz input[type="radio"], .englife-exercise-quiz input[type="checkbox"] {
    accent-color: #262B33;
}

.englife-exercise-quiz .ays-field:has(input[type="radio"],input[type="checkbox"]):not(.correct_div):not(.wrong_div):focus-within {
    outline: 3px solid rgba(14,102,51,.20) !important;
    outline-offset: 2px;
}

.englife-exercise-quiz .ays-field.englife-choice-selected:not(.correct_div):not(.wrong_div),
.englife-exercise-quiz .ays-field:has(input[type="radio"]:checked,input[type="checkbox"]:checked):not(.correct_div):not(.wrong_div) {
    background-color: var(--el-ex-selected) !important;
    border-color: #0E6633 !important;
    box-shadow: 0 0 0 2px rgba(38,43,51,.10), 0 2px 7px rgba(38,43,51,.06) !important;
}

.englife-exercise-quiz .ays-field.englife-choice-selected:not(.correct_div):not(.wrong_div)>label,
.englife-exercise-quiz .ays-field:has(input[type="radio"]:checked,input[type="checkbox"]:checked):not(.correct_div):not(.wrong_div)>label {
    background-color: transparent !important;
    color: var(--el-ex-text) !important;
    font-weight: 600 !important;
}

.englife-exercise-quiz :is( input[type="text"], input[type="number"], input[type="email"], textarea ) {
    color: var(--el-ex-text) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.englife-exercise-quiz select {
    background-color: #FFFFFF !important;
    color: var(--el-ex-text) !important;
    border-color: var(--el-ex-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.englife-exercise-quiz :is( input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea ):focus {
    border-color: var(--el-ex-green) !important;
    outline: 3px solid rgba(14,102,51,.20) !important;
    outline-offset: 1px;
}

.englife-exercise-quiz :is( .ays_question_hint,
.ays_question_hint_button,
.ays-quiz-question-hint,
.ays-quiz-question-hint-button,
[class*="ays_question_hint"],
[class*="ays-question-hint"],
[id*="ays_question_hint"],
[id*="ays-question-hint"] ) {
    display: none !important;
}

.englife-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 .38rem;
    border: 1px solid var(--el-ex-border-strong);
    border-radius: 999px;
    background: #F3F4F6;
    color: var(--el-ex-muted);
    font-size: .78em;
    line-height: 1;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    vertical-align: .08em;
    box-sizing: border-box;
    flex: none;
}

.englife-exercise-quiz .ays-field.ays-select-field {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.englife-exercise-quiz .ays-field.ays-select-field :is(.select2-selection--single,.select2-selection--multiple) {
    min-height: 42px !important;
    display: flex !important;
    align-items: center;
    background: #FFFFFF !important;
    border: 1px solid var(--el-ex-border-strong) !important;
    border-radius: 10px !important;
    color: var(--el-ex-text) !important;
    box-shadow: none !important;
}

.englife-exercise-quiz .select2-selection__rendered {
    color: var(--el-ex-text) !important;
}

.englife-exercise-quiz .ays-field.ays-select-field.englife-select-has-value:not(.correct_div):not(.wrong_div) .select2-selection--single {
    background: var(--el-ex-soft) !important;
    border-color: var(--el-ex-border-hover) !important;
    box-shadow: 0 2px 7px rgba(38,43,51,.06) !important;
}

.englife-exercise-quiz .select2-selection:focus-visible {
    outline: 3px solid rgba(14,102,51,.24) !important;
    outline-offset: 2px !important;
}

body.englife-generated-exercise-page .select2-search--dropdown,
body.englife-generated-exercise-page .select2-dropdown .select2-search {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.englife-generated-exercise-page .select2-results__option {
    padding: 9px 11px !important;
    color: var(--el-ex-text) !important;
    background: #FFFFFF !important;
    font-size: 16px;
    line-height: 1.35;
}

body.englife-generated-exercise-page .select2-results__option[aria-selected="true"],
body.englife-generated-exercise-page .select2-results__option--selected,
body.englife-generated-exercise-page .select2-results__option--highlighted[aria-selected],
body.englife-generated-exercise-page .select2-results__option--highlighted {
    color: var(--el-ex-text) !important;
    background: var(--el-ex-soft) !important;
}

body.englife-generated-exercise-page .select2-dropdown {
    background: #FFFFFF !important;
    border: 1px solid var(--el-ex-border-strong) !important;
    box-shadow: 0 4px 12px rgba(38,43,51,.08) !important;
}

.englife-exercise-quiz select.englife-gap-select + .select2-container.englife-gap-select2:not(.englife-solution-control-hidden) {
    display: inline-block !important;
    width: var(--englife-gap-width,4.5em) !important;
    min-width: 0 !important;
    max-width: min(42vw,9.5rem) !important;
    margin: 0 .08em;
    vertical-align: middle;
    box-sizing: border-box;
    font: inherit !important;
}

.englife-exercise-quiz .select2-container.englife-gap-select2 .select2-selection--single {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 1.55em !important;
    min-height: 1.55em !important;
    padding: 0 1.7em 0 .48em !important;
    background: #FFFFFF !important;
    border: 1px solid var(--el-ex-border-strong) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font: inherit !important;
}

.englife-exercise-quiz .select2-container.englife-gap-select2 .select2-selection--single::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #262B33;
    border-bottom: 1.5px solid #262B33;
    transform: translateY(-65%) rotate(45deg);
    transform-origin: center;
    pointer-events: none;
}

.englife-exercise-quiz .select2-container.englife-gap-select2.select2-container--open .select2-selection--single::after {
    transform: translateY(-20%) rotate(-135deg);
}

.englife-exercise-quiz .select2-container.englife-gap-select2 .select2-selection__rendered {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.englife-exercise-quiz .select2-container.englife-gap-select2 .select2-selection__arrow {
    display: none !important;
}

.englife-exercise-quiz .select2-container.englife-gap-select2.englife-gap-has-value .select2-selection--single {
    background: var(--el-ex-soft) !important;
    border-color: var(--el-ex-border-hover) !important;
    box-shadow: 0 2px 7px rgba(38,43,51,.06) !important;
}

body.englife-generated-exercise-page.englife-select2-preparing .select2-container--open .select2-dropdown {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.englife-generated-exercise-page .englife-select2-floating-dropdown {
    position: fixed !important;
    z-index: 2147483900 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.englife-generated-exercise-page .englife-select2-floating-dropdown .select2-dropdown {
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid var(--el-ex-border-strong) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(38,43,51,.08) !important;
    overflow: hidden !important;
}

body.englife-generated-exercise-page .englife-select2-floating-dropdown .select2-dropdown.select2-dropdown--above {
    border-radius: 6px 6px 0 0 !important;
    box-shadow: 0 -4px 12px rgba(38,43,51,.07) !important;
}

body.englife-generated-exercise-page .englife-select2-floating-dropdown .select2-dropdown.select2-dropdown--below {
    border-radius: 0 0 6px 6px !important;
}

body.englife-generated-exercise-page .englife-select2-floating-dropdown .select2-results__options {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width:900px),(pointer:coarse) {
    .englife-exercise-quiz :is( input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    textarea,
    select,
    .select2-selection,
    .select2-search__field ) {
        font-size: 16px !important;
    }

    .englife-exercise-quiz .ays-field {
        border-radius: 14px !important;
    }
}

.englife-exercise-quiz [id^="ays-quiz-container-"] .step.active-step {
    min-height: 0 !important;
    padding-top: 0 !important;
}

.englife-exercise-quiz [id^="ays-quiz-container-"] .step.active-step .ays-abs-fs {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 8px !important;
}

.englife-exercise-quiz [id^="ays-quiz-container-"] .step.active-step ~ .step {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
}

.englife-exercise-quiz [id^="ays-quiz-container-"] .step.active-step ~ .step .ays-abs-fs {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.englife-exercise-quiz [id^="ays-quiz-container-"] .step.active-step ~ .step :is( .ays-question,
.ays_question,
.ays_quiz_question,
.ays-question-content,
.ays-quiz-question,
.ays-question-wrap ) {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.englife-exercise-quiz :is(.ays_check_answer,.ays_next,.ays_finish) {
    min-height: 44px !important;
    padding: 9px 16px !important;
    border: 1px solid var(--el-ex-green) !important;
    border-radius: 6px !important;
    background: var(--el-ex-green) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

.englife-exercise-quiz .ays_previous {
    min-height: 44px !important;
    border-radius: 6px !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-quiz :is(.ays_check_answer,.ays_next,.ays_finish):hover {
        background: var(--el-ex-green-hover) !important;
        border-color: var(--el-ex-green-hover) !important;
    }
}

.englife-exercise-quiz :is(.ays_check_answer,.ays_next,.ays_finish,.ays_previous):focus-visible {
    outline: 3px solid rgba(14,102,51,.30) !important;
    outline-offset: 2px !important;
}

.englife-exercise-quiz :is(.ays_check_answer,.ays_next,.ays_finish):active {
    transform: translateY(1px);
}

.englife-exercise-solution-actions[hidden] {
    display: none !important;
}

.englife-exercise-solution-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
}

.englife-solution-nav-host {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.englife-exercise-solution-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 13px;
    border: 1px solid var(--el-ex-border-strong);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--el-ex-text) !important;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-solution-toggle:hover {
        background: var(--el-ex-bg);
        border-color: var(--el-ex-border-hover);
    }
}

.englife-exercise-solution-toggle:focus-visible {
    outline: 3px solid rgba(14,102,51,.30) !important;
    outline-offset: 2px !important;
}

.englife-exercise-solution-toggle[aria-pressed="true"] {
    border-color: rgba(14,102,51,.42);
    background: rgba(14,102,51,.08);
    color: #0E6633 !important;
}

.englife-exercise-solution-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.englife-exercise-solution-status[hidden] {
    display: none !important;
}






.englife-exercise-shell.englife-result-mode .englife-exercise-solution-actions,
.englife-exercise-shell.englife-standard-result-ready .englife-exercise-solution-actions {
    display: none !important;
}

@media (max-width:700px) {
    .englife-exercise-solution-toggle {
        min-height: 44px;
    }
}

.englife-standard-result[hidden], .englife-standard-result__actions[hidden] {
    display: none !important;
}

.englife-standard-result {
    width: 100%;
    margin: 0;
    padding: 4px 0 12px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    text-align: left;
}

.englife-standard-result__summary {
    padding: 4px 0 18px;
}

.englife-standard-result__kicker {
    margin: 0 0 7px;
    color: var(--el-ex-green);
    font-size: .76rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.englife-standard-result__title {
    margin: 0 0 8px !important;
    color: var(--el-ex-text) !important;
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
}

.englife-standard-result__title [data-englife-result-score-value] {
    font-weight: 760;
}

.englife-standard-result__message {
    max-width: 42rem;
    margin: 0;
    color: var(--el-ex-text);
    font-size: 1rem;
    line-height: 1.5;
}

.englife-standard-result__review-heading {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--el-ex-border);
}

.englife-standard-result__review-heading h3 {
    margin: 0 0 6px !important;
    color: var(--el-ex-text) !important;
    font-size: 1.14rem !important;
    line-height: 1.3 !important;
}

.englife-standard-result__review-heading p {
    margin: 0;
    color: var(--el-ex-muted);
    font-size: .93rem;
    line-height: 1.45;
}

.englife-exercise-shell.englife-standard-result-ready .englife-exercise-quiz {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    pointer-events: auto !important;
}

.englife-exercise-shell.englife-standard-result-ready .englife-exercise-quiz .ays_quiz_results_page {
    display: none !important;
}

.englife-exercise-shell.englife-standard-result-ready .englife-exercise-quiz .ays_quiz_results {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.englife-exercise-shell.englife-standard-result-ready .englife-exercise-quiz .ays_quiz_results :is( .ays-field,
.ays_question_result,
.ays-quiz-result-question,
.ays-quiz-result-item,
.ays-quiz-result-row ) {
    box-sizing: border-box !important;
}

.englife-exercise-shell.englife-standard-result-ready .englife-exercise-quiz .ays-quiz-results-toggle-block {
    margin: 0 0 14px !important;
}

.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question select.ays-quiz-dropdown-fill-in-blank,
.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question .select2-container {
    display: none !important;
}

.englife-result-gap-static {
    display: inline-block;
    margin: 0 .08em;
    padding: .03em .30em;
    border: 0;
    border-radius: 4px;
    color: var(--el-ex-text);
    background: transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    vertical-align: baseline;
    white-space: nowrap;
}

.englife-result-gap-static--correct {
    background: rgba(14,102,51,.10);
    color: #0E6633;
}

.englife-result-gap-static--wrong {
    background: rgba(178,76,72,.08);
    color: #7A3C39;
}

.englife-result-gap-static--empty {
    padding-left: .38em;
    padding-right: .38em;
    background: rgba(38,43,51,.045);
    color: var(--el-ex-muted);
    font-weight: 500;
    font-size: .92em;
}

.englife-result-written-response {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 5px 10px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--el-ex-border);
    border-radius: 10px;
    background: #F3F4F6;
}

.englife-result-written-response__label {
    color: var(--el-ex-muted);
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
}

.englife-result-written-response__value {
    min-width: 0;
    color: var(--el-ex-text);
    font-size: .92rem;
    line-height: 1.4;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.englife-result-written-response__value--empty {
    color: var(--el-ex-muted);
    font-weight: 500;
}

.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question .correct_div {
    border-color: rgba(14,102,51,.22) !important;
    background: rgba(14,102,51,.08) !important;
    box-shadow: none !important;
}

.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question .wrong_div {
    border-color: rgba(178,76,72,.20) !important;
    background: rgba(178,76,72,.06) !important;
    box-shadow: none !important;
}

.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question .englife-result-native-correct {
    background: rgba(14,102,51,.08) !important;
    color: inherit !important;
    box-shadow: none !important;
}

.englife-exercise-shell.englife-standard-result-ready .ays_quiz_results .englife-gap-result-question .englife-result-native-wrong {
    background: rgba(178,76,72,.06) !important;
    color: inherit !important;
    box-shadow: none !important;
}

.englife-gap-result-analytics-note {
    display: none !important;
}

.englife-standard-result__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--el-ex-border);
}

.englife-standard-result__repeat {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 8px 13px;
    border: 1px solid var(--el-ex-border-strong);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--el-ex-text) !important;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {
    .englife-standard-result__repeat:hover {
        background: var(--el-ex-bg);
        border-color: var(--el-ex-border-hover);
    }
}

.englife-standard-result__repeat:focus-visible {
    outline: 3px solid rgba(14,102,51,.30) !important;
    outline-offset: 2px !important;
}

@media (max-width:700px) {
    .englife-standard-result__title {
        font-size: 1.35rem !important;
    }

    .englife-standard-result__repeat {
        width: 100%;
        min-height: 44px;
    }
}

.englife-exercise-ad-rail {
    display: none;
}

.englife-exercise-after-ad {
    margin: 18px 0 22px;
}

.englife-ad-slot {
    box-sizing: border-box;
    width: 100%;
    color: var(--el-ex-text);
}

.englife-ad-slot__label {
    margin: 0 0 5px;
    color: var(--el-ex-muted);
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.englife-ad-slot__stage {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--el-ex-border);
    border-radius: 12px;
    background: var(--el-ex-soft);
    overflow: hidden;
}

.englife-ad-slot__provider {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.englife-ad-slot__fallback {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.englife-ad-slot.is-filled .englife-ad-slot__fallback,
.englife-ad-slot:has([data-ad-status="filled"]) .englife-ad-slot__fallback,
.englife-ad-slot:has([data-englife-ad-loaded="true"]) .englife-ad-slot__fallback {
    visibility: hidden;
}

.englife-ad-slot--exercise_after {
    max-width: 970px;
    margin: 0 auto;
}

.englife-ad-slot--exercise_after .englife-ad-slot__stage {
    min-height: 90px;
}

.englife-ad-house {
    width: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 14px 18px;
    box-sizing: border-box;
    text-align: center;
    color: var(--el-ex-text);
}

.englife-ad-house__brand {
    color: var(--el-ex-green);
    font-weight: 750;
    letter-spacing: .01em;
}

.englife-ad-house strong {
    font-size: .9rem;
}

.englife-ad-house>span:not(.englife-ad-house__brand) {
    color: var(--el-ex-muted);
    font-size: .82rem;
}

.englife-ad-house a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--el-ex-border-strong);
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--el-ex-text) !important;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ad-house a:hover {
        background: var(--el-ex-bg);
    }
}


@media (min-width:1180px) {
    .englife-exercise-main-layout.has-ad-rail {
        grid-template-columns: minmax(0,1fr) 300px;
    }

    .englife-exercise-ad-rail {
        display: block;
        width: 300px;
    }

    .englife-exercise-main-layout.has-ad-rail .englife-exercise-workspace {
        min-height: 620px;
    }

    .englife-exercise-main-layout.has-ad-rail .englife-result-transition {
        min-height: 620px;
    }

    .englife-ad-slot--exercise_rail .englife-ad-slot__stage {
        width: 300px;
        min-height: 600px;
    }

    .englife-ad-slot--exercise_rail .englife-ad-house {
        align-content: center;
        flex-direction: column;
        padding: 24px 22px;
    }

    .englife-ad-slot--exercise_rail .englife-ad-direct {
        min-height: 600px;
        flex-direction: column;
        justify-content: center;
        padding: 28px 24px;
        text-align: center;
    }

    .englife-ad-slot--exercise_rail .englife-ad-direct__image {
        width: 100%;
        height: auto;
        max-height: 210px;
    }

    .englife-ad-slot--exercise_rail .englife-ad-direct__copy {
        flex: 0 1 auto;
        align-items: center;
    }
}

@media (max-width:767px) {
    body.englife-generated-exercise-page .entry-header {
        margin-bottom: 6px;
    }

    body.englife-generated-exercise-page h1.entry-title, body.englife-generated-exercise-page .wp-block-post-title {
        margin-bottom: 7px;
    }

    .englife-exercise-meta-pills {
        gap: 4px;
        margin-bottom: 10px;
    }

    .englife-exercise-pill {
        min-height: 22px;
        padding: 3px 7px;
        font-size: .72rem;
    }

    .englife-exercise-workspace {
        padding: 9px 8px 10px;
        border-radius: 13px;
    }

    .englife-exercise-after-ad {
        margin: 16px 0 20px;
    }

    .englife-ad-slot--exercise_after {
        max-width: 336px;
    }

    .englife-ad-slot--exercise_after .englife-ad-slot__stage {
        min-height: 250px;
    }

    .englife-ad-house {
        min-height: 250px;
        align-content: center;
        flex-direction: column;
        padding: 22px 18px;
    }

}

.englife-exercise-navigation {
    margin-top: 0;
    padding: 15px;
    border: 1px solid #D4D8DF;
    border-radius: 16px;
    background: #F3F4F6;
}

.englife-exercise-navigation__eyebrow {
    margin: 0 0 7px;
    color: #5B6470;
    font-size: .74rem;
    line-height: 1.2;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.englife-exercise-navigation__next-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 10px;
    padding: 12px 14px;
    border: 1px solid #B9C0CB;
    border-radius: 10px;
    background: #FFFFFF;
    color: #262B33 !important;
    text-decoration: none !important;
}

.englife-exercise-navigation__next-link strong {
    font-size: 1rem;
    line-height: 1.3;
}

.englife-exercise-navigation__next-link span {
    color: #5B6470;
    font-size: .8rem;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-navigation__next-link:hover {
        background: #FFFFFF;
        border-color: #A4ADBA;
    }
}

.englife-exercise-navigation__related {
    margin-top: 18px;
}

.englife-exercise-navigation__related h2 {
    margin: 0 0 9px;
    font-size: 1.05rem;
    line-height: 1.3;
}

.englife-exercise-navigation__related ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.englife-exercise-navigation__related li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    align-items: baseline;
}

.englife-exercise-navigation__related li>a {
    color: #262B33;
    font-weight: 600;
}

.englife-exercise-navigation__related li>span {
    color: #5B6470;
    font-size: .78rem;
}

.englife-exercise-navigation__hub {
    margin: 15px 0 0;
    font-size: .88rem;
}

.englife-exercise-navigation__hub a {
    color: #0E6633;
    font-weight: 600;
}

.englife-exercise-navigation__admin {
    display: inline-block !important;
    width: auto !important;
    padding: 2px 7px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #5B6470 !important;
    font-size: .75rem !important;
    white-space: nowrap;
}

@media (max-width:600px) {
    .englife-exercise-navigation {
        padding: 12px;
        border-radius: 13px;
    }

    .englife-exercise-navigation__next-link {
        padding: 11px 12px;
    }
}

/* Shared component tokens: series cards/routes are reused both in the /ueben
   library and in the guided next-step hero on exercise pages. */
.englife-ueben-library,
.englife-exercise-next-hero {
    --el-bg: #FFFFFF;
    --el-surface: #FFFFFF;
    --el-surface-soft: #F3F4F6;
    --el-selected: rgba(255,211,87,.16);
    --el-text: #262B33;
    --el-muted: #5B6470;
    --el-green: #0E6633;
    --el-green-hover: #0A542A;
    --el-border: #D4D8DF;
    --el-border-strong: #B9C0CB;
    --el-border-hover: #A4ADBA;
    --el-purple: #5B6470;
    --el-difficulty-entry: #8FBE98;
    --el-difficulty-training: #D7B955;
    --el-difficulty-challenge: #D58A4E;
}

.englife-ueben-library {
    color: var(--el-text);
    margin: 18px 0 38px;
}

.englife-ueben-library *, .englife-ueben-library *::before, .englife-ueben-library *::after {
    box-sizing: border-box;
}

.englife-ueben-library a {
    text-underline-offset: 2px;
}

.englife-ueben-library :focus-visible {
    outline: 3px solid rgba(14,102,51,.22);
    outline-offset: 2px;
}

.englife-ueben-search {
    margin: 0 0 18px;
    padding: 13px 14px;
    background: var(--el-bg);
    border: 1px solid var(--el-border);
    border-radius: 16px;
}

.englife-ueben-search__main {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: end;
}

.englife-ueben-search__label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--el-text);
    font-size: .86rem;
    font-weight: 600;
}

.englife-ueben-search__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.englife-ueben-search__field-label {
    color: var(--el-text);
    font-size: .86rem;
    font-weight: 600;
}

.englife-ueben-search__input-wrap {
    position: relative;
    min-width: 0;
}

.englife-ueben-search__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 80;
    max-height: min(320px,50vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--el-border-strong);
    border-radius: 12px;
    background: var(--el-surface);
    box-shadow: 0 10px 28px rgba(38,43,51,.12);
}

.englife-ueben-search__suggestions[hidden] {
    display: none !important;
}

.englife-ueben-search__suggestion {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 0;
    border-bottom: 1px solid var(--el-border);
    border-radius: 0;
    background: var(--el-surface);
    color: var(--el-text);
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.englife-ueben-search__suggestion:first-child {
    border-radius: 11px 11px 0 0;
}

.englife-ueben-search__suggestion:last-child {
    border-bottom: 0;
    border-radius: 0 0 11px 11px;
}

.englife-ueben-search__suggestion:only-child {
    border-radius: 11px;
}

.englife-ueben-search__suggestion.is-active,
.englife-ueben-search__suggestion:hover {
    background: var(--el-system-interaction-tint, rgba(255,211,87,.16));
}

.englife-ueben-search__suggestion-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1.3;
    font-weight: 600;
}

.englife-ueben-search__suggestion-category {
    flex: 0 0 auto;
    color: var(--el-muted);
    font-size: .72rem;
    line-height: 1.2;
    font-weight: 500;
}

.englife-ueben-search input, .englife-ueben-search select {
    width: 100%;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--el-border-strong);
    border-radius: 12px;
    background: var(--el-surface);
    color: var(--el-text);
    box-shadow: none;
    font: inherit;
}

.englife-ueben-search input:hover, .englife-ueben-search select:hover {
    border-color: var(--el-border-hover);
}

.englife-ueben-search input:focus, .englife-ueben-search select:focus {
    border-color: var(--el-green);
    outline: 3px solid rgba(14,102,51,.18);
    outline-offset: 1px;
}

.englife-ueben-library .englife-ueben-search__submit,
.englife-ueben-library .englife-ueben-filter-actions button,
.englife-ueben-library .englife-ueben-card__link {
    min-height: 38px !important;
    padding: 7px 13px !important;
    border: 1px solid var(--el-green) !important;
    border-radius: 6px !important;
    background: var(--el-green) !important;
    color: #fff !important;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease;
}

.englife-ueben-library .englife-ueben-search__submit {
    min-width: 0 !important;
    min-height: 44px !important;
    width: auto !important;
    white-space: nowrap;
    align-self: end;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-search__submit:hover,
    .englife-ueben-library .englife-ueben-filter-actions button:hover,
    .englife-ueben-library .englife-ueben-card__link:hover {
        background: var(--el-green-hover) !important;
        border-color: var(--el-green-hover) !important;
        box-shadow: none !important;
    }
}

.englife-ueben-library .englife-ueben-search__submit:focus-visible,
.englife-ueben-library .englife-ueben-filter-actions button:focus-visible,
.englife-ueben-library .englife-ueben-card__link:focus-visible {
    outline: 3px solid rgba(14,102,51,.30) !important;
    outline-offset: 2px !important;
}

.englife-ueben-library .englife-ueben-search__submit:active,
.englife-ueben-library .englife-ueben-filter-actions button:active,
.englife-ueben-library .englife-ueben-card__link:active {
    transform: translateY(1px);
}

.englife-ueben-filter-details {
    margin-top: 8px;
    border-top: 1px solid var(--el-border);
}

.englife-ueben-filter-details>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 9px 2px 0;
    list-style: none;
    cursor: pointer;
    color: var(--el-muted);
    font-size: .86rem;
    font-weight: 600;
}

.englife-ueben-filter-details>summary::-webkit-details-marker {
    display: none;
}

.englife-ueben-filter-details>summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-right: 2px solid var(--el-purple);
    border-bottom: 2px solid var(--el-purple);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 120ms ease;
}

.englife-ueben-filter-details[open]>summary::after {
    transform: rotate(225deg) translate(-2px,-2px);
}

.englife-ueben-filter-details__body {
    padding: 11px 0 1px;
}

.englife-ueben-filter-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.englife-ueben-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.englife-ueben-filter-actions button {
    padding: 8px 13px;
}

.englife-ueben-filter-reset {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--el-border-strong);
    border-radius: 12px;
    background: var(--el-surface);
    color: var(--el-text) !important;
    text-decoration: none !important;
    font-size: .86rem;
    font-weight: 600;
}

.englife-ueben-search-status {
    min-height: 0;
    margin: 0;
    color: var(--el-muted);
    font-size: .82rem;
    line-height: 1.3;
}

.englife-ueben-search-status:not(:empty) {
    margin: 7px 1px 0;
}

.englife-ueben-library.is-loading {
    cursor: progress;
}

.englife-ueben-library.is-loading .englife-ueben-library__after-search {
    opacity: .48;
    transition: opacity 120ms ease;
}

.englife-ueben-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: -5px 0 15px;
}

.englife-ueben-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 9px;
    border: 1px solid var(--el-border-strong);
    border-radius: 999px;
    background: var(--el-surface);
    color: var(--el-text) !important;
    text-decoration: none !important;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 550;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.englife-ueben-filter-chip::after {
    content: "×";
    color: var(--el-muted);
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
}

.englife-ueben-filter-chip--clear {
    border-color: transparent;
    background: transparent;
    color: var(--el-muted) !important;
    font-weight: 550;
}

.englife-ueben-filter-chip--clear::after {
    content: none;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-filter-chip:hover {
        background: var(--el-system-interaction-tint, rgba(255,211,87,.16));
        border-color: var(--el-border-hover);
    }

    .englife-ueben-filter-chip--clear:hover {
        background: transparent;
        border-color: transparent;
        color: var(--el-text) !important;
        text-decoration: underline !important;
    }
}

.englife-ueben-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.englife-ueben-group {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid var(--el-border);
    border-radius: 16px;
    background: var(--el-surface-soft);
}

.englife-ueben-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
}

.englife-ueben-section__head h2, .englife-ueben-results-head h2 {
    margin: 0 !important;
    color: var(--el-green-hover) !important;
    font-size: .84rem !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.englife-ueben-progress__stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
    margin: 0;
}

.englife-ueben-progress__stat {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--el-border);
    border-radius: 12px;
    background: var(--el-surface);
}

.englife-ueben-progress__stat dt {
    min-width: 0;
    margin: 0 0 2px;
    color: var(--el-muted);
    font-size: .76rem;
    line-height: 1.3;
    font-weight: 600;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.englife-ueben-progress__stat dd {
    margin: 0;
    color: var(--el-text);
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 750;
}

.englife-ueben-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.englife-ueben-grid--recommendations {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.englife-ueben-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 14px 14px 13px;
    overflow: hidden;
    border: 1px solid var(--el-border);
    border-radius: 14px;
    background: var(--el-surface);
    box-shadow: none;
    transition: none;
}

.englife-ueben-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--el-difficulty-training);
}

.englife-ueben-card--difficulty-entry::before {
    background: var(--el-difficulty-entry);
}

.englife-ueben-card--difficulty-training::before {
    background: var(--el-difficulty-training);
}

.englife-ueben-card--difficulty-challenge::before {
    background: var(--el-difficulty-challenge);
}

.englife-ueben-card__badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 2px 0 8px;
    min-width: 0;
    overflow: hidden;
}

.englife-ueben-card__badge {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--el-bg);
    color: var(--el-muted);
    font-size: .75rem;
    line-height: 1.15;
    font-weight: 550;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.englife-ueben-card__badge--admin {
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-card__stamp {
    --el-stamp-color: #B45D3E;
    position: absolute;
    z-index: 4;
    top: 9px;
    right: 9px;
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-sizing: border-box;
    border: 2px solid var(--el-stamp-color);
    border-radius: 49% 51% 47% 53% / 52% 47% 53% 48%;
    box-shadow: inset 0 0 0 2px rgba(246,244,239,.72), inset 0 0 0 3px var(--el-stamp-color);
    color: var(--el-stamp-color);
    background: rgba(246,244,239,.78);
    transform: rotate(-8deg);
    transform-origin: center;
    pointer-events: none;
    user-select: none;
    opacity: .94;
    font-variant-numeric: tabular-nums;
}

.englife-ueben-card__stamp::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed currentColor;
    border-radius: 50% 47% 52% 48% / 46% 53% 47% 54%;
    opacity: .38;
}

.englife-ueben-card__stamp--low {
    --el-stamp-color: #B45D3E;
}

.englife-ueben-card__stamp--mid {
    --el-stamp-color: #9A731D;
}

.englife-ueben-card__stamp--high {
    --el-stamp-color: #3F8272;
}

.englife-ueben-card__stamp--perfect {
    --el-stamp-color: #2F6F5F;
    width: 68px;
    height: 68px;
    top: 7px;
    right: 7px;
    transform: rotate(-7deg);
}

.englife-ueben-card__stamp-value {
    position: relative;
    z-index: 1;
    display: block;
    font-size: .92rem;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.025em;
    white-space: nowrap;
    text-transform: uppercase;
}

.englife-ueben-card__stamp-crown {
    position: relative;
    z-index: 1;
    width: 23px;
    height: 14px;
    margin-top: -4px;
    margin-bottom: 2px;
    overflow: visible;
}

.englife-ueben-card__stamp--perfect .englife-ueben-card__stamp-value {
    font-size: .88rem;
}

.englife-ueben-card h4 {
    margin: 0 0 7px;
    font-size: 1rem;
    line-height: 1.34;
    font-weight: 700;
}

.englife-ueben-card h4 a {
    color: var(--el-text) !important;
    text-decoration: none !important;
}

.englife-ueben-card h4 a:hover {
    text-decoration: underline !important;
}

.englife-ueben-card__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 11px;
    padding-right: 42px;
}

.englife-ueben-card__task-icon {
    position: absolute;
    right: 14px;
    bottom: 15px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-green-hover);
    pointer-events: none;
}

.englife-ueben-card__task-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.englife-ueben-card__sr-difficulty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.englife-ueben-card__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    font-size: .82rem;
    line-height: 1.2;
}

.englife-ueben-series-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.englife-ueben-series-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 150px;
    padding: 15px;
    border: 1px solid var(--el-border);
    border-radius: 14px;
    background: var(--el-surface);
    color: var(--el-text) !important;
    text-decoration: none !important;
    box-shadow: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.englife-ueben-series-card:hover {
    border-color: var(--el-green);
    text-decoration: none !important;
}

.englife-ueben-series-card:active {
    transform: translateY(1px);
}

.englife-ueben-series-card__score {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 52px;
    padding: 5px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: rgba(246,244,239,.86);
    font-size: .78rem;
    line-height: 1;
    font-weight: 820;
    transform: rotate(-7deg);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.englife-ueben-series-card__score--low {
    color: #B45D3E;
}

.englife-ueben-series-card__score--mid {
    color: #9A731D;
}

.englife-ueben-series-card__score--high {
    color: #3F8272;
}

.englife-ueben-series-card.is-complete .englife-ueben-series-card__head {
    padding-right: 58px;
}

.englife-ueben-series-card__head h3 {
    margin: 0 0 5px !important;
    color: var(--el-text) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 720 !important;
}

.englife-ueben-series-card__head p {
    margin: 0;
    color: var(--el-muted);
    font-size: .76rem;
    line-height: 1.35;
}

.englife-ueben-series-route {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 18px 0 15px;
    padding: 0 2px;
}

.englife-ueben-series-route__dot {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--el-border-strong);
    border-radius: 50%;
    background: var(--el-bg);
    box-shadow: 0 0 0 0 transparent;
}

.englife-ueben-series-route__dot.is-done {
    border-color: var(--el-green);
    background: var(--el-green);
}

.englife-ueben-series-route__dot.is-current {
    border-color: var(--el-green-hover);
    background: var(--el-surface);
    box-shadow: 0 0 0 4px rgba(14,102,51,.12);
}

.englife-ueben-series-route__dot.is-current::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--el-green-hover);
}

/* Exercise-page location only: preserves the existing completed/next marker.
   The yellow ring and visible 'Hier' label are independent of progress. */
.englife-ueben-series-route.has-viewing-station {
    margin-bottom: 30px;
}

.englife-ueben-series-route__dot.is-viewing {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #FFD357;
}

.englife-ueben-series-route__dot.is-viewing::before {
    content: "Hier";
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: .69rem;
    font-weight: 700;
    line-height: 1;
    color: #262B33;
    white-space: nowrap;
    pointer-events: none;
}

.englife-ueben-series-route__line {
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    margin: 0 4px;
    background: repeating-linear-gradient( 90deg, var(--el-border-strong) 0 5px, transparent 5px 10px );
    opacity: .82;
}

.englife-ueben-series-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.englife-ueben-series-card__progress {
    min-width: 0;
    color: var(--el-muted);
    font-size: .76rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.englife-ueben-series-card__action {
    flex: 0 0 auto;
    color: var(--el-green-hover);
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 720;
    white-space: nowrap;
}

@media (max-width:980px) {
    .englife-ueben-series-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:650px) {
    .englife-ueben-series-grid {
        grid-template-columns: 1fr;
    }

    .englife-ueben-series-card {
        min-height: 142px;
    }

    .englife-ueben-progress__stat {
        padding: 9px 8px;
    }

    .englife-ueben-progress__stat dt {
        font-size: .69rem;
    }
}

.englife-ueben-results-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

.englife-ueben-results-summary {
    color: var(--el-muted);
    font-size: .8rem;
}

.englife-ueben-empty {
    padding: 16px;
    border: 1px dashed var(--el-border-strong);
    border-radius: 12px;
    background: var(--el-bg);
    color: var(--el-text);
    line-height: 1.5;
}

.englife-ueben-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.englife-ueben-pagination a, .englife-ueben-pagination span {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--el-border-strong);
    border-radius: 10px;
    background: var(--el-surface);
    color: var(--el-text) !important;
    text-decoration: none !important;
}

.englife-ueben-pagination .current {
    border-color: var(--el-green);
    background: var(--el-green);
    color: #fff !important;
}

.englife-ueben-library__admin-note {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-left: 3px solid var(--el-purple);
    background: var(--el-bg);
    color: var(--el-muted);
    font-size: .8rem;
    line-height: 1.4;
}

@media (max-width:900px) {
    .englife-ueben-filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .englife-ueben-grid, .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:700px) {
    .englife-ueben-library {
        margin-top: 10px;
    }

    .englife-ueben-section__head {
        display: block;
        margin-bottom: 8px;
    }
}

@media (max-width:600px) {
    .englife-ueben-search {
        padding: 11px;
        margin-bottom: 14px;
    }

    .englife-ueben-search__main {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 7px;
    }

    .englife-ueben-search input, .englife-ueben-search select {
        font-size: 16px;
    }

    .englife-ueben-library .englife-ueben-search__submit {
        min-height: 44px !important;
    }

    .englife-ueben-active-filters {
        margin-top: -3px;
        margin-bottom: 12px;
    }

    .englife-ueben-filter-chip {
        min-height: 36px;
        font-size: .8rem;
    }

    .englife-ueben-filter-grid {
        grid-template-columns: 1fr;
    }

    .englife-ueben-grid, .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px;
    }

    .englife-ueben-group {
        margin-bottom: 11px;
        padding: 11px;
        border-radius: 14px;
    }

    .englife-ueben-card {
        padding: 11px 10px 10px;
        border-radius: 12px;
    }

    .englife-ueben-card__badges {
        display: flex;
        gap: 3px;
        margin: 2px 0 7px;
        overflow: hidden;
    }

    .englife-ueben-card__badge {
        display: none;
    }

    .englife-ueben-card__badge--cefr, .englife-ueben-card__badge--area {
        display: inline-flex;
        min-width: 0;
        min-height: 20px;
        padding: 2px 5px;
        font-size: .68rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .englife-ueben-card h4 {
        margin: 0 0 8px;
        font-size: .94rem;
        line-height: 1.3;
    }

    .englife-ueben-card__footer {
        padding-top: 0;
    }

    .englife-ueben-library .englife-ueben-card__link {
        width: 100%;
        min-height: 44px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: .78rem;
    }

    .englife-ueben-library .englife-ueben-filter-actions button {
        min-height: 44px !important;
    }
}

@media (max-width:420px) {
    .englife-ueben-grid, .englife-ueben-grid--recommendations {
        grid-template-columns: 1fr;
    }

    .englife-ueben-card h4 {
        font-size: .98rem;
    }
}

@media (prefers-reduced-motion:reduce) {
    .englife-ueben-library * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

.englife-ueben-progress-reset {
    display: flex;
    justify-content: flex-end;
    margin: 24px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--el-border);
}

.englife-ueben-progress-reset__open {
    appearance: none;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #C98773;
    border-radius: 8px;
    background: transparent;
    color: #8A3F3F;
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}

.englife-ueben-progress-reset__open:hover {
    background: #FFF8F5;
    border-color: #AD654F;
    color: #743628;
}

.englife-ueben-reset-modal[hidden] {
    display: none !important;
}

.englife-ueben-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.englife-ueben-reset-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(38,43,51,.42);
}

.englife-ueben-reset-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(460px,100%);
    padding: 22px;
    border: 1px solid var(--el-border-strong);
    border-radius: 16px;
    background: var(--el-surface);
    box-shadow: 0 18px 50px rgba(38,43,51,.20);
}

.englife-ueben-reset-modal__dialog h3 {
    margin: 0 0 9px !important;
    color: var(--el-text) !important;
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
}

.englife-ueben-reset-modal__dialog p {
    margin: 0;
    color: var(--el-text);
    font-size: .94rem;
    line-height: 1.5;
}

.englife-ueben-reset-modal__warning {
    margin-top: 10px !important;
    font-weight: 650;
    color: #8A3F3F !important;
}

.englife-ueben-reset-modal__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.englife-ueben-reset-modal__actions button {
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 9px;
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
}

.englife-ueben-reset-modal__cancel {
    border: 1px solid var(--el-border-strong);
    background: var(--el-surface);
    color: var(--el-text);
}

.englife-ueben-reset-modal__confirm {
    border: 1px solid #A85742;
    background: #A85742;
    color: #fff;
}

.englife-ueben-reset-modal__confirm:hover {
    border-color: #8F4433;
    background: #8F4433;
}

.englife-ueben-reset-modal__actions button:disabled {
    cursor: wait;
    opacity: .62;
}

.englife-ueben-reset-modal__status {
    min-height: 1.35em;
    margin-top: 10px !important;
    color: #8A3F3F !important;
    font-size: .82rem !important;
}

@media (max-width:520px) {
    .englife-ueben-progress-reset {
        justify-content: center;
    }

    .englife-ueben-reset-modal__dialog {
        padding: 19px 17px;
    }

    .englife-ueben-reset-modal__actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .englife-ueben-reset-modal__actions button {
        width: 100%;
    }
}



.englife-question-number {
    margin-right: .68rem;
}

.englife-exercise-quiz .step[data-question-id] {
    --englife-question-content-indent: 3rem;
}

.englife-exercise-quiz .englife-numbered-prompt {
    box-sizing: border-box;
    position: relative;
    padding-left: var(--englife-question-content-indent);
}

.englife-exercise-quiz .englife-question-number {
    position: absolute;
    left: 0;
    margin-left: 0;
    margin-right: 1.05rem;
}

.englife-exercise-quiz .step[data-question-id]:has( textarea,
input[type="text"],
input[type="number"],
input[type="date"] ) .ays-field:has( textarea,
input[type="text"],
input[type="number"],
input[type="date"] ) {
    box-sizing: border-box !important;
    width: calc(100% - var(--englife-question-content-indent)) !important;
    margin-left: var(--englife-question-content-indent) !important;
    margin-right: 0 !important;
}


@media (max-width:600px) {
    .englife-exercise-quiz .step[data-question-id] {
        --englife-question-content-indent: 2.7rem;
    }

    .englife-exercise-quiz .englife-question-number {
        margin-right: .85rem;
    }
}

.englife-ueben-section__all-link {
    flex: 0 0 auto;
    color: var(--el-green-hover,#0A542A) !important;
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.englife-ueben-section__all-link:hover {
    text-decoration: underline !important;
}

.englife-family-hub__groups {
    margin-top: 14px;
    background: transparent;
}

.englife-exercise-navigation__related.englife-ueben-library {
    margin: 18px 0 0;
    background: transparent;
}

.englife-exercise-navigation__related.englife-ueben-library h2 {
    margin: 0 0 9px !important;
}

.englife-ueben-series-library {
    margin-top: 18px;
}

@media (max-width:700px) {
    .englife-ueben-section__head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .englife-ueben-section__all-link {
        white-space: normal;
    }
}

.englife-ueben-progress__stat--action dt a {
    color: inherit !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.englife-ueben-progress__stat--action dt a:hover {
    color: var(--el-green-hover,#0A542A) !important;
}

.englife-ueben-library {
    --el-brand-green: #0E6633;
    --el-brand-green-mid: #0E6633;
    --el-brand-green-light: #F3F4F6;
    --el-brand-blue: #5B6470;
    --el-brand-blue-light: #F3F4F6;
    --el-brand-sand: #D4D8DF;
    --el-paper-grid: rgba(14,102,51,.055);
    --el-shadow-soft: 0 5px 18px rgba(38,43,51,.055);
    --el-shadow-hover: 0 9px 24px rgba(38,43,51,.085);
}

.englife-ueben-library .englife-ueben-search {
    position: relative;
    margin: 0 0 28px;
    padding: 20px;
    border: 1px solid #D4D8DF;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--el-shadow-soft);
    overflow: visible;
}

.englife-ueben-library .englife-ueben-search::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 5px;
    border-radius: 0 5px 5px 0;
    background: var(--el-brand-green);
}

.englife-ueben-library .englife-ueben-search__field-label {
    color: var(--el-text);
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 750;
}

.englife-ueben-library .englife-ueben-search input, .englife-ueben-library .englife-ueben-search select {
    border-color: #D4D8DF;
    background: rgba(255,255,255,.96);
}

.englife-ueben-library .englife-ueben-search input {
    min-height: 48px;
    padding-left: 14px;
    box-shadow: 0 1px 0 rgba(38,43,51,.025);
}

.englife-ueben-library .englife-ueben-search__submit {
    min-height: 48px !important;
    padding: 9px 18px !important;
    border-color: var(--el-brand-green) !important;
    background: var(--el-brand-green) !important;
    border-radius: 9px !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-search__submit:hover {
        border-color: #0A542A !important;
        background: #0A542A !important;
    }
}

.englife-ueben-library .englife-ueben-filter-details {
    margin-top: 12px;
    border-top-color: #D4D8DF;
}

.englife-ueben-library .englife-ueben-filter-details>summary {
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-group {
    margin: 0;
    padding: 20px 0 24px;
    border: 0;
    border-bottom: 1px solid #D4D8DF;
    border-radius: 0;
    background: transparent;
}

.englife-ueben-library .englife-ueben-group:first-child {
    padding-top: 0;
}

.englife-ueben-library .englife-ueben-results-group {
    padding-top: 26px;
    border-bottom: 0;
}

.englife-ueben-library .englife-ueben-section__head, .englife-ueben-library .englife-ueben-results-head {
    margin-bottom: 12px;
}

.englife-ueben-library .englife-ueben-section__head h2, .englife-ueben-library .englife-ueben-results-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--el-text) !important;
    font-size: .86rem !important;
    font-weight: 780 !important;
    letter-spacing: .06em;
}

.englife-ueben-library .englife-ueben-section__head h2::before,
.englife-ueben-library .englife-ueben-results-head h2::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    height: 17px;
    border-radius: 999px;
    background: var(--el-brand-green);
}

.englife-ueben-library .englife-ueben-section__all-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--el-brand-green) !important;
    font-size: .82rem;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 120ms ease,color 120ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-section__all-link:hover {
        background: var(--el-brand-green-light);
        color: #0A542A !important;
    }
}

.englife-ueben-library .englife-ueben-progress__stats {
    gap: 10px;
}

.englife-ueben-library .englife-ueben-progress__stat {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 12px 16px;
    border-color: #D4D8DF;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(38,43,51,.035);
}

.englife-ueben-library .englife-ueben-progress__stat::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--el-brand-blue);
}

.englife-ueben-library .englife-ueben-progress__stat:nth-child(2)::before {
    background: var(--el-brand-green);
}

.englife-ueben-library .englife-ueben-progress__stat:nth-child(3)::before {
    background: #FFD357;
}

.englife-ueben-library .englife-ueben-progress__stat dd {
    margin-top: 3px;
    font-size: 1.45rem;
}

.englife-ueben-library .englife-ueben-card {
    padding: 14px 14px 13px 17px;
    border-color: #D4D8DF;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(38,43,51,.035);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.englife-ueben-library .englife-ueben-card::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 4px;
    height: auto;
    background: var(--el-brand-green-mid);
}

.englife-ueben-library .englife-ueben-card--area-grammar::before {
    background: var(--el-brand-blue);
}

.englife-ueben-library .englife-ueben-card--area-vocabulary::before {
    background: var(--el-brand-green);
}

.englife-ueben-library .englife-ueben-card--area-listening::before {
    background: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-reading::before {
    background: #FFD357;
}

.englife-ueben-library .englife-ueben-card--area-writing::before {
    background: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-speaking::before {
    background: #0E6633;
}

.englife-ueben-library .englife-ueben-card--area-pronunciation::before {
    background: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-mixed::before {
    background: #5B6470;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-card:hover {
        border-color: #B9C0CB;
        box-shadow: var(--el-shadow-hover);
        transform: translateY(-1px);
    }
}

.englife-ueben-library .englife-ueben-card__badges {
    gap: 5px;
    margin: 0 0 8px;
}

.englife-ueben-library .englife-ueben-card__badge {
    min-height: 21px;
    padding: 3px 7px;
    border: 1px solid transparent;
    background: #F3F4F6;
    color: #5B6470;
    font-size: .72rem;
    font-weight: 600;
}

.englife-ueben-library .englife-ueben-card--area-grammar .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: var(--el-brand-blue-light);
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-vocabulary .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: var(--el-brand-green-light);
    color: var(--el-brand-green);
}

.englife-ueben-library .englife-ueben-card--area-listening .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-reading .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-writing .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card--area-speaking .englife-ueben-card__badge--area {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #0E6633;
}

.englife-ueben-library .englife-ueben-card__badge--difficulty {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card__badge--admin {
    border-color: #D4D8DF;
    background: #F3F4F6;
    color: #5B6470;
    opacity: .86;
}

.englife-ueben-library .englife-ueben-card h4 {
    margin-top: 1px !important;
    color: var(--el-text) !important;
    font-size: .96rem !important;
    line-height: 1.34 !important;
    font-weight: 720 !important;
}

.englife-ueben-library .englife-ueben-card__footer {
    margin-top: auto;
    padding-top: 12px;
}

.englife-ueben-library .englife-ueben-card__task-icon {
    color: var(--el-brand-green-mid);
    opacity: .96;
}

.englife-ueben-library .englife-ueben-results-group .englife-ueben-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.englife-ueben-library .englife-ueben-results-head {
    align-items: flex-end;
    padding-bottom: 3px;
}

.englife-ueben-library .englife-ueben-results-summary {
    color: #5B6470;
    font-size: .8rem;
    font-weight: 600;
}

.englife-ueben-library .englife-ueben-series-card {
    border-color: #D4D8DF;
    background: #fff;
    box-shadow: 0 2px 10px rgba(38,43,51,.035);
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-series-card:hover {
        border-color: #B9C0CB;
        box-shadow: var(--el-shadow-hover);
        transform: translateY(-1px);
    }
}

.englife-ueben-library .englife-ueben-series-card__action {
    color: var(--el-brand-green) !important;
}

.englife-ueben-library .englife-ueben-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 22px 0 2px;
}

.englife-ueben-library .englife-ueben-pagination a, .englife-ueben-library .englife-ueben-pagination span {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #D4D8DF;
    border-radius: 10px;
    background: #fff;
    color: var(--el-text) !important;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none !important;
}

.englife-ueben-library .englife-ueben-pagination a[rel="prev"],
.englife-ueben-library .englife-ueben-pagination a[rel="next"] {
    min-width: auto;
    color: var(--el-brand-green) !important;
}

.englife-ueben-library .englife-ueben-pagination .current {
    border-color: var(--el-brand-green);
    background: var(--el-brand-green);
    color: #fff !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-pagination a:hover {
        border-color: #B9C0CB;
        background: var(--el-brand-green-light);
    }
}

.englife-ueben-series-library .englife-ueben-group {
    padding-top: 0;
}

.englife-ueben-library .englife-ueben-library__admin-note {
    margin-bottom: 14px;
    padding: 8px 11px;
    border-left: 3px solid #FFD357;
    border-radius: 0 8px 8px 0;
    background: #F3F4F6;
    color: #5B6470;
    font-size: .75rem;
}

@media (max-width:900px) {
    .englife-ueben-library .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-search {
        padding: 16px 14px 16px 16px;
        border-radius: 15px;
    }

    .englife-ueben-library .englife-ueben-group {
        padding: 17px 0 20px;
    }

    .englife-ueben-library .englife-ueben-results-group .englife-ueben-grid,
    .englife-ueben-library .englife-ueben-grid--recommendations {
        grid-template-columns: 1fr;
    }

    .englife-ueben-library .englife-ueben-section__head {
        align-items: flex-start;
        gap: 8px;
    }

    .englife-ueben-library .englife-ueben-section__all-link {
        min-height: 30px;
        padding: 4px 6px;
        font-size: .76rem;
    }
}

@media (max-width:520px) {
    .englife-ueben-library .englife-ueben-progress__stats {
        grid-template-columns: 1fr;
    }

    .englife-ueben-library .englife-ueben-progress__stat {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .englife-ueben-library .englife-ueben-progress__stat dt,
    .englife-ueben-library .englife-ueben-progress__stat dd {
        margin: 0;
    }
}

.englife-ueben-library .englife-ueben-personal-hero {
    position: relative;
    isolation: isolate;
    margin: 8px 0 34px;
    padding: 6px 22px 10px;
    overflow: hidden;
    border: 1px solid #D4D8DF;
    border-radius: 22px;
    background-color: #F3F4F6;
    box-shadow: 0 7px 24px rgba(38,43,51,.045);
}



.englife-ueben-library .englife-ueben-personal-hero>.englife-ueben-group {
    position: relative;
    z-index: 1;
    padding: 18px 0 20px;
    border-bottom: 0;
}

.englife-ueben-library .englife-ueben-personal-hero>.englife-ueben-group:last-child {
    border-bottom: 0;
}

.englife-ueben-library .englife-ueben-personal-hero .englife-ueben-progress {
    padding-top: 12px;
}

.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-card {
    min-height: 158px;
    background: rgba(255,255,255,.96);
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card {
    background: rgba(255,255,255,.96);
}

.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-results-group {
    margin-top: 0;
    padding-top: 30px;
    border-top: 0;
}

.englife-ueben-series-library {
    margin-top: 8px;
}

.englife-ueben-series-library .englife-ueben-series-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
}

.englife-ueben-series-library .englife-ueben-series-card {
    min-height: 166px;
}

@media (max-width:980px) {
    .englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-grid,
    .englife-ueben-series-library .englife-ueben-series-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-personal-hero {
        margin-bottom: 26px;
        padding: 4px 14px 8px;
        border-radius: 17px;
    }



    .englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-grid,
    .englife-ueben-series-library .englife-ueben-series-grid {
        grid-template-columns: 1fr;
    }
}

.englife-ueben-library .englife-ueben-personal-hero {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}



.englife-ueben-library .englife-ueben-pagination > a, .englife-ueben-library .englife-ueben-pagination > span {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid #D4D8DF;
    border-radius: 10px;
    background: #fff;
    color: var(--el-text) !important;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(38,43,51,.025);
}

.englife-ueben-library .englife-ueben-pagination > a[rel="prev"],
.englife-ueben-library .englife-ueben-pagination > a[rel="next"] {
    min-width: auto;
    color: var(--el-brand-green) !important;
    padding-inline: 14px;
}

.englife-ueben-library .englife-ueben-pagination > a > span,
.englife-ueben-library .englife-ueben-pagination > span > span {
    min-width: 0;
    min-height: 0;
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
}

.englife-ueben-library .englife-ueben-pagination > .current {
    border-color: var(--el-brand-green);
    background: var(--el-brand-green);
    color: #fff !important;
    box-shadow: none;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-pagination > a:hover {
        border-color: #B9C0CB;
        background: var(--el-brand-green-light);
    }
}


.englife-ueben-library {
    position: relative;
    isolation: isolate;
}



.englife-ueben-library > * {
    position: relative;
    z-index: 1;
}



.englife-ueben-library .englife-ueben-results-group {
    position: relative;
    isolation: isolate;
}






.englife-ueben-library--catalog {
    background: transparent;
}

.englife-ueben-discovery {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 34px 0 28px;
}



.englife-ueben-discovery>* {
    position: relative;
    z-index: 1;
}

.englife-ueben-discovery__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
}

.englife-ueben-discovery__head h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    color: #262B33 !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    font-weight: 780 !important;
}

.englife-ueben-discovery__head h2::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 23px;
    border-radius: 999px;
    background: #0E6633;
}

.englife-ueben-discovery__head p {
    margin: 6px 0 0;
    color: #5B6470;
    font-size: .92rem;
}

.englife-ueben-discovery__utilities {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 14px;
}

.englife-ueben-discovery__utilities>a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title arrow" "desc arrow";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 13px 15px;
    border: 1px solid #D4D8DF;
    border-radius: 13px;
    background: #F3F4F6;
    color: #262B33 !important;
    text-decoration: none !important;
}

.englife-ueben-discovery__utilities>a strong {
    grid-area: title;
    font-size: .9rem;
}

.englife-ueben-discovery__utilities>a span:nth-of-type(1) {
    grid-area: desc;
    color: #5B6470;
    font-size: .78rem;
}

.englife-ueben-discovery__utilities>a span:last-child {
    grid-area: arrow;
    color: #0E6633;
    font-size: 1.15rem;
    font-weight: 700;
}

.englife-ueben-discovery__utilities>a:hover {
    border-color: #B9C0CB;
    background: #fff;
}

.englife-area-hub__intro {
    margin: 0 0 22px;
    color: #5B6470;
    font-size: 1rem;
    line-height: 1.6;
}

.englife-area-hub__topics {
    margin: 0;
}

.englife-ueben-library--catalog .englife-ueben-results-group {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #D4D8DF;
}

.englife-ueben-library--catalog .englife-ueben-results-group::before {
    background: #FFFFFF;
}

@media (max-width:700px) {
    .englife-ueben-discovery {
        padding-top: 28px;
    }

    .englife-ueben-discovery__utilities {
        grid-template-columns: 1fr;
    }
}

.englife-ueben-discovery__category-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 34px;
    row-gap: 0;
    margin: 18px 0 26px;
    border-top: 1px solid var(--el-border);
}

.englife-ueben-discovery__category-link {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--el-border);
    color: var(--el-text) !important;
    text-decoration: none !important;
}

.englife-ueben-discovery__category-link:hover .englife-ueben-discovery__category-name {
    color: #0E6633;
    text-decoration: underline;
}

.englife-ueben-discovery__category-name {
    font-size: 1.04rem;
    font-weight: 750;
    line-height: 1.25;
}

.englife-ueben-discovery__category-count {
    color: var(--el-muted);
    font-size: .84rem;
    white-space: nowrap;
}

.englife-ueben-discovery__category-arrow {
    color: #0E6633;
    font-size: 1.12rem;
    line-height: 1;
}

.englife-ueben-family-disclosure {
    min-width: 0;
    border-bottom: 1px solid var(--el-border);
}

.englife-ueben-family-disclosure:first-child {
    border-top: 1px solid var(--el-border);
}

.englife-ueben-family-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 22px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 12px 3px;
    cursor: pointer;
    list-style: none;
    color: var(--el-text);
}

.englife-ueben-family-disclosure > summary::-webkit-details-marker {
    display: none;
}

.englife-ueben-family-disclosure__name {
    font-weight: 750;
    line-height: 1.25;
}

.englife-ueben-family-disclosure__count {
    color: var(--el-muted);
    font-size: .82rem;
    white-space: nowrap;
}

.englife-ueben-family-disclosure__chevron {
    color: #0E6633;
    font-size: 1.08rem;
    text-align: center;
    transform-origin: center;
    transition: transform .16s ease;
}

.englife-ueben-family-disclosure[open] > summary .englife-ueben-family-disclosure__chevron {
    transform: rotate(180deg);
}

.englife-ueben-family-disclosure[open] > summary .englife-ueben-family-disclosure__name {
    color: #0E6633;
}

.englife-ueben-family-disclosure__content {
    padding: 0 0 17px 14px;
    border-left: 2px solid rgba(14,102,51,.18);
}

.englife-ueben-family-disclosure__page-link {
    margin: 12px 0 0;
    font-size: .84rem;
}

.englife-ueben-family-disclosure__page-link a {
    color: #0E6633 !important;
    font-weight: 700;
    text-decoration: none !important;
}

.englife-ueben-family-rows {
    display: grid;
    gap: 18px;
}

.englife-ueben-list-series > h4 {
    margin: 0 0 7px !important;
    color: var(--el-muted) !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    line-height: 1.35 !important;
    text-transform: uppercase;
}

.englife-ueben-list-rows {
    display: grid;
    gap: 0;
}

.englife-ueben-list-row {
    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) 48px;
    gap: 9px;
    align-items: center;
    min-height: 58px;
    padding: 7px 2px;
    border-top: 1px solid #D4D8DF;
    color: var(--el-text) !important;
    text-decoration: none !important;
}

.englife-ueben-list-row:first-child {
    border-top: 0;
}

.englife-ueben-list-row:hover .englife-ueben-list-row__body strong {
    color: #0E6633;
    text-decoration: underline;
}

.englife-ueben-list-row__number {
    color: var(--el-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.englife-ueben-list-row__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.englife-ueben-list-row__body strong {
    overflow-wrap: anywhere;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.28;
}

.englife-ueben-list-row__meta {
    color: var(--el-muted);
    font-size: .76rem;
    line-height: 1.32;
}

.englife-ueben-list-row__admin {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #5B6470;
    font-size: .72rem;
}

.englife-ueben-list-row__status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 44px;
}

.englife-ueben-list-row__arrow {
    color: #0E6633;
    font-size: 1.04rem;
}

.englife-ueben-list-stamp {
    position: relative;
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: #8C6D24;
    font-size: .66rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.02em;
    transform: rotate(-5deg);
    background: rgba(255,255,255,.72);
}

.englife-ueben-list-stamp::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .48;
}

.englife-ueben-list-stamp--low {
    color: #B45D3E;
}

.englife-ueben-list-stamp--mid {
    color: #9A731D;
}

.englife-ueben-list-stamp--high {
    color: #3F8272;
}

.englife-ueben-list-stamp--perfect {
    color: #0E6633;
}

.englife-ueben-list-stamp__crown {
    position: absolute;
    width: 19px;
    height: auto;
    top: -11px;
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    overflow: visible;
}

.englife-ueben-compact-results {
    display: grid;
    gap: 28px;
}

.englife-ueben-compact-area > h3, .englife-ueben-all-browser__area-head h3 {
    margin: 0 !important;
    font-size: 1.16rem !important;
    line-height: 1.25 !important;
}

.englife-ueben-compact-area {
    display: grid;
    gap: 18px;
}

.englife-ueben-compact-family {
    padding-top: 1px;
}

.englife-ueben-compact-family > h4 {
    margin: 0 0 4px !important;
    color: var(--el-text) !important;
    font-size: .97rem !important;
    font-weight: 780 !important;
}

.englife-ueben-all-browser {
    margin-top: 28px;
    padding: 26px 0 0;
    border-top: 1px solid var(--el-border);
}

.englife-ueben-all-browser__area {
    margin-top: 34px;
}

.englife-ueben-all-browser__area-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.englife-ueben-all-browser__area-head > span {
    color: var(--el-muted);
    font-size: .82rem;
}

.englife-area-hub.englife-ueben-library {
    /* The introductory paragraph was removed in the v2.8.49 PHP runtime.
       Do not reserve the old top gap ahead of the search form. */
    margin-top: 0;
}

.englife-area-hub__intro {
    margin: 0 0 18px;
    color: var(--el-muted);
}

.englife-area-hub__search {
    margin-bottom: 26px !important;
}

.englife-area-hub__topics {
    margin-top: 24px;
}

.englife-ueben-area-search-results {
    margin-top: 24px;
}

.englife-family-hub__groups {
    margin-top: 12px;
}

.englife-family-hub__groups .englife-ueben-list-series {
    margin: 0 0 22px;
}

@media (max-width:900px) {
    .englife-ueben-discovery__category-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

@media (max-width:600px) {
    .englife-ueben-discovery__category-link {
        grid-template-columns: minmax(0,1fr) auto 18px;
        min-height: 54px;
        gap: 8px;
    }

    .englife-ueben-discovery__category-count {
        font-size: .76rem;
    }

    .englife-ueben-family-disclosure > summary {
        grid-template-columns: minmax(0,1fr) auto 18px;
        gap: 7px;
        min-height: 54px;
        padding: 10px 2px;
    }

    .englife-ueben-family-disclosure__content {
        padding-left: 9px;
    }

    .englife-ueben-list-row {
        grid-template-columns: 22px minmax(0,1fr) 44px;
        gap: 7px;
        min-height: 56px;
    }

    .englife-ueben-list-row__body strong {
        font-size: .9rem;
    }

    .englife-ueben-list-row__meta {
        font-size: .72rem;
    }

    .englife-ueben-list-stamp {
        width: 39px;
        height: 39px;
        font-size: .61rem;
    }

    .englife-ueben-all-browser__area-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

.englife-ueben-family-columns, .englife-ueben-compact-family-columns, .englife-ueben-family-rows--columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 34px;
    align-items: start;
}

.englife-ueben-family-columns__column,
.englife-ueben-compact-family-columns__column,
.englife-ueben-family-rows__column {
    display: grid;
    min-width: 0;
    align-content: start;
}

.englife-ueben-family-columns__column > .englife-ueben-family-disclosure:first-child {
    border-top: 1px solid var(--el-border);
}

.englife-ueben-family-rows--columns {
    gap: 0 30px;
}

.englife-ueben-family-rows--columns .englife-ueben-family-rows__column {
    gap: 22px;
}

.englife-ueben-compact-family-columns {
    gap: 0 30px;
}

.englife-ueben-compact-family-columns__column {
    gap: 22px;
}

.englife-ueben-compact-area > h3 {
    margin-bottom: 12px !important;
}

.englife-area-hub .englife-ueben-search__main {
    align-items: start;
}

.englife-area-hub .englife-ueben-search__suggestions {
    position: static;
    margin-top: 4px;
    max-height: min(300px,42vh);
}

.englife-area-hub .englife-ueben-search__submit {
    align-self: start;
    margin-top: 25px;
}

.englife-area-hub__search {
    overflow: visible;
}

.englife-family-hub__groups .englife-ueben-family-rows--columns {
    margin-top: 2px;
}

.englife-ueben-series-family {
    min-width: 0;
}

.englife-ueben-series-library .englife-ueben-series-grid {
    gap: 10px;
}

.englife-ueben-series-library .englife-ueben-series-card {
    min-height: 136px;
    padding: 13px 14px;
}

.englife-ueben-series-library .englife-ueben-series-route {
    margin: 13px 0 11px;
}

.englife-ueben-series-library .englife-ueben-series-card__score {
    top: 8px;
    right: 8px;
    min-width: 46px;
    min-height: 46px;
    font-size: .72rem;
}

.englife-ueben-series-library .englife-ueben-series-card.is-complete .englife-ueben-series-card__head {
    padding-right: 52px;
}

@media (max-width:900px) {
    .englife-ueben-family-columns, .englife-ueben-compact-family-columns, .englife-ueben-family-rows--columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .englife-ueben-family-columns__column + .englife-ueben-family-columns__column,
    .englife-ueben-compact-family-columns__column + .englife-ueben-compact-family-columns__column,
    .englife-ueben-family-rows__column + .englife-ueben-family-rows__column {
        margin-top: 18px;
    }
}

@media (max-width:600px) {
    .englife-area-hub .englife-ueben-search__main {
        grid-template-columns: 1fr;
    }

    .englife-area-hub .englife-ueben-search__submit {
        width: 100%;
        margin-top: 0;
    }
}

.englife-ueben-search-row-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 30px;
    align-items: start;
}

@media (max-width:900px) {
    .englife-ueben-search-row-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.englife-ueben-library--landing > .englife-ueben-search {
    position: relative;
    z-index: 80;
}

.englife-ueben-library--landing .englife-ueben-search__suggestions {
    z-index: 120;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card {
    padding: 12px 12px 11px 15px;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card__badges,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card__badges {
    margin-bottom: 6px;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card h4,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card h4 {
    margin-bottom: 4px !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card__footer,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card__footer {
    padding-top: 9px;
}

.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-card {
    min-height: 138px;
    padding: 12px 13px;
}

.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-route {
    margin: 11px 0 9px;
}

.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-card__head h3 {
    margin-bottom: 3px !important;
}

.englife-ueben-section__tools, .englife-ueben-results-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.englife-ueben-expand-all {
    appearance: none;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid rgba(14,102,51,.26);
    border-radius: 999px;
    background: transparent;
    color: #0E6633;
    font: inherit;
    font-size: .77rem;
    line-height: 1.15;
    font-weight: 700;
    cursor: pointer;
}

.englife-ueben-expand-all:hover {
    background: rgba(14,102,51,.06);
}

.englife-ueben-expand-all:focus-visible {
    outline: 3px solid rgba(14,102,51,.20);
    outline-offset: 2px;
}

.englife-ueben-expand-all:disabled {
    opacity: .45;
    cursor: default;
}

.englife-family-hub__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

.englife-family-hub__head h2 {
    margin: 0 !important;
}

.englife-ueben-series-disclosure {
    border-top: 1px solid var(--el-border);
}

.englife-ueben-series-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 20px;
    gap: 9px;
    align-items: center;
    min-height: 50px;
    padding: 9px 2px;
    cursor: pointer;
    list-style: none;
}

.englife-ueben-series-disclosure > summary::-webkit-details-marker {
    display: none;
}

.englife-ueben-series-disclosure__name {
    font-size: .88rem;
    font-weight: 760;
    line-height: 1.25;
}

.englife-ueben-series-disclosure__count {
    color: var(--el-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.englife-ueben-series-disclosure__chevron {
    color: #0E6633;
    text-align: center;
    transition: transform .16s ease;
}

.englife-ueben-series-disclosure[open] > summary .englife-ueben-series-disclosure__chevron {
    transform: rotate(180deg);
}

.englife-ueben-series-disclosure[open] > summary .englife-ueben-series-disclosure__name {
    color: #0E6633;
}

.englife-ueben-series-disclosure__content {
    padding: 0 0 12px 10px;
    border-left: 2px solid rgba(14,102,51,.16);
}

.englife-ueben-series-areas {
    display: grid;
    gap: 0;
    margin-top: 8px;
}

.englife-ueben-series-area-disclosure {
    border-top: 1px solid var(--el-border);
}

.englife-ueben-series-area-disclosure:last-child {
    border-bottom: 1px solid var(--el-border);
}

.englife-ueben-series-area-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 22px;
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 11px 2px;
    cursor: pointer;
    list-style: none;
}

.englife-ueben-series-area-disclosure > summary::-webkit-details-marker {
    display: none;
}

.englife-ueben-series-area-disclosure__name {
    font-size: 1rem;
    font-weight: 780;
}

.englife-ueben-series-area-disclosure__count {
    color: var(--el-muted);
    font-size: .8rem;
    white-space: nowrap;
}

.englife-ueben-series-area-disclosure__chevron {
    color: #0E6633;
    text-align: center;
    transition: transform .16s ease;
}

.englife-ueben-series-area-disclosure[open] > summary .englife-ueben-series-area-disclosure__chevron {
    transform: rotate(180deg);
}

.englife-ueben-series-area-disclosure[open] > summary .englife-ueben-series-area-disclosure__name {
    color: #0E6633;
}

.englife-ueben-series-area-disclosure__content {
    padding: 4px 0 18px 12px;
    border-left: 2px solid rgba(14,102,51,.16);
}

.englife-ueben-series-area-disclosure__content .englife-ueben-series-family + .englife-ueben-series-family {
    margin-top: 22px;
}

.englife-ueben-series-library .englife-ueben-series-card {
    min-height: 122px;
    padding: 11px 12px;
}

.englife-ueben-series-library .englife-ueben-series-route {
    margin: 9px 0 8px;
}

.englife-result-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    margin-right: .68rem;
    padding: 0 .38rem;
    border: 1px solid var(--el-ex-border-strong);
    border-radius: 999px;
    background: #F3F4F6;
    color: var(--el-ex-muted);
    font-size: .78em;
    line-height: 1;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    vertical-align: .08em;
    box-sizing: border-box;
}

[data-englife-native-result-number="hidden"] {
    display: none !important;
}

@media (max-width:720px) {
    .englife-ueben-library--landing .englife-ueben-progress__stats {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        gap: 6px;
    }

    .englife-ueben-library--landing .englife-ueben-progress__stat {
        display: block !important;
        min-width: 0;
        padding: 9px 7px 8px 10px;
    }

    .englife-ueben-library--landing .englife-ueben-progress__stat dt {
        margin: 0 0 3px !important;
        font-size: .66rem;
        line-height: 1.15;
    }

    .englife-ueben-library--landing .englife-ueben-progress__stat dd {
        margin: 0 !important;
        font-size: 1.16rem;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card {
        padding: 10px 9px 9px 11px;
        border-radius: 11px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card h4,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card h4 {
        font-size: .84rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__badges,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__badges {
        margin-bottom: 5px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__footer,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__footer {
        padding-top: 3px;
        padding-right: 28px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__link,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__link {
        width: 100%;
        min-height: 38px !important;
        padding: 6px 5px !important;
        font-size: .72rem;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__task-icon,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__task-icon {
        right: 8px;
        bottom: 12px;
        width: 18px;
        height: 18px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__task-icon svg,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__task-icon svg {
        width: 18px;
        height: 18px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__stamp,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__stamp {
        width: 48px;
        height: 48px;
        top: 7px;
        right: 6px;
    }

    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-card__stamp-value,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-card__stamp-value {
        font-size: .72rem;
    }

    .englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-grid {
        grid-template-columns: 1fr !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-card {
        min-height: 124px;
        padding: 11px 12px;
    }

    .englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-route {
        margin: 9px 0 7px;
    }

    .englife-ueben-section__tools, .englife-ueben-results-tools {
        gap: 5px;
    }

    .englife-ueben-expand-all {
        min-height: 30px;
        padding: 4px 7px;
        font-size: .72rem;
    }
}

@media (max-width:420px) {
    .englife-ueben-library--landing .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
    .englife-ueben-library--landing .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

.englife-ueben-series-family-disclosure {
    border-top: 1px solid var(--el-border);
}

.englife-ueben-series-family-disclosure:last-child {
    border-bottom: 1px solid var(--el-border);
}

.englife-ueben-series-family-disclosure > summary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 22px;
    gap: 9px;
    align-items: center;
    min-height: 48px;
    padding: 9px 2px;
    cursor: pointer;
    list-style: none;
}

.englife-ueben-series-family-disclosure > summary::-webkit-details-marker {
    display: none;
}

.englife-ueben-series-family-disclosure__name {
    font-size: .94rem;
    font-weight: 760;
}

.englife-ueben-series-family-disclosure__count {
    color: var(--el-muted);
    font-size: .76rem;
    white-space: nowrap;
}

.englife-ueben-series-family-disclosure__chevron {
    color: #0E6633;
    text-align: center;
    transition: transform .16s ease;
}

.englife-ueben-series-family-disclosure[open] > summary .englife-ueben-series-family-disclosure__chevron {
    transform: rotate(180deg);
}

.englife-ueben-series-family-disclosure[open] > summary .englife-ueben-series-family-disclosure__name {
    color: #0E6633;
}

.englife-ueben-series-family-disclosure__content {
    padding: 2px 0 14px 10px;
    border-left: 2px solid rgba(14,102,51,.13);
}

.englife-ueben-series-area-disclosure__content .englife-ueben-series-family-disclosure + .englife-ueben-series-family-disclosure {
    margin-top: 0;
}

.englife-ueben-subpage-back {
    margin: 24px 0 2px;
    padding-top: 14px;
    border-top: 1px solid var(--el-border);
}

.englife-ueben-subpage-back a {
    color: #0E6633;
    font-size: .88rem;
    font-weight: 720;
    text-decoration: none;
}

.englife-ueben-subpage-back a:hover {
    text-decoration: underline;
}

.englife-ueben-subpage-back a:focus-visible {
    outline: 3px solid rgba(14,102,51,.24);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width:720px) {
    .englife-ueben-card__badges {
        display: none !important;
    }

    .englife-exercise-navigation__related .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .englife-exercise-navigation__related .englife-ueben-card {
        min-width: 0;
        padding: 10px 9px 9px 11px;
        border-radius: 11px;
    }

    .englife-exercise-navigation__related .englife-ueben-card h4 {
        font-size: .84rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        overflow-wrap: anywhere;
    }

    .englife-exercise-navigation__related .englife-ueben-card__footer {
        padding-top: 3px;
        padding-right: 28px;
    }

    .englife-exercise-navigation__related .englife-ueben-card__link {
        width: 100%;
        min-height: 38px !important;
        padding: 6px 5px !important;
        font-size: .72rem;
    }

    .englife-exercise-navigation__related .englife-ueben-card__task-icon {
        right: 8px;
        bottom: 12px;
        width: 18px;
        height: 18px;
    }

    .englife-exercise-navigation__related .englife-ueben-card__task-icon svg {
        width: 18px;
        height: 18px;
    }

    .englife-exercise-navigation__related .englife-ueben-card__stamp {
        width: 48px;
        height: 48px;
        top: 7px;
        right: 6px;
    }

    .englife-exercise-navigation__related .englife-ueben-card__stamp-value {
        font-size: .72rem;
    }
}

@media (max-width:420px) {
    .englife-exercise-navigation__related .englife-ueben-grid--recommendations {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

.englife-ueben-family-disclosure:not([open]) > .englife-ueben-family-disclosure__content,
.englife-ueben-series-disclosure:not([open]) > .englife-ueben-series-disclosure__content,
.englife-ueben-series-area-disclosure:not([open]) > .englife-ueben-series-area-disclosure__content,
.englife-ueben-series-family-disclosure:not([open]) > .englife-ueben-series-family-disclosure__content {
    display: none !important;
}

.englife-ueben-family-disclosure:not([open]),
.englife-ueben-series-disclosure:not([open]),
.englife-ueben-series-area-disclosure:not([open]),
.englife-ueben-series-family-disclosure:not([open]) {
    min-height: 0 !important;
    height: auto !important;
}

.englife-area-hub .englife-ueben-family-disclosure__content .englife-ueben-series-disclosure {
    margin: 0;
    border-top: 1px solid rgba(38,43,51,.10);
}

.englife-area-hub .englife-ueben-family-disclosure__content .englife-ueben-series-disclosure:first-child {
    border-top: 0;
}

.englife-area-hub .englife-ueben-family-disclosure__content .englife-ueben-series-disclosure > summary {
    min-height: 42px;
    padding: 7px 2px;
}

.englife-area-hub .englife-ueben-family-disclosure__content .englife-ueben-series-disclosure__name {
    font-size: .78rem;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.englife-exercise-navigation + .englife-ueben-subpage-back {
    margin-top: 22px;
}


/* =========================================================
   CURRENT STRUCTURAL / BROWSE LAYERS
   Former plugin-served frontend CSS, now asset-managed.
   ========================================================= */

/* =========================================================
   ENGLIFE /UEBEN — CANONICAL NOTEBOOK GRID (v2.8.53)
   Shared by Start, individual exercises, family/area/series hubs,
   the exercise catalogue and explanation browsing.
   The grid is one anchored top-right motif, not page wallpaper.
   All geometry, intensity and fades live here; no page variants.
   ========================================================= */

:is(.englife-ueben-grid-zone, .englife-ueben-library--landing) {
    --el-paper-grid-step: 32px;
    --el-paper-grid-line: rgba(38,43,51,.064);
    --el-paper-grid-fade: radial-gradient(
        ellipse 1080px 620px at 100% 220px,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.84) 30%,
        rgba(0,0,0,.50) 62%,
        transparent 100%
    );
    position: relative;
    isolation: isolate;
}

:is(.englife-ueben-grid-zone, .englife-ueben-library--landing)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: 100vw;
    height: min(100%, 820px);
    transform: translateX(-50%);
    pointer-events: none;
    background-color: transparent;
    background-image:
        linear-gradient(var(--el-paper-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--el-paper-grid-line) 1px, transparent 1px);
    background-size: var(--el-paper-grid-step) var(--el-paper-grid-step);
    background-position: 0 0;
    -webkit-mask-image: var(--el-paper-grid-fade);
    mask-image: var(--el-paper-grid-fade);
}

:is(.englife-ueben-grid-zone, .englife-ueben-library--landing) > * {
    position: relative;
    z-index: 1;
}

/* Explanation: core rule/help area only. FAQ and related exercises follow on
   the calm secondary background outside this wrapper. */
body.englife-explanation-page .englife-ueben-grid-zone--explanation {
    margin-top: 0;
    margin-bottom: 42px;
    padding-top: 24px;
    padding-bottom: 28px;
}

/* Family, area and series browsers are already made of framed cards/rows, so
   the grid remains a quiet paper accent behind the primary content. */
.englife-family-hub.englife-ueben-grid-zone,
.englife-area-hub.englife-ueben-grid-zone,
.englife-ueben-series-library.englife-ueben-grid-zone {
    padding-top: 18px;
    padding-bottom: 24px;
}

/* Full catalogue now uses the same quiet paper grid as the other browse
   surfaces. Its rows/cards already provide solid reading surfaces, so the
   grid remains only a subtle background accent. */
.englife-ueben-all-browser.englife-ueben-grid-zone {
    padding-top: 18px;
    padding-bottom: 24px;
    /* Older common/legacy CSS deliberately gave /alle a solid background.
       The structural grid stylesheet loads later, so explicitly clear that
       fill here and reveal the same paper-grid pseudo-element used elsewhere. */
    background: transparent !important;
}

/* Individual worksheet: active exercise only. Navigation / recommendations
   begin below, outside the paper-grid zone. */
body.englife-generated-exercise-page .englife-ueben-grid-zone--exercise {
    padding-top: 10px;
    padding-bottom: 26px;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    :is(.englife-ueben-grid-zone, .englife-ueben-library--landing) {
        --el-paper-grid-step: 28px;
        --el-paper-grid-fade: radial-gradient(
            ellipse 650px 470px at 100% 180px,
            rgba(0,0,0,.80) 0%,
            rgba(0,0,0,.58) 44%,
            transparent 100%
        );
    }

    body.englife-explanation-page .englife-ueben-grid-zone--explanation {
        margin-bottom: 34px;
        padding-top: 18px;
        padding-bottom: 22px;
    }

    .englife-family-hub.englife-ueben-grid-zone,
    .englife-area-hub.englife-ueben-grid-zone,
    .englife-ueben-series-library.englife-ueben-grid-zone,
    .englife-ueben-all-browser.englife-ueben-grid-zone {
        padding-top: 14px;
        padding-bottom: 20px;
    }

    body.englife-generated-exercise-page .englife-ueben-grid-zone--exercise {
        padding-top: 8px;
        padding-bottom: 20px;
    }
}

/* EngLife Üben Frontend v2.8.7 — compact learning-path navigation + explanation recommendations. */

/* ---------------------------------------------------------
   Exercise page: compact series / explanation strip
   --------------------------------------------------------- */
.englife-generated-exercise-page .englife-exercise-path{
    --el-path-green:#0E6633;
    --el-path-green-soft:#F3F4F6;
    --el-path-text:#262B33;
    --el-path-muted:#5B6470;
    --el-path-border:#D4D8DF;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px 16px;
    margin:-1px 0 14px;
    padding:9px 10px 9px 12px;
    border:1px solid var(--el-path-border);
    border-radius:12px;
    background:rgba(255,255,255,.78);
    box-shadow:0 1px 4px rgba(38,43,51,.025);
}
.englife-generated-exercise-page .englife-exercise-path__summary{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:7px;
    overflow:hidden;
}
.englife-generated-exercise-page .englife-exercise-path__eyebrow{
    flex:0 0 auto;
    color:var(--el-path-muted);
    font-size:.7rem;
    line-height:1.2;
    font-weight:750;
    letter-spacing:.045em;
    text-transform:uppercase;
}
.englife-generated-exercise-page .englife-exercise-path__series-wrap{
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:7px;
}
.englife-generated-exercise-page .englife-exercise-path__series{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--el-path-text)!important;
    font-size:.86rem;
    line-height:1.3;
    font-weight:720;
    text-decoration:none!important;
}
.englife-generated-exercise-page a.englife-exercise-path__series:hover{
    color:var(--el-path-green)!important;
    text-decoration:underline!important;
    text-underline-offset:3px;
}
.englife-generated-exercise-page .englife-exercise-path__position{
    flex:0 0 auto;
    color:var(--el-path-muted);
    font-size:.74rem;
    line-height:1.2;
    white-space:nowrap;
}
.englife-generated-exercise-page .englife-exercise-path__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    min-width:0;
}
.englife-generated-exercise-page .englife-exercise-path__action{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:6px 9px;
    border:1px solid #D4D8DF;
    border-radius:8px;
    background:#fff;
    color:#5B6470!important;
    font-size:.78rem;
    line-height:1.15;
    font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;
}
.englife-generated-exercise-page .englife-exercise-path__action--explanation{
    border-color:#D4D8DF;
    background:var(--el-path-green-soft);
    color:var(--el-path-green)!important;
}
.englife-generated-exercise-page .englife-exercise-path__action--explanation svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}
@media (hover:hover) and (pointer:fine){
    .englife-generated-exercise-page .englife-exercise-path__action:hover{
        border-color:#A4ADBA;
        background:#F3F4F6;
    }
    .englife-generated-exercise-page .englife-exercise-path__action--explanation:hover{
        border-color:#0E6633;
        background:rgba(14,102,51,.07);
    }
}
.englife-generated-exercise-page .englife-exercise-path__action:focus-visible,
.englife-generated-exercise-page .englife-exercise-path__series:focus-visible{
    outline:3px solid rgba(14,102,51,.20);
    outline-offset:2px;
}
@media (max-width:640px){
    .englife-generated-exercise-page .englife-exercise-path{
        grid-template-columns:1fr;
        gap:7px;
        margin-bottom:12px;
        padding:9px 10px 10px;
    }
    .englife-generated-exercise-page .englife-exercise-path__summary{
        gap:6px;
    }
    .englife-generated-exercise-page .englife-exercise-path__series{
        font-size:.82rem;
    }
    .englife-generated-exercise-page .englife-exercise-path__actions{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,auto));
        justify-content:start;
        gap:6px;
    }
    .englife-generated-exercise-page .englife-exercise-path__action{
        min-height:33px;
        padding:6px 8px;
        font-size:.76rem;
    }
}
@media (max-width:420px){
    .englife-generated-exercise-page .englife-exercise-path__eyebrow{
        display:none;
    }
    .englife-generated-exercise-page .englife-exercise-path__actions{
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
    }
    .englife-generated-exercise-page .englife-exercise-path__action{
        min-width:0;
    }
}

@media (min-width: 901px) {
    .englife-ueben-discovery__utilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   ENGLIFE QUIZ MAKER — LEARNER TYPOGRAPHY BASELINE
   v2.7.6

   Scope: generated /ueben exercise pages only.
   Purpose: improve readability and vertical rhythm without changing
   Quiz Maker logic, pagination, scoring, question types or result logic.

   Teacher Mode intentionally is NOT implemented here. The variables below
   are the stable presentation hooks a later lazy-loaded Teacher Mode can
   override after the user explicitly starts it.
   ========================================================= */

body.englife-generated-exercise-page {
    --englife-quiz-title-size: 19px;
    --englife-quiz-instruction-size: 16px;
    --englife-question-font-size: 20px;
    --englife-question-line-height: 1.38;
    --englife-answer-font-size: 18px;
    --englife-answer-line-height: 1.45;
    --englife-question-gap: 6px;
    --englife-choice-question-gap: 12px;
    --englife-instruction-question-gap: 18px;
    --englife-question-answer-gap: 8px;
    --englife-answer-gap: 8px;
    --englife-control-min-height: 42px;
}

/* ---------------------------------------------------------
   Quiz-internal hierarchy
   The WordPress page title remains the real page heading. Quiz Maker's
   internal H3 is deliberately modest and should not compete with it.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-exercise-quiz .ays-questions-container :is(h2,h3,h4) {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-size: var(--englife-quiz-title-size) !important;
    line-height: 1.3 !important;
    font-weight: 650 !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz .ays-questions-container
:is(.ays_quiz_question,.ays-question-content,.ays_question,.ays-question,.ays-quiz-question,.ays-question-wrap)
> p:not(:has(> .englife-question-number)) {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: var(--englife-quiz-instruction-size) !important;
    line-height: 1.5 !important;
}

/* ---------------------------------------------------------
   Question rhythm
   Quiz Maker historically left much more vertical space around short
   worksheet questions than the learning content required. Keep readable
   line spacing, but control inter-question spacing independently.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-exercise-quiz .step[data-question-id] {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: var(--englife-question-gap) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz .step[data-question-id] > .ays-abs-fs,
body.englife-generated-exercise-page .englife-exercise-quiz .step[data-question-id] .ays-abs-fs {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The visible distance between worksheet rows comes from both the step wrapper
   and Quiz Maker's inner question wrapper. Normalize the inner wrapper too, so
   --englife-question-gap is the single source of truth for row spacing. */
body.englife-generated-exercise-page .englife-exercise-quiz .step[data-question-id] :is(.ays_quiz_question,.ays-question-content,.ays_question,.ays-question,.ays-quiz-question,.ays-question-wrap) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz .step[data-question-id]:last-of-type {
    margin-bottom: 4px !important;
}

/* Choice questions need a little more separation than compact inline-gap
   worksheets because their visible radio/checkbox answer blocks are part of
   the question. Keep the compact worksheet rhythm for dropdown/text rows, but
   restore the previous breathing room for explicit choice controls. */
body.englife-generated-exercise-page .englife-exercise-quiz
.step[data-question-id]:has(.ays-quiz-answers input[type="radio"], .ays-quiz-answers input[type="checkbox"]) {
    margin-bottom: var(--englife-choice-question-gap) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
:is(.ays_quiz_question,.ays-question-content,.ays_question,.ays-question,.ays-quiz-question,.ays-question-wrap)
p:has(> .englife-question-number) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: var(--englife-question-font-size) !important;
    line-height: var(--englife-question-line-height) !important;
}

/* In EngLife authoring, a block heading/instruction lives in the first Quiz
   Maker question alongside the first numbered task. Give that first task a
   deliberate hand-off gap without changing spacing between later questions. */
body.englife-generated-exercise-page .englife-exercise-quiz
.step[data-question-id]:has(:is(h2,h3,h4))
:is(.ays_quiz_question,.ays-question-content,.ays_question,.ays-question,.ays-quiz-question,.ays-question-wrap)
p:has(> .englife-question-number) {
    margin-top: var(--englife-instruction-question-gap) !important;
}

/* Shared stimulus text remains calmer than the actual numbered task, while
   still being comfortably readable. Existing media/layout rules stay intact. */
body.englife-generated-exercise-page .englife-exercise-quiz .englife-shared-stimulus p,
body.englife-generated-exercise-page .englife-exercise-quiz .englife-shared-stimulus li {
    font-size: var(--englife-quiz-instruction-size) !important;
    line-height: 1.55 !important;
}

/* ---------------------------------------------------------
   Semantic shared stimulus blocks
   Authoring-v1 emits these classes for reusable learner aids. Keep them
   visually distinct from ordinary instructions without turning them into
   competing cards. This structural styling is runtime-owned so an older
   immutable asset release cannot make semantic stimuli look like plain text.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-word-bank {
    box-sizing: border-box !important;
    width: 100%;
    margin: 8px 0 10px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--el-ex-border-strong, #B9C0CB) !important;
    border-radius: 10px !important;
    background: var(--el-ex-soft, #F3F4F6) !important;
    color: var(--el-ex-text, #262B33) !important;
    font-size: var(--englife-quiz-instruction-size) !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
}

body.englife-generated-exercise-page .englife-word-bank .englife-label {
    font-weight: 700 !important;
    color: var(--el-ex-text, #262B33) !important;
}

body.englife-generated-exercise-page .englife-example {
    box-sizing: border-box !important;
    margin: 6px 0 12px !important;
    padding: 6px 10px !important;
    border-left: 3px solid var(--el-ex-green, #0E6633) !important;
    color: var(--el-ex-muted, #5B6470) !important;
    font-size: var(--englife-quiz-instruction-size) !important;
    line-height: 1.5 !important;
}

body.englife-generated-exercise-page .englife-example .englife-example-label {
    font-weight: 700 !important;
    color: var(--el-ex-text, #262B33) !important;
}

/* ---------------------------------------------------------
   Number marker
   Keep it useful for classroom reference without making it a visual headline.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-exercise-quiz .englife-question-number {
    min-width: 1.7rem;
    height: 1.7rem;
    margin-right: .95rem;
    font-size: .78rem;
    line-height: 1;
}

/* ---------------------------------------------------------
   Answers and controls
   Do not redesign Quiz Maker's answer layouts (e.g. two-column multiple
   choice). Only improve readable type and usable control height.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-exercise-quiz .ays-quiz-answers {
    margin-top: var(--englife-question-answer-gap) !important;
    margin-bottom: 0 !important;
    row-gap: var(--englife-answer-gap) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz .ays-field > label,
body.englife-generated-exercise-page .englife-exercise-quiz .ays-field label.answered,
body.englife-generated-exercise-page .englife-exercise-quiz .ays-field label.answered.correct,
body.englife-generated-exercise-page .englife-exercise-quiz .ays-field label.answered.wrong {
    box-sizing: border-box !important;
    font-size: var(--englife-answer-font-size) !important;
    line-height: var(--englife-answer-line-height) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
.ays-field:has(input[type="radio"],input[type="checkbox"]) {
    min-height: var(--englife-control-min-height) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
.ays-field:has(input[type="radio"],input[type="checkbox"]) > label {
    min-height: var(--englife-control-min-height) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
:is(input[type="text"],input[type="number"],input[type="email"],textarea,select) {
    font-size: var(--englife-answer-font-size) !important;
    line-height: var(--englife-answer-line-height) !important;
}

/* Full-size select controls should be comfortably clickable. Inline gap
   dropdowns are intentionally excluded because they must remain part of a
   sentence instead of turning the sentence into a tall form row. */
body.englife-generated-exercise-page .englife-exercise-quiz
.ays-field.ays-select-field :is(.select2-selection--single,.select2-selection--multiple) {
    min-height: var(--englife-control-min-height) !important;
    font-size: var(--englife-answer-font-size) !important;
    line-height: var(--englife-answer-line-height) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
.select2-container.englife-gap-select2 .select2-selection--single {
    height: 1.62em !important;
    min-height: 1.62em !important;
    font: inherit !important;
}

/* The inline-gap width is calculated before/around Select2 setup and can be
   slightly too tight once the larger learner typography is applied. Preserve
   the content-aware calculated width, but add a small typography allowance so
   selected answers are not visibly clipped. Long answers may grow further,
   while the field still stays inline and viewport-safe. */
body.englife-generated-exercise-page .englife-exercise-quiz
select.englife-gap-select + .select2-container.englife-gap-select2 {
    min-width: calc(var(--englife-gap-width, 4.5em) + 2.5em) !important;
    max-width: min(65vw, 16rem) !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
.select2-container.englife-gap-select2 .select2-selection__rendered {
    white-space: nowrap !important;
}

body.englife-generated-exercise-page .select2-results__option {
    font-size: var(--englife-answer-font-size) !important;
    line-height: var(--englife-answer-line-height) !important;
}


/* ---------------------------------------------------------
   Quiz Maker native per-question navigation rows

   In EngLife's continuous worksheet view Quiz Maker can leave an
   .ays_buttons_div inside each question step even when its controls are not
   part of the learner-facing row. The wrapper still reserves roughly one
   button-row of height, which created the large blank strip visible between
   otherwise short sentence questions. Keep the genuine final Finish wrapper
   in normal flow, but collapse the intermediate native wrappers without
   removing their descendants from the DOM.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-exercise-quiz
.step[data-question-id] .ays_buttons_div:not(:has(.ays_finish[name="ays_finish_quiz"])) {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
}

body.englife-generated-exercise-page .englife-exercise-quiz
.step[data-question-id] .ays_buttons_div:not(:has(.ays_finish[name="ays_finish_quiz"]))::before,
body.englife-generated-exercise-page .englife-exercise-quiz
.step[data-question-id] .ays_buttons_div:not(:has(.ays_finish[name="ays_finish_quiz"]))::after {
    content: none !important;
    display: none !important;
}

/* ---------------------------------------------------------
   Completion actions
   Ergebnis + Lösungen are one action group, not opposite ends of the quiz.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-solution-nav-host {
    justify-content: center !important;
    gap: 10px !important;
}

/* ---------------------------------------------------------
   Mobile
   Preserve readable controls; only trim task type and spacing slightly.
   --------------------------------------------------------- */
@media (max-width: 700px) {
    body.englife-generated-exercise-page {
        --englife-quiz-title-size: 18px;
        --englife-quiz-instruction-size: 16px;
        --englife-question-font-size: 18px;
        --englife-question-line-height: 1.4;
        --englife-answer-font-size: 17px;
        --englife-question-gap: 5px;
        --englife-choice-question-gap: 10px;
        --englife-instruction-question-gap: 16px;
        --englife-question-answer-gap: 8px;
        --englife-answer-gap: 8px;
        --englife-control-min-height: 44px;
    }

    body.englife-generated-exercise-page .englife-exercise-quiz .englife-question-number {
        margin-right: .8rem;
    }
}

/* ---------------------------------------------------------
   Teacher Mode entry point
   Only the launch control belongs to the normal learner payload. The actual
   Teacher Mode shell/styles/scripts are lazy-loaded after explicit activation.
   --------------------------------------------------------- */
body.englife-generated-exercise-page .englife-teacher-launch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 8px 0 12px;
}

body.englife-generated-exercise-page .englife-teacher-launch__button {
    appearance: none;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #0E6633;
    border-radius: 9px;
    background: #FFFFFF;
    color: #0E6633;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

body.englife-generated-exercise-page .englife-teacher-launch__button:hover {
    background: #F3F4F6;
}

body.englife-generated-exercise-page .englife-teacher-launch__button:focus-visible {
    outline: 3px solid rgba(14,102,51,.24);
    outline-offset: 2px;
}

body.englife-generated-exercise-page .englife-teacher-launch__button[aria-busy="true"] {
    opacity: .7;
    cursor: wait;
}

body.englife-generated-exercise-page .englife-teacher-launch__hint {
    color: #5B6470;
    font-size: 12px;
}

@media (max-width: 700px) {
    body.englife-generated-exercise-page .englife-teacher-launch {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------
   Shared solution presentation (v2.8.11)
   Learner and Teacher Mode use the same renderer. Gaps/dropdowns/short answers
   temporarily replace the editable control in place; multiple-choice/checkbox
   answers use the same green correct-answer outline in both views. Original
   controls remain in the DOM so learner state is never changed by reveal.
   --------------------------------------------------------- */

body.englife-generated-exercise-page .englife-exercise-quiz .ays-field.englife-solution-choice-correct {
    outline: 3px solid rgba(14,102,51,.38) !important;
    outline-offset: -2px !important;
    border-color: rgba(14,102,51,.34) !important;
    background: #F3F4F6 !important;
    box-shadow: none !important;
}
body.englife-generated-exercise-page .englife-exercise-quiz .ays-field.englife-solution-choice-correct > label {
    background: transparent !important;
}
body.englife-generated-exercise-page .englife-exercise-quiz .englife-solution-control-hidden {
    display: none !important;
}
/* The learner gap Select2 skin historically forces display:inline-block !important.
   Match that exact structural selector while solutions are visible so the
   solution state, not the skin, owns visibility. */
body.englife-generated-exercise-page .englife-exercise-quiz
select.englife-gap-select + .select2-container.englife-gap-select2.englife-solution-control-hidden {
    display: none !important;
}
body.englife-generated-exercise-page .englife-exercise-quiz .ays-field.englife-solution-replacement-host {
    display: inline-flex !important;
    align-items: baseline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.englife-generated-exercise-page .englife-exercise-quiz .englife-solution-replacement {
    display: inline !important;
    box-sizing: border-box !important;
    margin: 0 .08em !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0E6633 !important;
    font-family: inherit !important;
    font-size: var(--englife-question-font-size) !important;
    font-weight: 700 !important;
    line-height: var(--englife-question-line-height) !important;
    vertical-align: baseline !important;
    white-space: normal !important;
}

/* =========================================================
   v2.8.16 — Editorial workbook visual pass
   Purpose: reduce generic dashboard/card-system styling and strengthen the
   EngLife paper/workbook language without changing frontend behavior.
   ========================================================= */

/* ---------- Core surface language ---------- */
.englife-ueben-library {
    --el-editorial-rule: rgba(38,43,51,.18);
    --el-editorial-rule-soft: rgba(38,43,51,.10);
    --el-editorial-ink: #262B33;
    --el-editorial-paper: #F3F4F6;
}

/* Section titles read like publication headings instead of dashboard eyebrows. */
.englife-ueben-library .englife-ueben-section__head,
.englife-ueben-library .englife-ueben-results-head {
    align-items: baseline;
    margin-bottom: 10px;
}

.englife-ueben-library .englife-ueben-section__head h2,
.englife-ueben-library .englife-ueben-results-head h2 {
    display: block;
    color: var(--el-editorial-ink) !important;
    font-size: 1.16rem !important;
    line-height: 1.3 !important;
    font-weight: 760 !important;
    letter-spacing: -.008em !important;
    text-transform: none !important;
}

.englife-ueben-library .englife-ueben-section__head h2::before,
.englife-ueben-library .englife-ueben-results-head h2::before,
.englife-ueben-discovery__head h2::before {
    content: none !important;
    display: none !important;
}

.englife-ueben-library .englife-ueben-section__head h2::after,
.englife-ueben-library .englife-ueben-results-head h2::after,
.englife-ueben-discovery__head h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-top: 6px;
    background: rgba(14,102,51,.72);
}

.englife-ueben-library .englife-ueben-section__all-link {
    min-height: 0;
    padding: 2px 0;
    border-radius: 0;
    background: transparent !important;
    font-size: .8rem;
}

.englife-ueben-library .englife-ueben-section__all-link:hover {
    background: transparent !important;
    text-decoration: underline !important;
}

/* ---------- Search: part of the page, not a floating feature card ---------- */
.englife-ueben-library .englife-ueben-search {
    margin: 0 0 26px;
    padding: 4px 0 18px;
    border: 0;
    border-bottom: 1px solid var(--el-editorial-rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.englife-ueben-library .englife-ueben-search::before {
    content: none;
    display: none;
}

.englife-ueben-library .englife-ueben-search__main {
    gap: 10px;
}

.englife-ueben-library .englife-ueben-search__field-label {
    margin-bottom: 3px;
    color: var(--el-editorial-ink);
    font-size: 1.26rem;
    line-height: 1.28;
    font-weight: 760;
    letter-spacing: -.01em;
}

.englife-ueben-library .englife-ueben-search input,
.englife-ueben-library .englife-ueben-search select {
    border-color: #B9C0CB;
    border-radius: 6px;
    background: rgba(255,255,255,.76);
    box-shadow: none;
}

.englife-ueben-library .englife-ueben-search input {
    min-height: 48px;
}

.englife-ueben-library .englife-ueben-search__submit,
.englife-ueben-library .englife-ueben-filter-actions button {
    border-radius: 5px !important;
    box-shadow: none !important;
}

.englife-ueben-library .englife-ueben-filter-details {
    margin-top: 9px;
    border-top: 0;
}

.englife-ueben-library .englife-ueben-filter-details > summary {
    justify-content: flex-start;
    min-height: 34px;
    gap: 9px;
    padding: 6px 1px 0;
    color: #5B6470;
    font-weight: 620;
}

.englife-ueben-library .englife-ueben-filter-details > summary::after {
    margin-right: 0;
    order: -1;
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    border-color: #0E6633;
}

/* Autocomplete genuinely floats over the page, so elevation remains meaningful. */
.englife-ueben-library .englife-ueben-search__suggestions {
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(38,43,51,.11);
}

.englife-ueben-library .englife-ueben-search__suggestion:first-child {
    border-radius: 5px 5px 0 0;
}

.englife-ueben-library .englife-ueben-search__suggestion:last-child {
    border-radius: 0 0 5px 5px;
}

.englife-ueben-library .englife-ueben-search__suggestion:only-child {
    border-radius: 5px;
}

/* Active filter chips remain pills because they are removable filter states. */
.englife-ueben-library .englife-ueben-active-filters {
    margin-top: -8px;
}

/* ---------- Progress: ledger rather than dashboard cards ---------- */
.englife-ueben-library .englife-ueben-progress__stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0;
    margin-top: 2px;
    border-top: 1px solid var(--el-editorial-rule-soft);
    border-bottom: 1px solid var(--el-editorial-rule-soft);
}

.englife-ueben-library .englife-ueben-progress__stat {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 13px 16px;
    overflow: visible;
    border: 0;
    border-right: 1px solid var(--el-editorial-rule-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.englife-ueben-library .englife-ueben-progress__stat:first-child {
    padding-left: 0;
}

.englife-ueben-library .englife-ueben-progress__stat:last-child {
    padding-right: 0;
    border-right: 0;
}

.englife-ueben-library .englife-ueben-progress__stat::before {
    content: none !important;
    display: none !important;
}

.englife-ueben-library .englife-ueben-progress__stat dt {
    margin: 0;
    color: #5B6470;
    font-size: .78rem;
    font-weight: 620;
}

.englife-ueben-library .englife-ueben-progress__stat dd {
    margin: 0;
    color: var(--el-editorial-ink);
    font-size: 1.36rem;
    font-weight: 760;
}

.englife-ueben-library .englife-ueben-progress__stat--action dt a {
    color: #0E6633 !important;
}

/* ---------- Metadata: textual, not pill soup ---------- */
.englife-ueben-library .englife-ueben-card__meta,
.englife-ueben-library .englife-ueben-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0 0 6px;
    overflow: visible;
}

.englife-ueben-library .englife-ueben-card__meta-item,
.englife-ueben-library .englife-ueben-card__badge {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #5B6470;
    font-size: .74rem;
    line-height: 1.35;
    font-weight: 580;
    overflow: visible;
    text-overflow: clip;
}

.englife-ueben-library .englife-ueben-card__meta-item:not(:last-child)::after,
.englife-ueben-library .englife-ueben-card__badge:not(:last-child)::after {
    content: "·";
    display: inline-block;
    margin: 0 .42em;
    color: #A4ADBA;
}

.englife-ueben-library .englife-ueben-card__badge--area {
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card__badge--admin {
    padding: 2px 5px;
    border: 1px solid #D4D8DF;
    border-radius: 999px;
    background: #F3F4F6;
    color: #5B6470;
}

.englife-ueben-library .englife-ueben-card__badge--admin::after {
    content: none !important;
}

/* ---------- Exercise recommendations: one feature, then editorial rows ---------- */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.englife-ueben-library .englife-ueben-card {
    box-shadow: none;
}

.englife-ueben-library .englife-ueben-card::before {
    content: none !important;
    display: none !important;
}

.englife-ueben-library .englife-ueben-card:hover {
    border-color: #B9C0CB;
    box-shadow: none;
    transform: none;
}

.englife-ueben-library .englife-ueben-card--featured,
.englife-ueben-library .englife-ueben-card--compact {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    column-gap: 18px;
    overflow: visible;
    box-shadow: none;
}

.englife-ueben-library .englife-ueben-card--featured {
    grid-template-areas:
        "meta stamp action"
        "title stamp action";
    padding: 17px 16px;
    border: 1px solid var(--el-editorial-rule);
    border-radius: 5px;
    background: rgba(255,255,255,.58);
}

.englife-ueben-library .englife-ueben-card--compact {
    grid-template-areas:
        "title stamp action"
        "meta stamp action";
    min-height: 62px;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid var(--el-editorial-rule-soft);
    border-radius: 0;
    background: transparent;
}

.englife-ueben-library .englife-ueben-card--compact:first-of-type {
    border-top: 1px solid var(--el-editorial-rule-soft);
}

.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__meta,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__meta,
.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__badges,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__badges {
    grid-area: meta;
    margin: 0;
}

.englife-ueben-library .englife-ueben-card--featured h4,
.englife-ueben-library .englife-ueben-card--compact h4 {
    grid-area: title;
    margin: 2px 0 0 !important;
}

.englife-ueben-library .englife-ueben-card--featured h4 {
    font-size: 1.06rem !important;
}

.englife-ueben-library .englife-ueben-card--compact h4 {
    font-size: .94rem !important;
}

.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__footer,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__footer {
    grid-area: action;
    margin: 0;
    padding: 0;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link {
    min-height: 0 !important;
    padding: 5px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0E6633 !important;
    box-shadow: none !important;
    font-size: .78rem;
    white-space: nowrap;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link::after {
    content: none;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link:hover {
    background: transparent !important;
    color: #0A542A !important;
    text-decoration: underline !important;
}

.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__link {
    border-radius: 5px !important;
}

.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__stamp,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp {
    position: relative;
    inset: auto;
    grid-area: stamp;
    transform: rotate(-6deg);
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp {
    width: 46px;
    height: 46px;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp--perfect {
    width: 48px;
    height: 48px;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp-value {
    font-size: .68rem;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp-crown {
    width: 18px;
    height: 11px;
}

.englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__task-icon,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__task-icon {
    display: none;
}

/* ---------- Series remain distinct objects, but no SaaS lift/elevation ---------- */
.englife-ueben-library .englife-ueben-series-card {
    border-radius: 5px;
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.englife-ueben-library .englife-ueben-series-card:hover {
    border-color: #B9C0CB;
    background: rgba(255,255,255,.66);
    box-shadow: none;
    transform: none;
}

/* ---------- Discovery utilities become publication/navigation rows ---------- */
.englife-ueben-discovery__head {
    align-items: baseline;
    margin-bottom: 12px;
}

.englife-ueben-discovery__head h2 {
    display: block;
    font-size: 1.24rem !important;
    letter-spacing: -.008em;
}

.englife-ueben-discovery__utilities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 20px;
    border-top: 1px solid var(--el-editorial-rule);
}

.englife-ueben-discovery__utilities > a {
    grid-template-columns: minmax(0,1fr) auto;
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid var(--el-editorial-rule);
    border-radius: 0;
    background: transparent;
}

.englife-ueben-discovery__utilities > a:hover {
    border-color: var(--el-editorial-rule);
    background: transparent;
}

.englife-ueben-discovery__utilities > a:hover strong {
    color: #0E6633;
    text-decoration: underline;
}

/* ---------- Pagination and secondary controls ---------- */
.englife-ueben-library .englife-ueben-pagination > a,
.englife-ueben-library .englife-ueben-pagination > span,
.englife-ueben-library .englife-ueben-pagination a,
.englife-ueben-library .englife-ueben-pagination span {
    border-radius: 4px;
    box-shadow: none;
}

.englife-ueben-expand-all {
    border-radius: 4px;
}

/* ---------- Exercise page: workbook metadata and restrained worksheet shell ---------- */
body.englife-generated-exercise-page .englife-exercise-meta-pills {
    gap: 0;
    margin-bottom: 13px;
}

body.englife-generated-exercise-page .englife-exercise-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #5B6470;
    font-size: .78rem;
    font-weight: 560;
}

body.englife-generated-exercise-page .englife-exercise-workspace {
    padding: 15px;
    border-radius: 7px;
    background: var(--el-exercise-surface);
}

body.englife-generated-exercise-page .englife-exercise-quiz img {
    border-radius: 6px;
}

body.englife-generated-exercise-page .englife-exercise-quiz .ays-field:not(.correct_div):not(.wrong_div),
body.englife-generated-exercise-page .englife-exercise-quiz :is(.ays-field.correct_div,.ays-field.wrong_div,.correct_div,.wrong_div) {
    border-radius: 7px !important;
}

body.englife-generated-exercise-page .englife-word-bank {
    border-radius: 5px !important;
    background: rgba(243,244,246,.84) !important;
}

body.englife-generated-exercise-page .englife-teacher-launch__button,
body.englife-generated-exercise-page .englife-exercise-solution-toggle {
    border-radius: 5px;
}

/* Top/bottom exercise navigation is a reading/navigation block, not another card. */
body.englife-generated-exercise-page .englife-exercise-navigation,
.englife-exercise-navigation {
    padding: 13px 0;
    border: 0;
    border-top: 1px solid #D4D8DF;
    border-bottom: 1px solid #D4D8DF;
    border-radius: 0;
    background: transparent;
}

body.englife-generated-exercise-page .englife-exercise-navigation__eyebrow,
.englife-exercise-navigation__eyebrow {
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

body.englife-generated-exercise-page .englife-exercise-navigation__next-link,
.englife-exercise-navigation__next-link {
    padding: 9px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.englife-generated-exercise-page .englife-exercise-navigation__next-link:hover,
.englife-exercise-navigation__next-link:hover {
    background: transparent;
}

body.englife-generated-exercise-page .englife-exercise-navigation__next-link:hover strong,
.englife-exercise-navigation__next-link:hover strong {
    color: #0E6633;
    text-decoration: underline;
}

/* ---------- Responsive editorial rhythm ---------- */
@media (max-width: 720px) {
    .englife-ueben-library .englife-ueben-search {
        padding: 2px 0 16px;
        border-radius: 0;
    }

    .englife-ueben-library .englife-ueben-search__field-label {
        font-size: 1.12rem;
    }

    .englife-ueben-library .englife-ueben-progress__stats {
        grid-template-columns: 1fr;
    }

    .englife-ueben-library .englife-ueben-progress__stat,
    .englife-ueben-library .englife-ueben-progress__stat:first-child,
    .englife-ueben-library .englife-ueben-progress__stat:last-child {
        padding: 10px 2px;
        border-right: 0;
        border-bottom: 1px solid var(--el-editorial-rule-soft);
    }

    .englife-ueben-library .englife-ueben-progress__stat:last-child {
        border-bottom: 0;
    }

    .englife-ueben-library .englife-ueben-card--featured,
    .englife-ueben-library .englife-ueben-card--compact {
        grid-template-columns: minmax(0,1fr) auto;
        grid-template-areas:
            "title stamp"
            "meta stamp"
            "action action";
        row-gap: 5px;
        column-gap: 10px;
    }

    .englife-ueben-library .englife-ueben-card--featured {
        padding: 14px 12px;
    }

    .englife-ueben-library .englife-ueben-card--featured .englife-ueben-card__footer,
    .englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__footer {
        justify-content: flex-start;
        margin-top: 2px;
    }

    .englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link {
        width: auto !important;
    }

    body.englife-generated-exercise-page .englife-exercise-workspace {
        padding: 12px;
        border-radius: 5px;
    }
}

/* =========================================================
   v2.8.17 — Workbook system refinement
   - keeps score/completion stamps unchanged
   - separates search with a paper band instead of a card
   - compacts progress into one clickable learning-pass element
   - makes recommendations a dense 2x2 editorial index
   - restores discovery utilities to one horizontal tool rail
   - introduces restrained pencil/highlighter cues
   ========================================================= */

.englife-ueben-library {
    --el-pencil: rgba(38,43,51,.34);
    --el-pencil-soft: rgba(38,43,51,.18);
    --el-marker-yellow: rgba(255,211,87,.28);
    --el-marker-blue: rgba(38,43,51,.14);
    --el-marker-green: rgba(14,102,51,.15);
    --el-marker-purple: rgba(38,43,51,.14);
    --el-marker-sand: rgba(255,211,87,.25);
    --el-marker-terracotta: rgba(38,43,51,.14);
}

/* Slightly imperfect section rules read more like marks on paper. */
.englife-ueben-library .englife-ueben-section__head h2::after,
.englife-ueben-library .englife-ueben-results-head h2::after,
.englife-ueben-discovery__head h2::after {
    height: 3px;
    border-radius: 60% 45% 70% 35%;
    background: linear-gradient(90deg, rgba(14,102,51,.72), rgba(14,102,51,.44));
    transform: rotate(-.55deg);
    transform-origin: left center;
}

/* ---------- Search: a distinct paper band, without a container ---------- */
.englife-ueben-library .englife-ueben-search {
    position: relative;
    isolation: isolate;
    margin: 8px 0 28px;
    padding: 18px 0 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Area pages have no introductory search band; the search is their first content. */
.englife-area-hub.englife-ueben-library .englife-area-hub__search {
    margin-top: 0;
    padding-top: 0;
}

.englife-ueben-library:not(.englife-area-hub) .englife-ueben-search::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(243,244,246,.88), rgba(255,255,255,.92)),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(38,43,51,.025) 27px 28px);
    border-top: 1px solid var(--el-pencil-soft);
    border-bottom: 1px solid var(--el-pencil-soft);
}

.englife-ueben-library .englife-ueben-search__field-label {
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    padding: 0 .08em;
    background: linear-gradient(
        180deg,
        transparent 0 56%,
        var(--el-marker-yellow) 56% 88%,
        transparent 88% 100%
    );
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.englife-ueben-library .englife-ueben-search__main {
    align-items: end;
}

.englife-ueben-library .englife-ueben-filter-details {
    margin-top: 8px;
}

/* ---------- Progress: one compact clickable learning passport ---------- */
.englife-ueben-library .englife-ueben-progress {
    width: min(760px,100%);
    padding-bottom: 20px;
}

.englife-ueben-library .englife-ueben-progress__passport {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: 100%;
    margin-top: 2px;
    border-top: 1px solid var(--el-pencil);
    border-bottom: 1px solid var(--el-pencil);
}

.englife-ueben-library .englife-ueben-progress__passport::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -8px;
    border-top: 1px dashed rgba(14,102,51,.28);
    transform: rotate(-.35deg);
    pointer-events: none;
}

.englife-ueben-library .englife-ueben-progress__passport-item {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px 16px;
    border-right: 1px solid var(--el-pencil-soft);
    color: var(--el-editorial-ink) !important;
    text-decoration: none !important;
    background: transparent;
}

.englife-ueben-library .englife-ueben-progress__passport-item:first-child {
    padding-left: 2px;
}

.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    padding-right: 2px;
    border-right: 0;
}

.englife-ueben-library .englife-ueben-progress__passport-value {
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 780;
    font-variant-numeric: tabular-nums;
}

.englife-ueben-library .englife-ueben-progress__passport-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.englife-ueben-library .englife-ueben-progress__passport-label {
    font-size: .78rem;
    line-height: 1.25;
    font-weight: 680;
}

.englife-ueben-library .englife-ueben-progress__passport-meta {
    color: #5B6470;
    font-size: .68rem;
    line-height: 1.25;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-progress__passport-item:hover {
        background: rgba(255,255,255,.38);
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-label {
        color: #0E6633;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}

.englife-ueben-library .englife-ueben-progress__passport-item:focus-visible {
    position: relative;
    z-index: 2;
}

/* Hide the older ledger only if stale markup appears during cache transitions. */
.englife-ueben-library .englife-ueben-progress__passport ~ .englife-ueben-progress__stats {
    display: none !important;
}

/* ---------- Recommendations: dense 2x2 workbook index ---------- */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-section__head h2 {
    width: max-content;
    max-width: 100%;
    padding: 0 .06em;
    background: linear-gradient(
        180deg,
        transparent 0 58%,
        rgba(255,211,87,.22) 58% 88%,
        transparent 88% 100%
    );
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0;
    border-top: 1px solid var(--el-editorial-rule-soft);
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact {
    position: relative;
    grid-template-columns: minmax(0,1fr) auto 32px;
    grid-template-areas:
        "title stamp action"
        "meta stamp action";
    min-height: 70px;
    padding: 10px 14px 10px 12px;
    column-gap: 10px;
    border: 0;
    border-bottom: 1px solid var(--el-editorial-rule-soft);
    background: transparent;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd) {
    border-right: 1px solid var(--el-editorial-rule-soft);
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:first-of-type,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:first-of-type {
    border-top: 0;
}

.englife-ueben-library .englife-ueben-card--compact h4 {
    margin: 0 0 3px !important;
    font-size: .94rem !important;
    line-height: 1.28 !important;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__meta,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__badges {
    align-self: start;
    line-height: 1.25;
}

/* Category names read as marker strokes, not digital badges/blue links. */
.englife-ueben-library .englife-ueben-card__badge--area {
    position: relative;
    z-index: 0;
    padding: 0 .10em;
    color: #5B6470;
    background: linear-gradient(180deg,transparent 0 48%,var(--el-marker-sand) 48% 90%,transparent 90% 100%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.englife-ueben-library .englife-ueben-card--area-grammar .englife-ueben-card__badge--area {
    background-image: linear-gradient(180deg,transparent 0 48%,var(--el-marker-blue) 48% 90%,transparent 90% 100%);
}

.englife-ueben-library .englife-ueben-card--area-vocabulary .englife-ueben-card__badge--area,
.englife-ueben-library .englife-ueben-card--area-speaking .englife-ueben-card__badge--area {
    background-image: linear-gradient(180deg,transparent 0 48%,var(--el-marker-green) 48% 90%,transparent 90% 100%);
}

.englife-ueben-library .englife-ueben-card--area-listening .englife-ueben-card__badge--area,
.englife-ueben-library .englife-ueben-card--area-pronunciation .englife-ueben-card__badge--area {
    background-image: linear-gradient(180deg,transparent 0 48%,var(--el-marker-purple) 48% 90%,transparent 90% 100%);
}

.englife-ueben-library .englife-ueben-card--area-writing .englife-ueben-card__badge--area {
    background-image: linear-gradient(180deg,transparent 0 48%,var(--el-marker-terracotta) 48% 90%,transparent 90% 100%);
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__footer {
    width: 32px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link {
    width: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 0 !important;
    text-decoration: none !important;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link::after {
    content: none;
    font-size: 1rem;
    line-height: 1;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link:hover {
    text-decoration: none !important;
    transform: translateX(1px);
}

/* Stamps intentionally remain exactly the established EngLife stamp system. */

/* ---------- Discovery utilities: one horizontal workbook tool rail ---------- */
.englife-ueben-discovery__utilities {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid var(--el-pencil);
    border-bottom: 1px solid var(--el-pencil);
}

.englife-ueben-discovery__utilities > a {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "title arrow";
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 9px 14px;
    border: 0;
    border-right: 1px solid var(--el-pencil-soft);
    background: transparent;
}

.englife-ueben-discovery__utilities > a:last-child {
    border-right: 0;
}

.englife-ueben-discovery__utilities > a strong {
    grid-area: title;
    font-size: .88rem;
}

.englife-ueben-discovery__utilities > a span:nth-of-type(1) {
    display: none;
}

.englife-ueben-discovery__utilities > a span:last-child {
    grid-area: arrow;
}

.englife-ueben-discovery__utilities > a:hover {
    background: rgba(255,255,255,.38);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .englife-ueben-library .englife-ueben-search {
        padding: 15px 0 14px;
    }

    .englife-ueben-library .englife-ueben-progress {
        width: 100%;
    }

    .englife-ueben-library .englife-ueben-progress__passport {
        grid-template-columns: 1fr;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        padding: 9px 2px;
        border-right: 0;
        border-bottom: 1px solid var(--el-pencil-soft);
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        border-bottom: 0;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
        grid-template-columns: 1fr !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd) {
        border-right: 0;
    }

    .englife-ueben-discovery__utilities {
        grid-template-columns: 1fr;
    }

    .englife-ueben-discovery__utilities > a,
    .englife-ueben-discovery__utilities > a:last-child {
        border-right: 0;
        border-bottom: 1px solid var(--el-pencil-soft);
    }

    .englife-ueben-discovery__utilities > a:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   v2.8.18 — Graph-paper rhythm correction
   - keeps the v2.8.17 workbook direction
   - removes independent decorative rules that compete with the grid
   - treats the printed graph paper as the page's alignment system
   - centers and compacts the Lernpass
   - keeps recommendation/repetition density while removing faux table lines
   - keeps existing EngLife score/completion stamps unchanged
   ========================================================= */

.englife-ueben-library {
    --el-workbook-grid: 32px;
    --el-workbook-half-grid: 16px;
    --el-marker-blue: rgba(38,43,51,.10);
    --el-marker-green: rgba(14,102,51,.10);
    --el-marker-purple: rgba(38,43,51,.10);
    --el-marker-sand: rgba(255,211,87,.18);
    --el-marker-terracotta: rgba(38,43,51,.10);
}

/* ---------- Headings: typography only; the graph paper provides the rules ---------- */
.englife-ueben-library .englife-ueben-section__head h2::after,
.englife-ueben-library .englife-ueben-results-head h2::after,
.englife-ueben-discovery__head h2::after {
    content: none !important;
    display: none !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-section__head h2 {
    width: auto;
    padding: 0;
    background: none !important;
}

/* Inside the graph-paper zone, use one grid row for section headings and
   whole grid rows for spacing. Avoid drawing separate horizontal rules. */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group {
    margin: 0 !important;
    padding: 0 0 var(--el-workbook-grid) !important;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group:last-child {
    padding-bottom: var(--el-workbook-grid) !important;
}

.englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head {
    min-height: var(--el-workbook-grid);
    margin: 0 !important;
    align-items: center;
}

.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-results-group {
    margin-top: 0;
    padding-top: var(--el-workbook-grid);
    border-top: 0 !important;
}

/* ---------- Lernpass: compact, centered, and line-free ---------- */
.englife-ueben-library .englife-ueben-progress {
    width: min(672px,100%);
    margin-inline: auto !important;
    padding-top: 0 !important;
    text-align: center;
}

.englife-ueben-library .englife-ueben-progress .englife-ueben-section__head {
    justify-content: center;
}

.englife-ueben-library .englife-ueben-progress__passport {
    width: 100%;
    min-height: calc(var(--el-workbook-grid) * 2);
    margin: 0 auto;
    border: 0 !important;
    background: transparent;
}

.englife-ueben-library .englife-ueben-progress__passport::after {
    content: none !important;
    display: none !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item,
.englife-ueben-library .englife-ueben-progress__passport-item:first-child,
.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    position: relative;
    min-height: calc(var(--el-workbook-grid) * 2);
    padding: 8px 14px;
    border: 0 !important;
    background: transparent !important;
    text-align: left;
}

/* A typographic separator is enough here; avoid another vertical rule. */
.englife-ueben-library .englife-ueben-progress__passport-item:not(:last-child)::after {
    content: "·";
    position: absolute;
    top: 50%;
    right: -2px;
    color: rgba(38,43,51,.48);
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-55%);
    pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-progress__passport-item:hover {
        background: transparent !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-label {
        color: #0E6633;
        text-decoration: none;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-value {
        color: #0E6633;
    }
}

/* ---------- Recommendation/repetition index: let the paper grid separate rows ---------- */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: auto;
    column-gap: var(--el-workbook-grid);
    row-gap: 0;
    border: 0 !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:first-of-type,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:first-of-type {
    height: auto;
    min-height: 84px;
    padding: 12px 14px;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-library .englife-ueben-card--compact h4 {
    margin: 0 0 2px !important;
    font-size: .92rem !important;
    line-height: 1.20 !important;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__meta,
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__badges {
    margin: 0;
    font-size: .72rem;
    line-height: 1.20;
}

/* ---------- Area marker: highlight only the word, never its separator dot ---------- */
.englife-ueben-library .englife-ueben-card__badge--area {
    --el-area-marker: var(--el-marker-sand);
    position: relative;
    isolation: isolate;
    z-index: 0;
    margin-right: 0;
    padding: 0 .06em;
    background: none !important;
    color: #5B6470 !important;
}

.englife-ueben-library .englife-ueben-card__badge--area::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -.03em;
    right: -.03em;
    bottom: .04em;
    height: .48em;
    border-radius: 1px;
    background: var(--el-area-marker);
    pointer-events: none;
}

.englife-ueben-library .englife-ueben-card--area-grammar .englife-ueben-card__badge--area {
    --el-area-marker: var(--el-marker-blue);
}

.englife-ueben-library .englife-ueben-card--area-vocabulary .englife-ueben-card__badge--area,
.englife-ueben-library .englife-ueben-card--area-speaking .englife-ueben-card__badge--area {
    --el-area-marker: var(--el-marker-green);
}

.englife-ueben-library .englife-ueben-card--area-listening .englife-ueben-card__badge--area,
.englife-ueben-library .englife-ueben-card--area-pronunciation .englife-ueben-card__badge--area {
    --el-area-marker: var(--el-marker-purple);
}

.englife-ueben-library .englife-ueben-card--area-writing .englife-ueben-card__badge--area {
    --el-area-marker: var(--el-marker-terracotta);
}

.englife-ueben-library .englife-ueben-card__badge--area:not(:last-child) {
    margin-right: 1.05em;
}

.englife-ueben-library .englife-ueben-card__badge--area:not(:last-child)::after {
    content: "·";
    position: absolute;
    top: 50%;
    right: -.70em;
    display: block;
    margin: 0;
    color: #A4ADBA;
    background: none !important;
    font: inherit;
    line-height: 1;
    transform: translateY(-52%);
}

/* ---------- Weiterüben stays visually distinct; only regularize surrounding rhythm ---------- */
.englife-ueben-library .englife-ueben-personal-section--continue .englife-ueben-series-grid {
    margin-top: 0;
}

/* ---------- Discovery/list navigation: no extra rulers over the printed grid ---------- */
.englife-ueben-discovery__category-list {
    column-gap: var(--el-workbook-grid);
    row-gap: 0;
    border-top: 0;
}

.englife-ueben-discovery__category-link {
    min-height: calc(var(--el-workbook-grid) * 2);
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.englife-ueben-discovery__utilities {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--el-workbook-grid);
    margin-top: var(--el-workbook-grid);
    border: 0 !important;
}

.englife-ueben-discovery__utilities > a,
.englife-ueben-discovery__utilities > a:last-child {
    min-height: var(--el-workbook-grid);
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-discovery__utilities > a:hover strong {
    color: #0E6633;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- Mobile: preserve the same idea with the 28px paper grid ---------- */
@media (max-width:720px) {
    .englife-ueben-library {
        --el-workbook-grid: 28px;
        --el-workbook-half-grid: 14px;
    }

    .englife-ueben-library .englife-ueben-progress {
        width: 100%;
    }

    .englife-ueben-library .englife-ueben-progress__passport {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        min-height: calc(var(--el-workbook-grid) * 2);
        padding: 7px 2px;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:not(:last-child)::after {
        content: none;
        display: none;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;
        column-gap: 0;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd) {
        height: auto;
        min-height: calc(var(--el-workbook-grid) * 2);
        padding: 7px 2px;
    }

    .englife-ueben-discovery__utilities {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .englife-ueben-discovery__utilities > a,
    .englife-ueben-discovery__utilities > a:last-child {
        min-height: calc(var(--el-workbook-grid) * 2);
    }
}

/* =========================================================
   v2.8.19 — Canonical headings + grid-aligned boundaries
   - one shared heading treatment across /ueben
   - restores section/list boundaries by darkening existing graph-paper lines
   - keeps the graph paper as the alignment system
   - keeps stamps and all behavior unchanged
   ========================================================= */

.englife-ueben-library {
    --el-grid-major-line: rgba(38,43,51,.09);
    --el-grid-major-line-strong: rgba(38,43,51,.13);
    --el-workbook-heading-size: 1.16rem;
    --el-workbook-heading-line: 1.3;
    --el-workbook-heading-weight: 760;
}

/* ---------- One canonical major-heading system ----------
   Search used to have its own yellow marker rule. Section headings used other
   selectors. From this release onward, all major /ueben headings share this
   single treatment. No marker stroke, underline, or component-specific skin. */
.englife-ueben-library :is(
    .englife-ueben-search__field-label,
    .englife-ueben-section__head h2,
    .englife-ueben-results-head h2,
    .englife-ueben-discovery__head h2,
    .englife-family-hub__head h2
) {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--el-editorial-ink,#262B33) !important;
    font-size: var(--el-workbook-heading-size) !important;
    line-height: var(--el-workbook-heading-line) !important;
    font-weight: var(--el-workbook-heading-weight) !important;
    letter-spacing: -.008em !important;
    text-transform: none !important;
}

.englife-ueben-library :is(
    .englife-ueben-search__field-label,
    .englife-ueben-section__head h2,
    .englife-ueben-results-head h2,
    .englife-ueben-discovery__head h2,
    .englife-family-hub__head h2
)::before,
.englife-ueben-library :is(
    .englife-ueben-search__field-label,
    .englife-ueben-section__head h2,
    .englife-ueben-results-head h2,
    .englife-ueben-discovery__head h2,
    .englife-family-hub__head h2
)::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Search is still a separate paper band, but its title is no longer a special
   visual species. The field gap supplies its spacing. */
.englife-ueben-library .englife-ueben-search__field {
    gap: 6px;
}

/* ---------- Section boundaries ----------
   Do not invent a second ruler system. These lines sit at section starts that
   are already quantized to the 32px/28px graph-paper rhythm, so they read as a
   slightly darker pass over an existing printed grid line. */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group + .englife-ueben-group {
    border-top: 1px solid var(--el-grid-major-line) !important;
    padding-top: var(--el-workbook-grid) !important;
}

/* The transition from the personal learning area into the next landing block
   gets the same boundary language. */
.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-results-group,
.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-discovery {
    border-top: 1px solid var(--el-grid-major-line) !important;
}

/* ---------- Lernpass: boundaries that are native to the grid ----------
   Desktop width is 672px = 21 graph squares. Each of the three segments is
   224px = 7 squares. Height is 64px = 2 squares. Restoring these rules therefore
   reinforces existing grid lines instead of drawing arbitrary ones. */
.englife-ueben-library .englife-ueben-progress__passport {
    border-top: 1px solid var(--el-grid-major-line-strong) !important;
    border-bottom: 1px solid var(--el-grid-major-line-strong) !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item,
.englife-ueben-library .englife-ueben-progress__passport-item:first-child,
.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    border-right: 1px solid var(--el-grid-major-line) !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    border-right: 0 !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

/* ---------- Compact 2x2 exercise indices ----------
   A single row boundary sits exactly one 64px row (two graph squares) down.
   It appears only when a second row exists. No extra vertical rule is added;
   the one-square column gutter and printed grid provide that separation. */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    position: relative;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(var(--el-workbook-grid) * 2);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--el-grid-major-line);
    pointer-events: none;
}

/* Keep the category marker confined to its word. Its separator is generated
   outside the highlighted geometry by the v2.8.18 rule below it. */
.englife-ueben-library .englife-ueben-card__badge--area::before {
    left: 0;
    right: 0;
}

/* ---------- Mobile ---------- */
@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-progress__passport {
        border-top: 1px solid var(--el-grid-major-line-strong) !important;
        border-bottom: 1px solid var(--el-grid-major-line-strong) !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        border-right: 0 !important;
        border-bottom: 1px solid var(--el-grid-major-line) !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        border-bottom: 0 !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations::after,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations::after {
        content: none !important;
        display: none !important;
    }

    /* On one-column mobile indices each item occupies two grid rows, so the
       boundary can sit directly on the bottom of every item except the last. */
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:not(:last-child),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:not(:last-child) {
        border-bottom: 1px solid var(--el-grid-major-line) !important;
    }
}

/* =========================================================
   v2.8.20 — Paper, pencil + workbook material language
   - keeps the v2.8.19 layout, canonical headings and grid geometry
   - keeps EngLife stamps unchanged
   - adds restrained graphite rules, semantic highlighter marks and sparse marginalia
   - avoids decorative marker strokes on headings
   ========================================================= */

.englife-ueben-library {
    --el-pencil-graphite: rgba(38,43,51,.28);
    --el-pencil-graphite-soft: rgba(38,43,51,.16);
    --el-pencil-graphite-faint: rgba(38,43,51,.09);
    --el-pencil-grain: repeating-linear-gradient(
        90deg,
        rgba(38,43,51,.30) 0 5px,
        rgba(38,43,51,.18) 5px 8px,
        rgba(38,43,51,.25) 8px 15px,
        rgba(38,43,51,.14) 15px 18px
    );
    --el-marker-blue: rgba(38,43,51,.12);
    --el-marker-green: rgba(14,102,51,.12);
    --el-marker-purple: rgba(38,43,51,.12);
    --el-marker-sand: rgba(255,211,87,.16);
    --el-marker-terracotta: rgba(38,43,51,.12);
}

/* ---------- Structural boundaries: graphite drawn on an existing grid line ----------
   These do not introduce a new vertical rhythm. They replace the stronger green
   overlay from v2.8.19 with one slightly irregular pencil pass at the exact same
   grid-aligned section boundary. */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group + .englife-ueben-group {
    position: relative;
    border-top: 0 !important;
}

.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group + .englife-ueben-group::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--el-pencil-grain);
    opacity: .72;
    pointer-events: none;
}

/* Boundaries outside the personal stack already use pseudo-elements for their
   full-bleed backgrounds, so retain a normal border there but use graphite. */
.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-results-group,
.englife-ueben-library .englife-ueben-personal-hero + .englife-ueben-discovery {
    border-top-color: var(--el-pencil-graphite) !important;
}

/* ---------- Lernpass: one compact workbook record ---------- */
.englife-ueben-library .englife-ueben-progress__passport {
    position: relative;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.englife-ueben-library .englife-ueben-progress__passport::before,
.englife-ueben-library .englife-ueben-progress__passport::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--el-pencil-grain);
    opacity: .78;
    pointer-events: none;
}

.englife-ueben-library .englife-ueben-progress__passport::before {
    top: 0;
}

.englife-ueben-library .englife-ueben-progress__passport::after {
    bottom: 0;
}

.englife-ueben-library .englife-ueben-progress__passport-item,
.englife-ueben-library .englife-ueben-progress__passport-item:first-child,
.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    border-right-color: var(--el-pencil-graphite-soft) !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    border-right: 0 !important;
}

/* A tiny pencil cue appears only during interaction. It is not another permanent
   decoration and therefore does not compete with the page grid. */
@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-label {
        text-decoration: underline;
        text-decoration-color: var(--el-pencil-graphite);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

/* ---------- Semantic highlighter: category word only ----------
   Highlighter is reserved for actual metadata. Major headings remain clean.
   The shape is intentionally a little uneven, like a single marker pass, and
   never includes the separator dot generated outside this element. */
.englife-ueben-library .englife-ueben-card__badge--area::before {
    left: -.04em;
    right: -.04em;
    bottom: .015em;
    height: .54em;
    border-radius: 0;
    clip-path: polygon(1% 12%, 99% 3%, 97% 91%, 2% 100%);
    transform: rotate(-.35deg);
    transform-origin: center;
    opacity: .92;
}

/* ---------- Compact exercise indices: pencil row boundary ---------- */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after {
    background: var(--el-pencil-grain);
    opacity: .62;
}

/* ---------- Search paper band ----------
   Search was already working visually. Keep its geometry; only make its upper
   and lower edge speak the same graphite language as the rest of the workbook. */
.englife-ueben-library .englife-ueben-search::before {
    border-top-color: var(--el-pencil-graphite-soft);
    border-bottom-color: var(--el-pencil-graphite-soft);
}

/* ---------- Workbook tool rail ----------
   The three browse tools remain horizontal. A small pencil tick between them
   creates grouping without turning them back into cards. */
@media (min-width:721px) {
    .englife-ueben-discovery__utilities > a {
        position: relative;
    }

    .englife-ueben-discovery__utilities > a:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 4px;
        right: calc(var(--el-workbook-grid) / -2);
        width: 1px;
        height: calc(100% - 8px);
        background: var(--el-pencil-graphite-soft);
        transform: rotate(.35deg);
        pointer-events: none;
    }
}

/* ---------- Mobile ---------- */
@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        border-right: 0 !important;
        border-bottom-color: var(--el-pencil-graphite-soft) !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:not(:last-child),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:not(:last-child) {
        border-bottom-color: var(--el-pencil-graphite-soft) !important;
    }
}

/* =========================================================
   v2.8.21 — Structural hierarchy cleanup
   - one consistent header boundary for the middle /ueben sections
   - progress heading returns to the shared left-aligned heading axis
   - Lernpass becomes a centered common-region strip
   - compact recommendation/repetition rows use proximity instead of row rules
   - removes decorative marginalia (including the paper-plane doodle)
   - keeps stamps, Weiterüben cards, search band and all behavior unchanged
   ========================================================= */

.englife-ueben-library {
    --el-workbook-section-rule: rgba(38,43,51,.20);
    --el-workbook-section-rule-soft: rgba(38,43,51,.12);
    --el-workbook-passport-paper: rgba(255,255,255,.46);
}

/* ---------- Middle-page structure ----------
   One horizontal rule now has one meaning only: it belongs to the header of a
   major section. Older group-start pencil passes are disabled so sections do
   not appear to be surrounded by unrelated lines. */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group,
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group + .englife-ueben-group {
    position: relative;
    margin: 0 !important;
    padding: 0 0 var(--el-workbook-grid) !important;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group + .englife-ueben-group::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* One canonical section-header row. Its bottom edge lands on the same 32px
   desktop / 28px mobile rhythm as the printed graph paper. */
.englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head {
    box-sizing: border-box;
    width: 100%;
    height: var(--el-workbook-grid);
    min-height: var(--el-workbook-grid);
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head h2 {
    flex: 0 1 auto;
    margin: 0 !important;
    text-align: left !important;
}

/* Remove any leftover padding that existed only to make room for the deleted
   recommendation-margin doodle. */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-section__head {
    padding-right: 0 !important;
}

/* ---------- Lernpass ----------
   The section itself spans the normal content width so its heading shares the
   same left axis as every other section. Only the compact record is centered. */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-progress {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    text-align: left !important;
}

.englife-ueben-library .englife-ueben-progress .englife-ueben-section__head {
    justify-content: flex-start !important;
    text-align: left !important;
}

.englife-ueben-library .englife-ueben-progress__passport {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    width: min(672px,100%) !important;
    min-height: calc(var(--el-workbook-grid) * 2);
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--el-workbook-passport-paper) !important;
    box-shadow: none !important;
}

/* Remove the former graphite top/bottom strokes entirely. The subtle shared
   paper region is now the grouping cue. */
.englife-ueben-library .englife-ueben-progress__passport::before,
.englife-ueben-library .englife-ueben-progress__passport::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item,
.englife-ueben-library .englife-ueben-progress__passport-item:first-child,
.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: calc(var(--el-workbook-grid) * 2);
    padding: 8px 12px;
    border: 0 !important;
    border-right: 1px solid var(--el-workbook-section-rule-soft) !important;
    background: transparent !important;
    text-align: left !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item:last-child {
    border-right: 0 !important;
}

.englife-ueben-library .englife-ueben-progress__passport-item:not(:last-child)::after {
    content: none !important;
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-progress__passport-item:hover {
        background: rgba(255,255,255,.40) !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-label,
    .englife-ueben-library .englife-ueben-progress__passport-item:hover .englife-ueben-progress__passport-value {
        color: #0E6633;
    }
}

/* ---------- Recommendations + Wiederholen ----------
   Proximity, the one-square column gutter and the graph paper do the grouping.
   Remove all internal row lines; the section-header rule is the only permanent
   horizontal divider inside each section. */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations::after,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations::after,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations:has(.englife-ueben-card--compact:nth-child(3))::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:not(:last-child),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:not(:last-child) {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
}

/* The flat rows are still interactive. Interaction is shown only when the user
   points/focuses at a row, rather than by permanent table-like boundaries. */
@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:hover,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:hover {
        background: rgba(255,255,255,.34) !important;
    }
}

/* ---------- Balanced exercise-index common regions ----------
   Flat rows are grouped by one shared paper surface instead of floating on the grid. */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    gap: 0 !important;
    border: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 6px;
    background: rgba(255,255,255,.56);
    overflow: hidden;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--el-system-rule-soft) !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd) {
    border-right: 1px solid var(--el-system-rule-soft) !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-last-child(-n+2),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

/* ---------- Decorative marginalia ----------
   The paper-plane icon is removed completely. No replacement doodle is added
   in this structural pass. */
.englife-ueben-library .englife-ueben-personal-section--recommendations::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-image: none !important;
}

/* ---------- Mobile ---------- */
@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head {
        height: var(--el-workbook-grid);
        min-height: var(--el-workbook-grid);
    }

    .englife-ueben-library .englife-ueben-progress__passport {
        width: 100% !important;
        grid-template-columns: 1fr;
        background: var(--el-workbook-passport-paper) !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        min-height: calc(var(--el-workbook-grid) * 2);
        padding: 7px 10px;
        border-right: 0 !important;
        border-bottom: 1px solid var(--el-workbook-section-rule-soft) !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        border-bottom: 0 !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:not(:last-child),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:not(:last-child) {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   v2.8.22 — Directional affordance cleanup
   - arrows are reserved for genuine previous/next movement
   - ordinary links rely on text, placement and hover/focus affordance
   - removes redundant action slots from compact exercise indices
   - preserves stamps, disclosure chevrons and sequential navigation controls
   ========================================================= */

/* Compact recommendation/repetition rows already expose the exercise title as
   the primary link. The duplicate right-side action link added visual noise and
   previously existed mainly to carry a generic arrow, so remove it from the
   compact index presentation. */
.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__footer {
    display: none !important;
}

.englife-ueben-library .englife-ueben-card--compact {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
        "meta"
        "title" !important;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__link::after {
    content: none !important;
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-library .englife-ueben-card--compact:hover h4 a {
        color: #0E6633 !important;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }
}

/* Section-level text links are self-describing (e.g. "Alle anzeigen"). Their
   link styling is the affordance; no directional glyph is necessary. */
.englife-ueben-library .englife-ueben-section__all-link {
    padding-right: 0 !important;
}

/* Area browser rows: name + exercise count are sufficient. Removing the arrow
   also lets the count sit cleanly at the row edge. */
.englife-ueben-discovery__category-link {
    grid-template-columns: minmax(0,1fr) auto !important;
}

.englife-ueben-discovery__category-arrow {
    display: none !important;
}

/* The three bottom browse destinations are navigation labels, not sequential
   steps. Keep them as a horizontal rail without arrow columns. */
.englife-ueben-discovery__utilities > a,
.englife-ueben-discovery__utilities > a:last-child {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "title" !important;
}

.englife-ueben-discovery__utilities > a span {
    display: none !important;
}

/* Exercise-list rows retain stamps when progress exists. Rows without progress
   no longer reserve a 44–48px column merely for a generic navigation arrow. */
.englife-ueben-list-row {
    grid-template-columns: 26px minmax(0,1fr) auto !important;
}

.englife-ueben-list-row__status {
    min-width: 0 !important;
}

.englife-ueben-list-row__status:empty {
    display: none !important;
}

.englife-ueben-list-row__arrow {
    display: none !important;
}

@media (max-width:600px) {
    .englife-ueben-list-row {
        grid-template-columns: 22px minmax(0,1fr) auto !important;
    }
}

/* =========================================================
   v2.8.23 — Mobile progress + compact stamp alignment
   - restores a dedicated stamp column after v2.8.22 removed the arrow/action slot
   - prevents mobile section actions from overlapping the first content row
   - makes stacked mobile Lernpass rows left-oriented and scan-friendly
   - keeps desktop structure, stamps and all behavior unchanged
   ========================================================= */

/* ---------- Compact recommendation/repetition rows ----------
   v2.8.22 correctly removed the generic action column, but also collapsed the
   grid to a single column while the stamp still referenced grid-area: stamp.
   Restore a dedicated, fixed stamp track without reintroducing an action slot. */
.englife-ueben-library .englife-ueben-card--compact {
    grid-template-columns: minmax(0,1fr) 52px !important;
    grid-template-areas:
        "meta stamp"
        "title stamp" !important;
    column-gap: 12px;
    align-items: center;
}

.englife-ueben-library .englife-ueben-card--compact .englife-ueben-card__stamp {
    grid-area: stamp;
    justify-self: center;
    align-self: center;
}

/* ---------- Mobile section heads ----------
   Do not force a one-grid-row height: a long heading plus its optional section
   action must be allowed to determine the row height instead of overflowing
   into the first exercise below it. */
@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        width: 100%;
        height: auto !important;
        min-height: var(--el-workbook-grid) !important;
    }

    .englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__head h2 {
        min-width: 0;
        line-height: 1.2 !important;
    }

    .englife-ueben-library .englife-ueben-personal-hero .englife-ueben-section__all-link {
        justify-self: end;
        align-self: center;
        min-width: max-content;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* Mobile Lernpass is a vertical record, not three centered desktop thirds.
       Use one fixed number column and one flexible text column for fast scanning. */
    .englife-ueben-library .englife-ueben-progress__passport {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        margin-inline: 0 !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-item,
    .englife-ueben-library .englife-ueben-progress__passport-item:first-child,
    .englife-ueben-library .englife-ueben-progress__passport-item:last-child {
        grid-template-columns: 48px minmax(0,1fr) !important;
        justify-content: stretch !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: calc(var(--el-workbook-grid) * 2);
        padding: 7px 10px !important;
        text-align: left !important;
    }

    .englife-ueben-library .englife-ueben-progress__passport-value {
        justify-self: end;
        width: 48px;
        text-align: right;
    }

    .englife-ueben-library .englife-ueben-progress__passport-copy,
    .englife-ueben-library .englife-ueben-progress__passport-label,
    .englife-ueben-library .englife-ueben-progress__passport-meta {
        justify-self: stretch;
        text-align: left !important;
    }

    .englife-ueben-library .englife-ueben-card--compact {
        grid-template-columns: minmax(0,1fr) 48px !important;
        grid-template-areas:
            "meta stamp"
            "title stamp" !important;
        column-gap: 8px;
    }
}

/* =========================================================
   EngLife Üben Frontend v2.8.25 — CANONICAL WORKBOOK SYSTEM

   Public design-system consolidation.
   Semantic rules:
   - graph paper = active learning / working surface
   - soft neutral-grey paper = browsing / reference / global navigation
   - graphite rules = structural boundaries
   - highlighter = semantic emphasis, never generic decoration
   - cards = ongoing learning series only
   - flat index rows = exercises, explanations and browse destinations
   Teacher Mode is intentionally out of scope.
   ========================================================= */

:root {
    --el-system-max: var(--wp--style--global--wide-size, 1200px);
    --el-system-grid: 32px;
    --el-system-paper: #FFFFFF;
    --el-system-beige: #F3F4F6; /* legacy name; now neutral-grey reference surface */
    --el-system-ink: #262B33;
    --el-system-muted: #5B6470;
    --el-system-green: #0E6633;
    --el-system-green-soft: rgba(14,102,51,.07);
    --el-system-interaction-tint: rgba(255,211,87,.16);
    --el-system-focus: #0E6633;
    --el-system-blue: #5B6470;
    --el-system-rule: rgba(38,43,51,.22);
    --el-system-rule-soft: rgba(38,43,51,.13);
    --el-system-highlight-blue: rgba(158,187,222,.24);
    --el-system-highlight-yellow: rgba(255,211,87,.28);
    --el-system-warning: #8A5A24;
    --el-system-error: #8A3F3F;
}

/* v2.8.52: One keyboard-focus treatment for shared interactive components.
   This does not style regular WordPress buttons, Gutenberg headings, or
   Teacher Mode. Keeps the earlier hover/focus logic and scoring states intact. */
:where(
    .englife-ueben-library,
    .englife-family-hub,
    .englife-area-hub,
    .englife-ueben-series-library,
    .englife-explanations-library,
    .englife-ueben-global-footer,
    .englife-exercise-navigation,
    .englife-explanation-related
) :is(
    .englife-ueben-search__suggestion,
    .englife-ueben-filter-chip,
    .englife-ueben-filter-reset,
    .englife-ueben-discovery__category-link,
    .englife-ueben-list-row,
    .englife-explanations-library__row,
    .englife-ueben-global-nav__item,
    .englife-ueben-family-disclosure > summary,
    .englife-ueben-series-disclosure > summary,
    .englife-ueben-series-area-disclosure > summary,
    .englife-ueben-series-family-disclosure > summary,
    .englife-ueben-card--compact a
):focus-visible {
    outline: 2px solid var(--el-system-focus, #0E6633) !important;
    outline-offset: 2px !important;
}

/* ---------- Shared content width ----------
 * WordPress Site Editor > Styles > Layout controls the two canonical widths:
 * --wp--style--global--content-size (focused worksheets + reading)
 * --wp--style--global--wide-size (browse/navigation + optional ad rail)
 * Keep these tokens here for compatibility with existing component selectors.
 * Pixel fallbacks are used only when a WP preview does not provide the tokens.
 */
.englife-ueben-library,
.englife-family-hub,
.englife-area-hub,
.englife-ueben-series-library,
.englife-explanations-library,
.englife-ueben-all-browser,
.englife-ueben-global-footer__inner {
    width: min(100%, var(--el-system-max));
    margin-inline: auto;
}

/* ---------- Shared editorial section headings ---------- */
.englife-ueben-section__head,
.englife-ueben-results-head,
.englife-family-hub__head,
.englife-ueben-discovery__head,
.englife-explanation-related > h2,
.englife-explanations-library__intro {
    border: 0;
}

.englife-ueben-section__head h2,
.englife-ueben-results-head h2,
.englife-family-hub__head h2,
.englife-ueben-discovery__head h2,
.englife-explanation-related > h2,
.englife-explanations-library__intro h2 {
    color: var(--el-system-ink) !important;
    text-transform: none !important;
    letter-spacing: -.01em !important;
}

.englife-ueben-section__head h2::before,
.englife-ueben-section__head h2::after,
.englife-ueben-results-head h2::before,
.englife-ueben-results-head h2::after,
.englife-family-hub__head h2::before,
.englife-family-hub__head h2::after,
.englife-ueben-discovery__head h2::before,
.englife-ueben-discovery__head h2::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   EXERCISE PAGE
   ========================================================= */
body.englife-generated-exercise-page .englife-exercise-shell {
    color: var(--el-system-ink);
}

/* Metadata is one compact line, not a tray of pills. */
body.englife-generated-exercise-page .englife-exercise-meta-bar {
    width: min(100%, var(--el-exercise-content-max));
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 12px;
    margin: 0 auto 12px;
}

body.englife-generated-exercise-page .englife-exercise-meta-pills {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
}

body.englife-generated-exercise-page .englife-exercise-pill {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--el-system-muted);
    font-size: .78rem;
    font-weight: 560;
}

body.englife-generated-exercise-page .englife-exercise-pill + .englife-exercise-pill::before {
    content: "·";
    display: inline-block;
    margin: 0 6px;
    color: rgba(38,43,51,.48);
}

.englife-ueben-home-link,
body.englife-generated-exercise-page .englife-exercise-meta-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--el-system-green) !important;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-home-link:hover,
    body.englife-generated-exercise-page .englife-exercise-meta-home:hover {
        color: var(--el-system-green) !important;
        background: transparent;
        text-decoration: none !important;
    }

    .englife-ueben-home-link:hover span:last-child,
    body.englife-generated-exercise-page .englife-exercise-meta-home:hover span:last-child {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* Learning path = navigation strip, not another card. */
body.englife-generated-exercise-page .englife-exercise-path {
    width: min(100%, var(--el-exercise-content-max));
    margin: 0 auto 18px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.52) !important;
    box-shadow: none !important;
}

body.englife-generated-exercise-page .englife-exercise-path__action {
    border-radius: 3px !important;
    box-shadow: none !important;
}

/* The graph paper is the page; the exercise itself is a focused paper panel. */
body.englife-generated-exercise-page .englife-exercise-workspace {
    min-height: 260px;
    padding: clamp(18px,2.4vw,26px) !important;
    border: 1px solid #D4D8DF !important;
    border-radius: 8px !important;
    background: var(--el-exercise-surface) !important;
    box-shadow: 0 1px 0 rgba(38,43,51,.025) !important;
    overflow: hidden !important;
}

body.englife-generated-exercise-page .englife-exercise-primary {
    position: relative;
    padding-bottom: 24px !important;
}

body.englife-generated-exercise-page .englife-teacher-launch,
body.englife-generated-exercise-page .englife-exercise-after-ad {
    width: min(100%, var(--el-exercise-content-max));
    margin-inline: auto;
}

body.englife-generated-exercise-page .englife-exercise-main-layout {
    width: min(100%, var(--el-exercise-content-max));
    margin-inline: auto;
}

@media (min-width:1180px) {
    body.englife-generated-exercise-page .englife-exercise-main-layout.has-ad-rail {
        width: min(100%, var(--el-system-max));
    }
}

/* The framed worksheet itself provides the boundary; no full-width rule. */
body.englife-generated-exercise-page .englife-exercise-primary::after {
    content: none;
    display: none;
}

/* Exercise code belongs to the worksheet, not to a standalone utility row. */
body.englife-generated-exercise-page .englife-exercise-code {
    width: min(100%, var(--el-exercise-content-max));
    display: flex;
    justify-content: flex-end;
    margin: 20px auto 0;
    color: var(--el-system-muted);
    font-size: .7rem;
    line-height: 1.3;
}

/* Results read like corrected work, not a dashboard card. */
body.englife-generated-exercise-page .englife-standard-result__summary {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.englife-generated-exercise-page .englife-standard-result__kicker {
    color: var(--el-system-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.englife-generated-exercise-page .englife-standard-result__review-heading {
    border-top: 1px solid var(--el-system-rule);
    padding-top: 18px;
}

/* Continuation / recommendation navigation is part of the worksheet. */
body.englife-generated-exercise-page .englife-exercise-navigation,
.englife-exercise-navigation {
    width: min(100%, var(--el-exercise-content-max));
    margin: 28px auto 0 !important;
    padding: 20px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.englife-generated-exercise-page .englife-exercise-navigation__eyebrow,
.englife-exercise-navigation__eyebrow {
    margin: 0 0 6px !important;
    color: var(--el-system-muted) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.englife-generated-exercise-page .englife-exercise-navigation__next-link,
.englife-exercise-navigation__next-link {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 12px !important;
    border: 0 !important;
    border-left: 3px solid rgba(14,102,51,.50) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.34) !important;
    box-shadow: none !important;
}

/* =========================================================
   SHARED EXERCISE INDEX
   Used by /ueben recommendations, exercise related items and
   explanation-related exercises.
   ========================================================= */
.englife-exercise-index,
.englife-exercise-navigation__related .englife-ueben-grid--recommendations,
.englife-explanation-related__grid.englife-ueben-grid--recommendations {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
    border: 1px solid var(--el-system-rule-soft);
    border-radius: 6px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}

.englife-exercise-index .englife-ueben-card--compact,
.englife-exercise-navigation__related .englife-ueben-card--compact,
.englife-explanation-related__grid .englife-ueben-card--compact {
    position: relative;
    min-height: 72px;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 56px !important;
    grid-template-areas:
        "meta stamp"
        "title stamp" !important;
    align-items: center;
    column-gap: 12px;
    margin: 0 !important;
    padding: 10px 16px 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.englife-exercise-index .englife-ueben-card--compact:nth-child(odd),
.englife-exercise-navigation__related .englife-ueben-card--compact:nth-child(odd),
.englife-explanation-related__grid .englife-ueben-card--compact:nth-child(odd) {
    border-right: 1px solid var(--el-system-rule-soft) !important;
    padding-right: 16px !important;
}

.englife-exercise-index .englife-ueben-card--compact:nth-child(even),
.englife-exercise-navigation__related .englife-ueben-card--compact:nth-child(even),
.englife-explanation-related__grid .englife-ueben-card--compact:nth-child(even) {
    padding-left: 16px !important;
}

.englife-exercise-index .englife-ueben-card--compact::before,
.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-exercise-navigation__related .englife-ueben-card--compact::before,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-explanation-related__grid .englife-ueben-card--compact::before,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__footer {
    content: none !important;
    display: none !important;
}

.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__badges {
    grid-area: meta;
    margin: 0 0 3px !important;
    overflow: visible !important;
}

.englife-exercise-index .englife-ueben-card--compact h4,
.englife-exercise-navigation__related .englife-ueben-card--compact h4,
.englife-explanation-related__grid .englife-ueben-card--compact h4 {
    grid-area: title;
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.3 !important;
}

.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__stamp,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__stamp,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__stamp {
    grid-area: stamp;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    justify-self: center;
    align-self: center;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-index .englife-ueben-card--compact:hover,
    .englife-exercise-navigation__related .englife-ueben-card--compact:hover,
    .englife-explanation-related__grid .englife-ueben-card--compact:hover {
        background: rgba(255,255,255,.42) !important;
    }
}

/* =========================================================
   CANONICAL TOPIC DIRECTORY
   Same component on /ueben and in the exercise footer.
   ========================================================= */
.englife-ueben-discovery {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 32px 0;
}





.englife-ueben-discovery__head {
    display: block;
    margin: 0 0 22px !important;
}

.englife-ueben-discovery__head h2 {
    margin: 0 !important;
    font-size: 1.24rem !important;
    line-height: 1.25 !important;
    font-weight: 780 !important;
}

.englife-ueben-discovery__head p {
    margin: 6px 0 0 !important;
    max-width: var(--wp--style--global--content-size, 760px);
    color: var(--el-system-muted) !important;
    font-size: .94rem;
    line-height: 1.45;
}

.englife-ueben-discovery__category-list {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.englife-ueben-discovery__category-link {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--el-system-ink) !important;
    text-decoration: none !important;
}

.englife-ueben-discovery__category-link:nth-child(odd) {
    border-right: 1px solid var(--el-system-rule-soft) !important;
}

.englife-ueben-discovery__category-link:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

.englife-ueben-discovery__category-name {
    font-size: 1rem !important;
    font-weight: 740 !important;
}

.englife-ueben-discovery__category-count {
    color: var(--el-system-muted) !important;
    font-size: .84rem !important;
}

.englife-ueben-discovery__category-arrow {
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-discovery__category-link:hover {
        background: rgba(255,255,255,.38) !important;
    }
    .englife-ueben-discovery__category-link:hover .englife-ueben-discovery__category-name {
        color: var(--el-system-green) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
}

/* Grid fades naturally; no full-bleed terminal rule. */
.englife-ueben-library.englife-ueben-grid-zone::after,
.englife-family-hub.englife-ueben-grid-zone::after,
.englife-area-hub.englife-ueben-grid-zone::after,
.englife-ueben-series-library.englife-ueben-grid-zone::after,
.englife-ueben-all-browser.englife-ueben-grid-zone::after,
body.englife-explanation-page .englife-ueben-grid-zone--explanation::after {
    content: none;
    display: none;
}

/* =========================================================
   GLOBAL LEARNING NAVIGATION FOOTER
   Outer surface only. Inner components keep their canonical styling.
   ========================================================= */
.englife-ueben-global-footer {
    position: relative;
    isolation: isolate;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--el-system-ink);
}

.englife-ueben-global-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--el-system-beige);
    border: 0 !important;
    pointer-events: none;
}

.englife-ueben-global-footer .englife-ueben-discovery {
    padding: 32px 0 !important;
}

.englife-ueben-global-footer__inner > .englife-ueben-global-nav:only-child {
    margin-block: 18px;
}

.englife-ueben-global-nav {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 6px;
    background: rgba(255,255,255,.48);
    overflow: hidden;
}

.englife-ueben-global-footer .englife-ueben-discovery + .englife-ueben-global-nav {
    margin-top: 18px;
}

.englife-ueben-global-nav__item {
    min-width: 0;
    padding: 14px 14px 13px;
    border: 0 !important;
    border-right: 0 !important;
    color: var(--el-system-ink) !important;
    font-size: .9rem;
    line-height: 1.25;
    font-weight: 720;
    text-decoration: none !important;
}

.englife-ueben-global-nav__item:last-child {
    border-right: 0 !important;
}

.englife-ueben-global-nav__item.is-current {
    color: var(--el-system-green) !important;
    font-weight: 760;
}

@media (hover:hover) and (pointer:fine) {
    a.englife-ueben-global-nav__item:hover {
        background: rgba(255,255,255,.38);
        color: var(--el-system-green) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
}

.englife-ueben-subpage-back {
    display: none !important;
}

/* =========================================================
   HUBS / BROWSE PAGES
   ========================================================= */
.englife-family-hub.englife-ueben-grid-zone,
.englife-ueben-series-library.englife-ueben-grid-zone,
.englife-ueben-all-browser.englife-ueben-grid-zone,
.englife-explanations-library.englife-ueben-grid-zone {
    padding-top: 24px;
    padding-bottom: 28px;
}

/* Area pages now begin with the search form itself, not an intro row. */
.englife-area-hub.englife-ueben-grid-zone {
    padding-top: 0;
    padding-bottom: 28px;
}

.englife-family-hub__head,
.englife-ueben-discovery__head {
    align-items: start !important;
}

/* Open disclosures should read like indented workbook outlines, not green rails. */
.englife-ueben-family-disclosure__content,
.englife-ueben-series-disclosure__content,
.englife-ueben-series-area-disclosure__content,
.englife-ueben-series-family-disclosure__content {
    border-left: 0 !important;
    padding-left: 16px !important;
}

.englife-ueben-family-disclosure,
.englife-ueben-series-disclosure,
.englife-ueben-series-area-disclosure,
.englife-ueben-series-family-disclosure {
    border-color: var(--el-system-rule-soft) !important;
}

.englife-ueben-family-disclosure > summary,
.englife-ueben-series-disclosure > summary,
.englife-ueben-series-area-disclosure > summary,
.englife-ueben-series-family-disclosure > summary {
    border-radius: 0 !important;
}

/* Shared disclosure behaviour across topic, family and series hubs.
   Keep the existing structural rules; emphasize labels only on interaction. */
@media (hover:hover) and (pointer:fine) {
    :is(
        .englife-ueben-family-disclosure,
        .englife-ueben-series-disclosure,
        .englife-ueben-series-area-disclosure,
        .englife-ueben-series-family-disclosure
    ) > summary:hover {
        color: var(--el-system-green, #0E6633);
    }
}

/* =========================================================
   EXPLANATION LIBRARY — REFERENCE INDEX, NOT CARD GRID
   ========================================================= */
.englife-explanations-library {
    margin-top: 0 !important;
}

.englife-explanations-library__intro {
    margin: 0 0 28px !important;
}

.englife-explanations-library__intro h2 {
    margin: 0 !important;
    font-size: 1.35rem !important;
}

.englife-explanations-library__intro p {
    margin: 7px 0 0 !important;
    color: var(--el-system-muted);
}

.englife-explanations-library__count {
    font-size: .84rem !important;
}

.englife-explanations-library__groups {
    display: grid !important;
    gap: 34px !important;
}

.englife-explanations-library__group > h3 {
    margin: 0 !important;
    margin-bottom: 8px !important;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--el-system-ink);
    font-size: 1.08rem !important;
}

.englife-explanations-library__index {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0 36px;
}

.englife-explanations-library__row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 64px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--el-system-rule-soft);
    color: var(--el-system-ink) !important;
    text-decoration: none !important;
}

.englife-explanations-library__row strong {
    font-size: .96rem;
    line-height: 1.3;
}

.englife-explanations-library__meta {
    color: var(--el-system-muted) !important;
    font-size: .8rem !important;
    white-space: nowrap;
}

@media (hover:hover) and (pointer:fine) {
    .englife-explanations-library__row:hover {
        background: rgba(255,255,255,.40);
    }
    .englife-explanations-library__row:hover strong {
        color: var(--el-system-green);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* =========================================================
   EXPLANATION PAGE CONTENT
   =========================================================
   The four existing Gutenberg grammar articles use the shared .el-explain
   rules bundled below; page-specific teaching diagrams retain their layout.
   The WordPress Site Editor continues to own body typography and widths.
   ========================================================= */

/* Related exercises use exactly the same index language as exercise pages. */
body.englife-explanation-page .englife-explanation-related {
    width: min(100%, var(--wp--style--global--content-size, 760px));
    margin: 34px auto 0 !important;
    padding: 24px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--el-system-rule) !important;
}

body.englife-explanation-page .englife-explanation-related > h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 1.15rem !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .englife-explanations-library__index {
        grid-template-columns: 1fr;
    }

    .englife-ueben-discovery__category-list {
        gap: 0 24px !important;
    }
}

@media (max-width: 720px) {
    :root { --el-system-grid: 28px; }

    body.englife-generated-exercise-page .englife-exercise-meta-bar {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 7px;
        margin-bottom: 13px;
    }

    body.englife-generated-exercise-page .englife-exercise-meta-home {
        width: fit-content;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: .74rem;
    }

    body.englife-generated-exercise-page .englife-exercise-meta-pills {
        justify-content: flex-start;
        row-gap: 4px;
    }

    body.englife-generated-exercise-page .englife-exercise-pill {
        font-size: .72rem;
    }

    .englife-exercise-index,
    .englife-exercise-navigation__related .englife-ueben-grid--recommendations,
    .englife-explanation-related__grid.englife-ueben-grid--recommendations {
        grid-template-columns: 1fr !important;
    }

    .englife-exercise-index .englife-ueben-card--compact,
    .englife-exercise-navigation__related .englife-ueben-card--compact,
    .englife-explanation-related__grid .englife-ueben-card--compact,
    .englife-exercise-index .englife-ueben-card--compact:nth-child(odd),
    .englife-exercise-index .englife-ueben-card--compact:nth-child(even),
    .englife-exercise-navigation__related .englife-ueben-card--compact:nth-child(odd),
    .englife-exercise-navigation__related .englife-ueben-card--compact:nth-child(even),
    .englife-explanation-related__grid .englife-ueben-card--compact:nth-child(odd),
    .englife-explanation-related__grid .englife-ueben-card--compact:nth-child(even) {
        grid-template-columns: minmax(0,1fr) 48px !important;
        border-right: 0 !important;
    }

    .englife-ueben-discovery,
    .englife-ueben-global-footer .englife-ueben-discovery {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .englife-ueben-discovery__category-list {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .englife-ueben-discovery__category-link {
        min-height: 56px !important;
    }

    body.englife-generated-exercise-page .englife-exercise-workspace {
        padding: 14px 12px !important;
        border-radius: 6px !important;
    }

    .englife-ueben-discovery__category-link:nth-child(odd) {
        border-right: 0 !important;
    }

    .englife-ueben-discovery__category-link:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--el-system-rule-soft) !important;
    }

    .englife-ueben-discovery__category-link:last-child {
        border-bottom: 0 !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd) {
        border-right: 0 !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-last-child(-n+2),
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--el-system-rule-soft) !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:last-child,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:last-child {
        border-bottom: 0 !important;
    }

}

@media (max-width: 520px) {
    .englife-ueben-global-nav {
        grid-template-columns: 1fr;
    }

    .englife-ueben-global-nav__item,
    .englife-ueben-global-nav__item:last-child {
        padding: 12px 4px;
        border-right: 0 !important;
        border-bottom: 0 !important;
    }

    .englife-ueben-global-nav__item:last-child {
        border-bottom: 0 !important;
    }

    .englife-explanations-library__row {
        grid-template-columns: minmax(0,1fr);
        gap: 3px;
    }

    .englife-explanations-library__meta {
        white-space: normal;
    }
}

/* =========================================================
   v2.8.27 — Wide rail, breathing room, footer cleanup
   - browse/navigation surfaces use the WordPress wide width
   - focused exercise content uses the WordPress content width
   - section content gains breathing room below header rules
   - footer navigation is full-bleed, centered and border-led rather than boxed
   - progress reset moves into the beige footer utility area
   - Übungsreihen reuse the canonical exercise stamp
   - duplicate terminal series-hub rules are removed
   ========================================================= */

/* ---------- Section rhythm ---------- */
.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group > .englife-ueben-section__head + * {
    margin-top: 14px !important;
}

.englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group {
    padding-bottom: 34px !important;
}

/* Recommendation and repetition indexes must grow with wrapped titles. */
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations {
    grid-auto-rows: auto !important;
}

.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact {
    height: auto !important;
    min-height: 84px !important;
    padding: 12px 14px !important;
}

/* Do not reserve an empty stamp track when a compact recommendation has no score. */
.englife-ueben-library .englife-ueben-card--compact:not(.englife-ueben-card--has-progress) {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
        "meta"
        "title" !important;
}

/* ---------- Wider browse rail ---------- */
.englife-ueben-library,
.englife-family-hub,
.englife-area-hub,
.englife-ueben-series-library,
.englife-explanations-library,
.englife-ueben-all-browser {
    width: min(100%, var(--el-system-max));
}

/* ---------- Canonical series stamp ---------- */
.englife-ueben-series-card > .englife-ueben-series-card__stamp {
    top: 9px;
    right: 9px;
}

.englife-ueben-series-card.is-complete .englife-ueben-series-card__head {
    padding-right: 76px;
}

/* Old series-only score badge is retired in v2.8.27. */
.englife-ueben-series-card__score {
    display: none !important;
}

/* ---------- Series hub terminal boundary ----------
   The grid-zone edge is the one canonical closing rule. */
.englife-ueben-series-library .englife-ueben-series-area-disclosure:last-child,
.englife-ueben-series-library .englife-ueben-series-family-disclosure:last-child,
.englife-ueben-series-library .englife-ueben-series-areas,
.englife-ueben-series-library > .englife-ueben-group {
    border-bottom: 0 !important;
}

/* ---------- Full-bleed shared footer, centered inner rail ---------- */
.englife-ueben-global-footer {
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
}

.englife-ueben-global-footer::before {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
}

.englife-ueben-global-footer__inner {
    width: min(calc(100% - 64px), var(--el-system-max)) !important;
    max-width: var(--el-system-max) !important;
    margin-inline: auto !important;
}

/* Footer topic directory: keep readable column structure without an outer box. */
/* Footer global navigation: text navigation without an enclosing card. */
.englife-ueben-global-nav {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible;
}

.englife-ueben-global-footer .englife-ueben-discovery + .englife-ueben-global-nav {
    margin-top: 24px;
    border-top: 0 !important;
}

.englife-ueben-global-footer__inner > .englife-ueben-global-nav:only-child {
    margin: 0 !important;
    padding-top: 18px;
}

.englife-ueben-global-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent !important;
}

/* The reset control remains a quiet utility at the bottom of the navigation footer. */
.englife-ueben-global-footer__reset {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
    padding: 10px 0 22px;
}

.englife-ueben-global-footer__reset .englife-ueben-progress-reset__open {
    margin: 0;
}

/* The old landing-page reset wrapper should never reserve grid-paper space. */
.englife-ueben-progress-reset {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width:720px) {
    .englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group > .englife-ueben-section__head + * {
        margin-top: 12px !important;
    }

    .englife-ueben-library .englife-ueben-personal-hero > .englife-ueben-group {
        padding-bottom: 28px !important;
    }

    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact {
        min-height: 72px !important;
        padding: 10px 12px !important;
    }

    .englife-ueben-global-footer__inner {
        width: min(calc(100% - 28px), var(--el-system-max)) !important;
    }

    .englife-ueben-global-footer__reset {
        padding-bottom: 18px;
    }
}


/* =========================================================
   v2.8.28 — Canonical airy exercise index
   One component for /ueben recommendations + repetition,
   exercise-page related exercises and explanation-page related exercises.
   Combines the generous spacing of the landing page with the clear 2×2
   workbook grid used on subpages. The translucent paper surface intentionally
   lets the graph paper remain faintly visible beneath it.
   ========================================================= */

/* ---------- Shared index surface ---------- */
.englife-exercise-index,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations,
.englife-exercise-navigation__related .englife-ueben-grid--recommendations,
.englife-explanation-related__grid.englife-ueben-grid--recommendations {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 0 !important;
    border: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.58) !important;
    overflow: hidden !important;
}

/* ---------- Shared index cells ---------- */
.englife-exercise-index .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
.englife-exercise-navigation__related .englife-ueben-card--compact,
.englife-explanation-related__grid .englife-ueben-card--compact {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 58px !important;
    grid-template-areas:
        "meta stamp"
        "title stamp" !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: 14px !important;
    min-width: 0;
    min-height: 96px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
}

/* No score/progress = no empty stamp track. */
.englife-exercise-index .englife-ueben-card--compact:not(.englife-ueben-card--has-progress),
.englife-ueben-library .englife-ueben-card--compact:not(.englife-ueben-card--has-progress),
.englife-exercise-navigation__related .englife-ueben-card--compact:not(.englife-ueben-card--has-progress),
.englife-explanation-related__grid .englife-ueben-card--compact:not(.englife-ueben-card--has-progress) {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
        "meta"
        "title" !important;
}

/* Vertical divider between workbook columns. */
.englife-exercise-index .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:nth-child(odd),
.englife-exercise-navigation__related .englife-ueben-card--compact:nth-child(odd),
.englife-explanation-related__grid .englife-ueben-card--compact:nth-child(odd) {
    border-right: 1px solid var(--el-system-rule-soft) !important;
}

/* Horizontal divider exists only when there is a second row. */
.englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2),
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2),
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2),
.englife-exercise-navigation__related .englife-ueben-grid--recommendations:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2),
.englife-explanation-related__grid.englife-ueben-grid--recommendations:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2) {
    border-bottom: 1px solid var(--el-system-rule-soft) !important;
}

/* ---------- Shared typography rhythm ---------- */
.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__badges,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__badges {
    grid-area: meta;
    margin: 0 0 7px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
}

.englife-exercise-index .englife-ueben-card--compact h4,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact h4,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact h4,
.englife-exercise-navigation__related .englife-ueben-card--compact h4,
.englife-explanation-related__grid .englife-ueben-card--compact h4 {
    grid-area: title;
    margin: 0 !important;
    font-size: .96rem !important;
    line-height: 1.35 !important;
}

.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__stamp,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact .englife-ueben-card__stamp,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__stamp,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__stamp {
    grid-area: stamp;
    position: relative !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
}

/* Old compact-card chrome/action slots must never reappear in one context only. */
.englife-exercise-index .englife-ueben-card--compact::before,
.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact::before,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact::before,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-exercise-navigation__related .englife-ueben-card--compact::before,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__footer,
.englife-explanation-related__grid .englife-ueben-card--compact::before,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__task-icon,
.englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__footer {
    content: none !important;
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-index .englife-ueben-card--compact:hover,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:hover,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:hover,
    .englife-exercise-navigation__related .englife-ueben-card--compact:hover,
    .englife-explanation-related__grid .englife-ueben-card--compact:hover {
        background: rgba(255,255,255,.36) !important;
    }
}

/* ---------- Mobile: same component, one column ---------- */
@media (max-width:720px) {
    .englife-exercise-index,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-grid--recommendations,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-grid--recommendations,
    .englife-exercise-navigation__related .englife-ueben-grid--recommendations,
    .englife-explanation-related__grid.englife-ueben-grid--recommendations {
        grid-template-columns: 1fr !important;
    }

    .englife-exercise-index .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
    .englife-exercise-navigation__related .englife-ueben-card--compact,
    .englife-explanation-related__grid .englife-ueben-card--compact {
        min-height: 84px !important;
        padding: 14px 14px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--el-system-rule-soft) !important;
    }

    .englife-exercise-index .englife-ueben-card--compact:last-child,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact:last-child,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact:last-child,
    .englife-exercise-navigation__related .englife-ueben-card--compact:last-child,
    .englife-explanation-related__grid .englife-ueben-card--compact:last-child {
        border-bottom: 0 !important;
    }
}


/* =========================================================
   v2.8.29 — FUNCTIONAL SUPPORT SURFACES
   ========================================================= */

/* Search/filter results now reuse the actual hub series-list component. */
.englife-ueben-search-series-results {
    margin-top: 14px;
}

.englife-ueben-search-series-results .englife-ueben-list-series + .englife-ueben-list-series {
    margin-top: 22px;
}

/* Explanation ads deliberately do not restyle the Gutenberg article itself. */
.englife-explanation-ad {
    --el-ex-text: #262B33;
    --el-ex-muted: #5B6470;
    --el-ex-border: #D4D8DF;
    --el-ex-soft: rgba(243,244,246,.88);
    width: 100%;
    margin: 28px auto 32px;
}

.englife-explanation-ad .englife-ad-slot {
    max-width: 860px;
    margin-inline: auto;
}

.englife-explanation-ad .englife-ad-slot__stage {
    min-height: 90px;
    border-radius: 8px;
    background: rgba(243,244,246,.82);
}

@media (max-width:700px) {
    .englife-explanation-ad {
        margin: 22px auto 26px;
    }
}

/* =========================================================
   v2.8.31 — SHARED AD MANAGEMENT / NEW PLACEMENTS
   ========================================================= */

/* Empty network containers must never block the clickable house fallback. */
.englife-ad-slot__provider {
    pointer-events: none;
}

.englife-ad-slot.is-filled .englife-ad-slot__provider,
.englife-ad-slot:has([data-ad-status="filled"]) .englife-ad-slot__provider,
.englife-ad-slot:has([data-englife-ad-loaded="true"]) .englife-ad-slot__provider {
    pointer-events: auto;
}

/* Paid/direct creatives use the same quiet paper language as house ads. */
.englife-ad-direct {
    width: 100%;
    min-height: inherit;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    color: var(--el-ex-text, #262B33);
}

.englife-ad-direct__image {
    width: 76px;
    height: 54px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 5px;
}

.englife-ad-direct__copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.englife-ad-direct__sponsor {
    color: var(--el-ex-green, #0E6633);
    font-size: .72rem;
    font-weight: 700;
}

.englife-ad-direct__copy strong {
    font-size: .9rem;
    line-height: 1.3;
}

.englife-ad-direct__copy > span:not(.englife-ad-direct__sponsor) {
    color: var(--el-ex-muted, #5B6470);
    font-size: .8rem;
    line-height: 1.35;
}

.englife-ad-direct > a {
    display: inline-flex;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--el-ex-border-strong, #B9C0CB);
    border-radius: 6px;
    background: rgba(255,255,255,.86);
    color: var(--el-ex-text, #262B33) !important;
    font-size: .8rem;
    font-weight: 650;
    text-decoration: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ad-direct > a:hover {
        background: #FFFFFF;
        text-decoration: underline !important;
        text-underline-offset: 2px;
    }
}

/* /ueben: visible enough to be useful, but only after recommendations. */
.englife-ueben-landing-ad {
    width: 100%;
    margin: 24px auto 30px;
}

.englife-ueben-landing-ad .englife-ad-slot {
    max-width: var(--el-system-max);
    margin-inline: auto;
}

.englife-ueben-landing-ad .englife-ad-slot__stage {
    min-height: 90px;
    border-radius: 8px;
    background: rgba(243,244,246,.78);
}

/* Mobile exercise anchor is mounted lazily by worksheet JS so network code
   never executes merely because the hidden desktop markup exists. */
.englife-exercise-mobile-anchor {
    display: none;
}

@media (max-width:767px) {
    .englife-exercise-mobile-anchor {
        position: fixed;
        z-index: 99990;
        left: max(8px, env(safe-area-inset-left));
        right: max(8px, env(safe-area-inset-right));
        bottom: calc(8px + env(safe-area-inset-bottom));
        display: block;
        opacity: 0;
        transform: translateY(calc(100% + 24px));
        pointer-events: none;
        transition: transform .2s ease, opacity .18s ease;
    }

    .englife-exercise-mobile-anchor[hidden] {
        display: none !important;
    }

    .englife-exercise-mobile-anchor.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .englife-exercise-mobile-anchor__mount {
        width: 100%;
    }

    .englife-exercise-mobile-anchor__close {
        position: absolute;
        z-index: 5;
        top: -10px;
        right: -2px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(38,43,51,.24);
        border-radius: 50%;
        background: #FFFFFF;
        color: #262B33;
        box-shadow: 0 2px 7px rgba(38,43,51,.13);
        font: inherit;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    .englife-exercise-mobile-anchor .englife-ad-slot__label {
        margin-bottom: 3px;
        padding-right: 28px;
        font-size: .62rem;
        text-align: right;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-slot__stage {
        min-height: 82px;
        max-height: 112px;
        border-radius: 9px;
        background: rgba(243,244,246,.96);
        box-shadow: 0 5px 20px rgba(38,43,51,.16);
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-house {
        min-height: 82px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 7px;
        padding: 10px 12px;
        text-align: left;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-house > span:not(.englife-ad-house__brand) {
        display: none;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-house__brand {
        flex: 0 0 auto;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-house strong {
        min-width: 0;
        flex: 1 1 auto;
        font-size: .82rem;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-house a {
        min-height: 34px;
        flex: 0 0 auto;
        padding: 5px 8px;
        font-size: .75rem;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-direct {
        min-height: 82px;
        gap: 8px;
        padding: 9px 11px;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-direct__image {
        width: 54px;
        height: 44px;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-direct__copy > span:not(.englife-ad-direct__sponsor) {
        display: none;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-direct__copy strong {
        font-size: .8rem;
    }

    .englife-ad-slot--exercise_mobile_anchor .englife-ad-direct > a {
        min-height: 34px;
        padding: 5px 8px;
        font-size: .74rem;
    }

    body.englife-generated-exercise-page.englife-mobile-ad-visible {
        padding-bottom: calc(var(--englife-mobile-ad-height, 104px) + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .englife-exercise-mobile-anchor {
        transition: none;
    }
}

/* =========================================================
   v2.8.32 — Mobile recommendation metadata restore
   The legacy global mobile rule hides .englife-ueben-card__badges. Canonical
   exercise-index rows now have enough vertical room and rely on metadata for
   orientation, so explicitly restore it in every shared recommendation context.
   ========================================================= */
@media (max-width:720px) {
    .englife-exercise-index .englife-ueben-card--compact .englife-ueben-card__badges,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact .englife-ueben-card__badges,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact .englife-ueben-card__badges,
    .englife-exercise-navigation__related .englife-ueben-card--compact .englife-ueben-card__badges,
    .englife-explanation-related__grid .englife-ueben-card--compact .englife-ueben-card__badges {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 3px 5px !important;
        margin: 0 0 6px !important;
        overflow: visible !important;
    }

    .englife-exercise-index .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--recommendations .englife-ueben-card--compact,
    .englife-ueben-library .englife-ueben-personal-section--repeat .englife-ueben-card--compact,
    .englife-exercise-navigation__related .englife-ueben-card--compact,
    .englife-explanation-related__grid .englife-ueben-card--compact {
        align-content: center !important;
        min-height: 96px !important;
    }
}

/* =========================================================
   v2.8.33 — Canonical mobile spacing + exercise meta cleanup
   - Removes the obsolete subpage-only mobile padding override so all
     canonical recommendation/index rows use the same 14px mobile inset.
   - Treats "Zur Üben-Startseite" as navigation text, not a button.
   - Stacks the return link above exercise metadata on narrow screens.
   ========================================================= */
.englife-ueben-home-link:focus-visible,
body.englife-generated-exercise-page .englife-exercise-meta-home:focus-visible {
    outline: 2px solid rgba(14,102,51,.52);
    outline-offset: 4px;
    border-radius: 2px;
}


/* =========================================================
   v2.8.34 — Exercise metadata separator cleanup
   The legacy trailing-dot rule was removed. The canonical separator is now
   exclusively .englife-exercise-pill + .englife-exercise-pill::before.
   ========================================================= */


/* =========================================================
   v2.8.37 — Unified personal hero + guided post-exercise next step
   Structural refinement only. Existing color, transparency, stamp, grid,
   typography, ad, quiz and footer systems remain the visual baseline.
   ========================================================= */

/* ---------- Local Üben navigation ----------
   The solid paper header already separates navigation from the graph-paper
   application surface. The active underline alone communicates location. */
.englife-ueben-app-nav {
    width: min(100%, var(--el-system-max));
    margin: 0 auto 24px;
    padding: 0;
    border: 0 !important;
}

.englife-ueben-app-nav__inner {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: stretch;
}

.englife-ueben-app-nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px 10px;
    color: var(--el-system-muted,#5B6470) !important;
    font-size: .88rem;
    line-height: 1.25;
    font-weight: 650;
    text-align: center;
    text-decoration: none !important;
}

.englife-ueben-app-nav__item.is-current {
    color: var(--el-green,#0E6633) !important;
    font-weight: 760;
}

.englife-ueben-app-nav__item.is-current::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 0;
    height: 2px;
    background: var(--el-green,#0E6633);
}

@media (hover:hover) and (pointer:fine) {
    a.englife-ueben-app-nav__item:hover {
        color: var(--el-green,#0E6633) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
}

.englife-ueben-app-nav__item:focus-visible {
    outline: 2px solid rgba(14,102,51,.48);
    outline-offset: -2px;
}

/* ---------- Logged-in Start ---------- */
.englife-ueben-member-start {
    width: min(100%, var(--el-system-max));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Next step + Lernstand are one hero object, not neighbouring sections. */
.englife-ueben-member-hero {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(270px,.9fr);
    align-items: stretch;
    min-width: 0;
    border: 1px solid var(--el-system-rule-soft);
    border-radius: 6px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}

.englife-ueben-member-hero.is-single {
    grid-template-columns: minmax(0,1fr);
}

.englife-ueben-member-hero__primary,
.englife-ueben-member-hero__progress {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
}

.englife-ueben-member-hero__progress {
    border-left: 1px solid var(--el-system-rule-soft);
}

.englife-ueben-member-hero .englife-ueben-section__head {
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    align-items: baseline !important;
}

.englife-ueben-member-hero .englife-ueben-section__head h2 {
    margin: 0 !important;
}

.englife-ueben-member-hero .englife-ueben-section__head h2::after {
    content: none !important;
    display: none !important;
}

.englife-ueben-member-hero__primary-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

/* The established series card supplies the actual progress language, while
   the hero itself supplies the grouping surface. Avoid a card inside a card. */
.englife-ueben-member-hero .englife-ueben-member-start__primary-card,
.englife-ueben-member-hero .englife-ueben-member-start__primary-card > .englife-ueben-series-card {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
}

.englife-ueben-member-hero .englife-ueben-member-start__primary-card > .englife-ueben-series-card {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-member-hero .englife-ueben-member-start__primary-card > .englife-ueben-series-card:hover {
        background: transparent !important;
        border-color: transparent !important;
    }
}

.englife-ueben-member-start__primary-exercise {
    grid-template-columns: 1fr !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.englife-ueben-member-start__primary-exercise > .englife-ueben-card--compact {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Lernstand uses one consistent number axis and fills the hero column instead
   of behaving like a separate centered dashboard. */
.englife-ueben-member-hero__progress .englife-ueben-progress__passport {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3,minmax(52px,1fr)) !important;
    align-content: stretch;
    flex: 1 1 auto;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport::before,
.englife-ueben-member-hero__progress .englife-ueben-progress__passport::after {
    content: none !important;
    display: none !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport-item,
.englife-ueben-member-hero__progress .englife-ueben-progress__passport-item:first-child,
.englife-ueben-member-hero__progress .englife-ueben-progress__passport-item:last-child {
    display: grid !important;
    grid-template-columns: 48px minmax(0,1fr) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--el-system-rule-soft) !important;
    background: transparent !important;
    text-align: left !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport-item:last-child {
    border-bottom: 0 !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport-item::after {
    content: none !important;
    display: none !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport-value {
    width: 48px;
    justify-self: end;
    text-align: right !important;
}

.englife-ueben-member-hero__progress .englife-ueben-progress__passport-copy,
.englife-ueben-member-hero__progress .englife-ueben-progress__passport-label,
.englife-ueben-member-hero__progress .englife-ueben-progress__passport-meta {
    justify-self: stretch;
    text-align: left !important;
}

/* Landing ad is independent of the hero geometry. When disabled there is no
   element and therefore no reserved space. */
.englife-ueben-member-start__ad {
    width: 100%;
    margin: 0 !important;
}

/* Up to three good recommendations read as a recommendation set, not a binary
   back/forward choice. Two and one items still expand naturally. */
.englife-ueben-library .englife-ueben-member-start__secondary {
    width: 100%;
    /* The grey shared footer already separates the end of Start.
       The generic .englife-ueben-group terminal border is redundant here. */
    padding-bottom: 0;
    border-bottom: 0;
}

.englife-ueben-member-start__secondary .englife-exercise-index {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}

.englife-ueben-member-start__secondary .englife-exercise-index:not(:has(> .englife-ueben-card--compact:nth-child(2))) {
    grid-template-columns: 1fr !important;
}

.englife-ueben-member-start__secondary .englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)) {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

.englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact,
.englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:nth-child(odd),
.englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:nth-child(even) {
    border-right: 1px solid var(--el-system-rule-soft) !important;
    border-bottom: 0 !important;
}

.englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:last-child {
    border-right: 0 !important;
}

/* ---------- Exercise pre-task controls ---------- */
body.englife-generated-exercise-page .englife-exercise-path__action--explanation {
    min-height: 32px;
    padding: 4px 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--el-green,#0E6633) !important;
}

@media (hover:hover) and (pointer:fine) {
    body.englife-generated-exercise-page .englife-exercise-path__action--explanation:hover {
        border: 0 !important;
        background: transparent !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }
}

/* ---------- Unified post-exercise decision unit ---------- */
body.englife-generated-exercise-page .englife-exercise-navigation--guided {
    width: min(100%, var(--el-exercise-content-max));
    margin: 28px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.englife-exercise-next-unit {
    width: 100%;
    border: 1px solid var(--el-system-rule-soft);
    border-radius: 6px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}

.englife-exercise-next-unit__heading {
    margin: 0 !important;
    padding: 16px 20px 8px;
    color: var(--el-system-text,#262B33);
    font-size: 1.08rem;
    line-height: 1.3;
    font-weight: 760;
}

.englife-exercise-next-unit__primary {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
        "context action"
        "title action"
        "meta action";
    align-items: center;
    gap: 4px 18px;
    min-width: 0;
    padding: 12px 20px 18px;
    color: var(--el-system-text,#262B33) !important;
    text-decoration: none !important;
}

.englife-exercise-next-unit__context {
    grid-area: context;
    color: var(--el-system-muted,#5B6470);
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
}

.englife-exercise-next-unit__title {
    grid-area: title;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.englife-exercise-next-unit__meta {
    grid-area: meta;
    color: var(--el-system-muted,#5B6470);
    font-size: .8rem;
    line-height: 1.35;
}

.englife-exercise-next-unit__action {
    grid-area: action;
    align-self: center;
    color: var(--el-green,#0E6633);
    font-size: .88rem;
    font-weight: 760;
    white-space: nowrap;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-next-unit__primary:hover {
        background: rgba(255,255,255,.34);
    }
    .englife-exercise-next-unit__primary:hover .englife-exercise-next-unit__title,
    .englife-exercise-next-unit__primary:hover .englife-exercise-next-unit__action {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.englife-exercise-next-unit__primary:focus-visible {
    outline: 2px solid rgba(14,102,51,.48);
    outline-offset: -3px;
}

.englife-exercise-next-unit__alternatives {
    border-top: 1px solid var(--el-system-rule-soft);
}

.englife-exercise-next-unit__alternatives > h3 {
    margin: 0 !important;
    padding: 13px 20px 8px;
    font-size: .88rem !important;
    line-height: 1.35 !important;
    font-weight: 720 !important;
    color: var(--el-system-text,#262B33) !important;
}

.englife-exercise-next-alternatives {
    display: grid;
    grid-template-columns: 1fr;
}

.englife-exercise-next-alternatives > .englife-ueben-card--compact {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 58px !important;
    grid-template-areas:
        "meta stamp"
        "title stamp" !important;
    align-items: center !important;
    column-gap: 14px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 0 !important;
    border-top: 1px solid var(--el-system-rule-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.englife-exercise-next-alternatives > .englife-ueben-card--compact:not(.englife-ueben-card--has-progress) {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
        "meta"
        "title" !important;
}

.englife-exercise-next-alternatives .englife-ueben-card__badges {
    grid-area: meta;
    margin: 0 0 5px !important;
    overflow: visible !important;
}

.englife-exercise-next-alternatives h4 {
    grid-area: title;
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
}

.englife-exercise-next-alternatives .englife-ueben-card__stamp {
    grid-area: stamp;
    position: relative !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
}

.englife-exercise-next-alternatives .englife-ueben-card--compact::before,
.englife-exercise-next-alternatives .englife-ueben-card__task-icon,
.englife-exercise-next-alternatives .englife-ueben-card__footer {
    content: none !important;
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-next-alternatives > .englife-ueben-card--compact:hover {
        background: rgba(255,255,255,.34) !important;
    }
}

/* ---------- Responsive hierarchy ---------- */
@media (max-width:900px) {
    .englife-ueben-member-hero {
        grid-template-columns: minmax(0,1.45fr) minmax(240px,.9fr);
    }

    .englife-ueben-member-start__secondary .englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)) {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .englife-ueben-member-start__secondary .englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(2) {
        border-right: 0 !important;
    }

    .englife-ueben-member-start__secondary .englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)) > .englife-ueben-card--compact:nth-child(-n+2) {
        border-bottom: 1px solid var(--el-system-rule-soft) !important;
    }
}

@media (max-width:720px) {
    .englife-ueben-app-nav {
        margin-bottom: 20px;
    }

    .englife-ueben-app-nav__item {
        min-height: 48px;
        padding: 7px 5px 8px;
        font-size: .76rem;
    }

    .englife-ueben-member-start {
        gap: 24px;
    }

    .englife-ueben-member-hero,
    .englife-ueben-member-hero.has-progress,
    .englife-ueben-member-hero.is-single {
        grid-template-columns: 1fr;
    }

    .englife-ueben-member-hero__primary,
    .englife-ueben-member-hero__progress {
        padding: 16px 14px;
    }

    .englife-ueben-member-hero__progress {
        border-left: 0;
        border-top: 1px solid var(--el-system-rule-soft);
    }

    .englife-ueben-member-start__secondary .englife-exercise-index,
    .englife-ueben-member-start__secondary .englife-exercise-index:has(> .englife-ueben-card--compact:nth-child(3)),
    .englife-ueben-member-start__secondary .englife-exercise-index:not(:has(> .englife-ueben-card--compact:nth-child(2))) {
        grid-template-columns: 1fr !important;
    }

    .englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact,
    .englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:nth-child(odd),
    .englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:nth-child(even) {
        border-right: 0 !important;
        border-bottom: 1px solid var(--el-system-rule-soft) !important;
    }

    .englife-ueben-member-start__secondary .englife-exercise-index > .englife-ueben-card--compact:last-child {
        border-bottom: 0 !important;
    }

    body.englife-generated-exercise-page .englife-exercise-path {
        grid-template-columns: minmax(0,1fr) auto !important;
        align-items: center;
        gap: 8px 12px;
    }

    body.englife-generated-exercise-page .englife-exercise-path__actions {
        display: flex !important;
        width: auto !important;
        justify-content: flex-end;
    }

    .englife-exercise-next-unit__heading {
        padding: 14px 14px 7px;
    }

    .englife-exercise-next-unit__primary {
        grid-template-columns: 1fr;
        grid-template-areas:
            "context"
            "title"
            "meta"
            "action";
        gap: 4px;
        padding: 11px 14px 16px;
    }

    .englife-exercise-next-unit__action {
        justify-self: start;
        margin-top: 6px;
    }

    .englife-exercise-next-unit__alternatives > h3 {
        padding: 12px 14px 7px;
    }

    .englife-exercise-next-alternatives > .englife-ueben-card--compact {
        min-height: 84px !important;
        padding: 14px !important;
    }

    .englife-exercise-next-alternatives .englife-ueben-card__badges {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 3px 5px !important;
        margin: 0 0 6px !important;
        overflow: visible !important;
    }
}

@media (max-width:420px) {
    .englife-ueben-app-nav__item {
        font-size: .72rem;
    }

    body.englife-generated-exercise-page .englife-exercise-path {
        grid-template-columns: 1fr !important;
    }

    body.englife-generated-exercise-page .englife-exercise-path__actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   v2.8.38 — EXERCISE NEXT-STEP HERO + PAGE-SCOPED MOBILE AD
   Structural refinement only. Existing visual tokens remain canonical.
   ========================================================= */

body.englife-generated-exercise-page .englife-exercise-navigation--guided {
    width: min(100%, var(--el-system-max));
    margin: 28px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* One decision surface, matching the structural language of the /ueben hero. */
.englife-exercise-next-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr);
    width: 100%;
    border: 1px solid var(--el-system-rule-soft);
    border-radius: 6px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}

.englife-exercise-next-hero.is-single {
    grid-template-columns: 1fr;
}

.englife-exercise-next-hero__route,
.englife-exercise-next-hero__alternatives {
    min-width: 0;
    padding: 18px 20px;
}

.englife-exercise-next-hero__alternatives {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--el-system-rule-soft);
}

.englife-exercise-next-hero__route > h2,
.englife-exercise-next-hero__alternatives > h3 {
    margin: 0 0 12px !important;
    color: var(--el-system-text,#262B33) !important;
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    font-weight: 760 !important;
}

.englife-exercise-next-hero__context {
    margin: -4px 0 12px !important;
    color: var(--el-system-muted,#5B6470);
    font-size: .78rem;
    line-height: 1.35;
    font-weight: 650;
}

/* The established series card supplies the travel path. The hero supplies the
   containing surface, so avoid a card-inside-card treatment. */
.englife-exercise-next-hero__series,
.englife-exercise-next-hero__series > .englife-ueben-series-card {
    width: 100%;
    max-width: none;
}

.englife-exercise-next-hero__series > .englife-ueben-series-card {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-next-hero__series > .englife-ueben-series-card:hover {
        border-color: transparent !important;
        background: transparent !important;
    }
}

.englife-exercise-next-hero__fallback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 84px;
    color: var(--el-system-text,#262B33) !important;
    text-decoration: none !important;
}

.englife-exercise-next-hero__fallback > span {
    flex: 0 0 auto;
    color: var(--el-green,#0E6633);
    font-size: .86rem;
    font-weight: 760;
}

.englife-exercise-next-hero__alternative-list {
    display: grid;
    grid-template-rows: repeat(2, minmax(0,1fr));
    flex: 1 1 auto;
    min-height: 0;
}

/* Two genuinely horizontal exercise rows in the right column. */
.englife-exercise-next-hero__alternative-list > .englife-ueben-card--compact {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 58px !important;
    grid-template-areas:
        "meta stamp"
        "title stamp" !important;
    align-items: center !important;
    column-gap: 14px !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.englife-exercise-next-hero__alternative-list > .englife-ueben-card--compact + .englife-ueben-card--compact {
    border-top: 1px solid var(--el-system-rule-soft) !important;
}

.englife-exercise-next-hero__alternative-list > .englife-ueben-card--compact:not(.englife-ueben-card--has-progress) {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
        "meta"
        "title" !important;
}

.englife-exercise-next-hero__alternative-list .englife-ueben-card__badges {
    grid-area: meta;
    display: flex !important;
    flex-wrap: wrap;
    gap: 3px 5px;
    margin: 0 0 6px !important;
    overflow: visible !important;
}

.englife-exercise-next-hero__alternative-list h4 {
    grid-area: title;
    margin: 0 !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
}

.englife-exercise-next-hero__alternative-list .englife-ueben-card__stamp {
    grid-area: stamp;
    position: relative !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
}

.englife-exercise-next-hero__alternative-list .englife-ueben-card--compact::before,
.englife-exercise-next-hero__alternative-list .englife-ueben-card__task-icon,
.englife-exercise-next-hero__alternative-list .englife-ueben-card__footer {
    content: none !important;
    display: none !important;
}

@media (hover:hover) and (pointer:fine) {
    .englife-exercise-next-hero__alternative-list > .englife-ueben-card--compact:hover {
        background: rgba(255,255,255,.30) !important;
    }
}

@media (max-width:760px) {
    .englife-exercise-next-hero,
    .englife-exercise-next-hero.is-single {
        grid-template-columns: 1fr;
    }

    .englife-exercise-next-hero__route,
    .englife-exercise-next-hero__alternatives {
        padding: 16px 14px;
    }

    .englife-exercise-next-hero__alternatives {
        border-left: 0;
        border-top: 1px solid var(--el-system-rule-soft);
    }

    .englife-exercise-next-hero__alternative-list > .englife-ueben-card--compact {
        min-height: 86px !important;
        padding: 13px 0 !important;
    }
}

/* =========================================================
   v2.8.44 — LOGGED-OUT START FEATURED EXERCISE
   Show the actual recommendation before asking the visitor to commit.
   ========================================================= */

.englife-ueben-guest-quick-start {
    width: min(100%, var(--el-system-max));
    margin: 0 auto 20px;
    padding: 22px 24px;
    border: 1px solid var(--el-system-rule-soft, #D4D8DF);
    border-radius: 8px;
    background: rgba(255,255,255,.67);
}

.englife-ueben-guest-quick-start__eyebrow {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--el-system-green, #0E6633);
    font-size: .73rem;
    line-height: 1.35;
    font-weight: 720;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.englife-ueben-guest-featured-exercise {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(190px,220px);
    gap: 24px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.englife-ueben-guest-featured-exercise__content {
    min-width: 0;
}

.englife-ueben-guest-featured-exercise__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 9px;
}

.englife-ueben-guest-featured-exercise__meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid var(--el-system-rule-soft, #D4D8DF);
    border-radius: 999px;
    background: rgba(243,244,246,.85);
    color: var(--el-system-muted, #5B6470);
    font-size: .76rem;
    line-height: 1.15;
    font-weight: 680;
}

.englife-ueben-guest-featured-exercise h2 {
    margin: 0 !important;
    font-size: clamp(1.12rem, 1.8vw, 1.34rem) !important;
    line-height: 1.28 !important;
    font-weight: 780 !important;
}

.englife-ueben-guest-featured-exercise h2 a {
    color: var(--el-system-ink, #262B33) !important;
    text-decoration: none !important;
}

.englife-ueben-guest-featured-exercise__details {
    margin: 8px 0 0 !important;
    color: var(--el-system-muted, #5B6470) !important;
    font-size: .88rem;
    line-height: 1.4;
}

.englife-ueben-guest-featured-exercise__actions {
    display: grid;
    gap: 9px;
    align-self: center;
}

.englife-ueben-guest-featured-exercise__primary,
.englife-ueben-guest-featured-exercise__alternate button {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 5px;
    font: inherit;
    font-size: .88rem;
    line-height: 1.2;
    font-weight: 760;
    text-align: center;
    cursor: pointer;
}

.englife-ueben-guest-featured-exercise__primary {
    border: 1px solid var(--el-system-green, #0E6633);
    background: var(--el-system-green, #0E6633);
    color: #fff !important;
    text-decoration: none !important;
}

.englife-ueben-guest-featured-exercise__alternate {
    margin: 0;
}

.englife-ueben-guest-featured-exercise__alternate button {
    border: 1px solid var(--el-system-rule, #D4D8DF);
    background: rgba(255,255,255,.30);
    color: var(--el-system-ink, #262B33);
}

.englife-ueben-guest-search-shortcut {
    width: min(100%, var(--el-system-max));
    min-height: 86px;
    margin: 0 auto 26px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--el-system-rule-soft, #D4D8DF);
    border-radius: 8px;
    background: rgba(255,255,255,.68);
    color: var(--el-system-ink, #262B33) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.englife-ueben-guest-search-shortcut__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.englife-ueben-guest-search-shortcut__title {
    display: block;
    margin: 0 !important;
    color: var(--el-system-ink, #262B33) !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 760 !important;
}

.englife-ueben-guest-search-shortcut__description {
    color: var(--el-system-muted, #5B6470);
    font-size: .84rem;
    line-height: 1.4;
}

.englife-ueben-guest-search-shortcut__action {
    flex: 0 0 auto;
    color: var(--el-system-green, #0E6633);
    font-size: .9rem;
    font-weight: 760;
    line-height: 1.3;
    white-space: nowrap;
}

@media (hover:hover) and (pointer:fine) {
    .englife-ueben-guest-featured-exercise h2 a:hover {
        color: var(--el-system-green, #0E6633) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    .englife-ueben-guest-search-shortcut:hover {
        background: rgba(255,255,255,.91) !important;
        border-color: var(--el-system-rule, #D4D8DF);
    }

    .englife-ueben-guest-search-shortcut:hover .englife-ueben-guest-search-shortcut__action {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .englife-ueben-guest-featured-exercise__primary:hover {
        background: var(--el-green-hover, #0A542A);
        border-color: var(--el-green-hover, #0A542A);
    }

    .englife-ueben-guest-featured-exercise__alternate button:hover {
        background: rgba(255,255,255,.78) !important;
    }

}

.englife-ueben-guest-featured-exercise__primary:focus-visible,
.englife-ueben-guest-featured-exercise__alternate button:focus-visible,
.englife-ueben-guest-search-shortcut:focus-visible {
    outline: 2px solid rgba(14,102,51,.48);
    outline-offset: 3px;
}

@media (max-width:720px) {
    .englife-ueben-guest-quick-start {
        margin-bottom: 14px;
        padding: 16px 14px;
    }

    .englife-ueben-guest-featured-exercise {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0;
    }

    .englife-ueben-guest-featured-exercise__actions {
        grid-template-columns: 1fr;
    }

    .englife-ueben-guest-featured-exercise__primary,
    .englife-ueben-guest-featured-exercise__alternate button {
        min-height: 46px;
    }

    .englife-ueben-guest-search-shortcut {
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding: 16px 14px;
        gap: 12px;
    }


}



/* =========================================================
   ENGLIFE EXPLANATIONS — SHARED DESIGN SYSTEM v2.8.54
   The four Gutenberg articles use .el-explain. Component styles live
   here, not in individual Gutenberg Custom CSS fields.
   Page titles, body type and content width follow the Site Editor.
   ========================================================= */
.el-explain {
  --el-text: #262B33;
  --el-muted: #5B6470;
  --el-green: #0E6633;
  --el-green-soft: #F0F5F1;
  --el-yellow: #FFD357;
  --el-yellow-soft: #FFF9E9;
  --el-sand: #D4D8DF;
  --el-soft: #F3F4F6;
  --el-white: #FFFFFF;
  --el-border: #D4D8DF;
  --el-blue: #0E6633; /* Compatibility token for specialized examples. */
  --el-blue-soft: #F3F4F6;
  --el-warn: #754B16;
  --el-warn-soft: #FFF9E9;
  --el-error: #8A3F3F;
  --el-error-soft: #FAEEEE;
  --el-bg: #FFFFFF;

  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 760px);
  margin-inline: auto;
  color: var(--el-text);
  /* Intentionally no font-size or line-height: inherited from WordPress. */
}
.el-explain *, .el-explain *::before, .el-explain *::after { box-sizing: border-box; }
.el-explain :is(h2,h3) { color: var(--el-text); }
.el-explain h2 { margin: 0 0 14px; }
.el-explain h3 { margin: 0 0 10px; }
.el-explain p { margin: 0 0 14px; }
.el-explain .el-explain__section { margin-top: 44px; }
.el-explain .el-explain__eyebrow {
  margin: 0 0 6px;
  color: var(--el-muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.el-explain .el-explain__lead {
  margin-bottom: 22px;
  max-width: 68ch;
}
/* The one clear region boundary is the initial rule overview. */
.el-explain .el-explain__quick {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: #FFF;
}
/* Shared instructional emphasis. Use yellow sparingly and consistently. */
.el-explain .el-explain__memory {
  display: grid;
  gap: 5px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--el-yellow);
  border-radius: 0 8px 8px 0;
  background: var(--el-yellow-soft);
}
.el-explain .el-explain__memory--compact { margin-top: 14px; }
.el-explain .el-explain__tip {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 8px;
  background: var(--el-soft);
  color: var(--el-text);
}
.el-explain mark {
  padding: 1px 3px;
  border-radius: 2px;
  background: #FFF0B4;
  color: var(--el-text);
}
.el-explain .el-explain__text-link {
  color: var(--el-green);
  font-weight: 650;
  text-underline-offset: 3px;
}
/* FAQs: one shared accordion, separated by spacing and quiet row dividers.
   We avoid the previous card-within-card system. */
.el-explain .el-explain__faq details {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--el-border);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.el-explain .el-explain__faq details:first-of-type { border-top: 1px solid var(--el-border); }
.el-explain .el-explain__faq summary {
  position: relative;
  display: block;
  padding: 17px 40px 17px 0;
  cursor: pointer;
  font-weight: 650;
  line-height: 1.45;
  list-style: none;
}
.el-explain .el-explain__faq summary::-webkit-details-marker { display: none; }
.el-explain .el-explain__faq summary::marker { content: ''; }
.el-explain .el-explain__faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  transform: translateY(-50%);
  color: var(--el-green);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.el-explain .el-explain__faq details[open] summary::after { content: '\2212'; }
.el-explain .el-explain__faq summary:hover { color: var(--el-green); }
.el-explain .el-explain__faq summary:focus-visible {
  outline: 3px solid var(--el-green);
  outline-offset: 3px;
  border-radius: 3px;
}
.el-explain .el-explain__faq-answer {
  padding: 0 0 18px;
}
.el-explain .el-explain__faq-answer > :last-child { margin-bottom: 0; }
/* Common diagram primitives, compatible with existing page HTML. */
.el-explain :is(.el-be-rule-card,.el-have-rule-card,.el-dd-rule-card) {
  border-color: var(--el-border);
  border-radius: 9px;
  background: var(--el-soft);
}
.el-explain :is(.el-be-rule-card__verb,.el-have-rule-card__verb,.el-dd-rule-card__verb) { color: var(--el-green); }
.el-explain :is(.el-be-example,.el-have-example,.el-dd-example,.el-qw-example,.el-qw-faq-example) {
  margin: 10px 0 14px;
  padding: 10px 13px;
  border-left: 3px solid var(--el-green);
  border-radius: 0 6px 6px 0;
  background: var(--el-soft);
  font-weight: inherit;
}
.el-explain :is(.el-be-compare,.el-have-compare,.el-dd-compare,.el-qw-subject-compare,.el-qw-mini-compare) > div {
  border-color: var(--el-border);
  background: var(--el-soft);
}
.el-explain :is(.el-be-shortforms,.el-have-shortforms,.el-dd-longforms) span { border-bottom-color: var(--el-border); }
/* Avoid repeating a decorative line at the foot of the explanation. */
@media (max-width: 680px) {
  .el-explain .el-explain__section { margin-top: 34px; }
  .el-explain .el-explain__quick { padding: 18px; }
  .el-explain .el-explain__faq summary { padding-block: 15px; }
}


/* am / is / are: special grammar diagrams only. Shared text/FAQ/rules above. */
#englife-explanation-be .el-be-rule-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin: 20px 0;
}
#englife-explanation-be .el-be-rule-card {
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid var(--el-border);
  border-radius: 9px;
  background: var(--el-soft);
  text-align: center;
}
#englife-explanation-be :is(.el-be-rule-card__subject,.el-be-rule-card__verb,.el-be-rule-card__example) { display: block; }
#englife-explanation-be .el-be-rule-card__subject { margin-bottom: 4px; font-weight: 700; }
#englife-explanation-be .el-be-rule-card__verb { margin: 2px 0 7px; color: var(--el-green); font-size: 1.55rem; font-weight: 750; line-height: 1.1; }
#englife-explanation-be .el-be-rule-card__example { color: var(--el-muted); font-size: .9em; }
#englife-explanation-be .el-be-conversion-list { display: grid; gap: 8px; margin: 18px 0; }
#englife-explanation-be .el-be-conversion {
  display: grid; grid-template-columns: minmax(130px,1.8fr) auto 1fr auto .7fr;
  align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--el-border);
  background: var(--el-white);
}
#englife-explanation-be .el-be-conversion__original { font-weight: 650; }
#englife-explanation-be .el-be-conversion__arrow { color: var(--el-muted); }
#englife-explanation-be .el-be-conversion strong { color: var(--el-green); }
#englife-explanation-be .el-be-patterns { display: grid; gap: 9px; }
#englife-explanation-be .el-be-pattern {
  display: grid; grid-template-columns: 120px 1fr; align-items: center;
  gap: 14px; padding: 11px 13px; border: 1px solid var(--el-border);
  border-radius: 8px; background: var(--el-white);
}
#englife-explanation-be .el-be-pattern__label { color: var(--el-muted); font-size: .9em; font-weight: 650; }
#englife-explanation-be .el-be-shortforms {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 18px; margin: 16px 0;
}
#englife-explanation-be .el-be-shortforms span { padding-bottom: 5px; border-bottom: 1px solid var(--el-border); }
#englife-explanation-be .el-be-inline-note {
  margin-top: 14px; padding: 11px 13px; border-radius: 8px; background: var(--el-soft);
}
#englife-explanation-be .el-be-compare {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px; margin: 14px 0;
}
#englife-explanation-be .el-be-compare > div { padding: 13px; border: 1px solid var(--el-border); border-radius: 8px; background: var(--el-soft); }
#englife-explanation-be :is(.el-be-compare strong,.el-be-compare small,.el-be-compare__label) { display: block; }
#englife-explanation-be .el-be-compare__label { margin-bottom: 5px; color: var(--el-muted); font-size: .8em; font-weight: 700; text-transform: uppercase; }
#englife-explanation-be .el-be-compare small { margin-top: 3px; color: var(--el-muted); }
#englife-explanation-be .el-be-check-list { display: grid; gap: 9px; }
#englife-explanation-be .el-be-check-list > div {
  display: grid; grid-template-columns: 22px minmax(0,1fr) minmax(0,1fr);
  align-items: center; gap: 10px; padding: 11px 13px;
  border-bottom: 1px solid var(--el-border);
}
#englife-explanation-be .el-be-check-list > div > span { color: var(--el-error); font-weight: 750; }
#englife-explanation-be .el-be-check-list del { color: var(--el-muted); }
#englife-explanation-be .el-be-check-list strong { color: var(--el-green); }
@media (max-width:680px) {
  #englife-explanation-be .el-be-rule-grid { grid-template-columns:1fr; }
  #englife-explanation-be .el-be-rule-card { display:grid; grid-template-columns:1.1fr .7fr 1.6fr; gap:8px; align-items:center; text-align:left; }
  #englife-explanation-be .el-be-rule-card__verb { margin:0; text-align:center; }
  #englife-explanation-be .el-be-rule-card__example { text-align:right; }
  #englife-explanation-be .el-be-conversion { grid-template-columns:minmax(0,1.6fr) auto .8fr auto .6fr; gap:6px; font-size:.94em; }
  #englife-explanation-be .el-be-pattern { grid-template-columns:1fr; gap:3px; }
  #englife-explanation-be .el-be-shortforms, #englife-explanation-be .el-be-compare { grid-template-columns:1fr; }
  #englife-explanation-be .el-be-check-list > div { grid-template-columns:22px 1fr; }
  #englife-explanation-be .el-be-check-list strong { grid-column:2; }
}


/* have: unique teaching diagrams; common styles are in the shared system. */
#englife-explanation-have .el-have-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
#englife-explanation-have .el-have-rule-card {
  min-width: 0;
  padding: 17px 14px;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  background: var(--el-soft);
  text-align: center;
}
#englife-explanation-have .el-have-rule-card__subject,
#englife-explanation-have .el-have-rule-card__verb,
#englife-explanation-have .el-have-rule-card__example {
  display: block;
}
#englife-explanation-have .el-have-rule-card__subject {
  margin-bottom: 4px;
  font-weight: 700;
}
#englife-explanation-have .el-have-rule-card__verb {
  margin: 2px 0 7px;
  color: var(--el-green);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
}
#englife-explanation-have .el-have-rule-card__example {
  color: var(--el-muted);
  font-size: 0.9em;
}
#englife-explanation-have .el-have-conversion-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
#englife-explanation-have .el-have-conversion {
  display: grid;
  grid-template-columns: minmax(130px, 1.8fr) auto 1fr auto 0.7fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-have .el-have-conversion__original {
  font-weight: 650;
}
#englife-explanation-have .el-have-conversion__arrow {
  color: var(--el-muted);
}
#englife-explanation-have .el-have-conversion strong {
  color: var(--el-green);
}
#englife-explanation-have .el-have-meaning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
#englife-explanation-have .el-have-meaning-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--el-border);
  border-radius: 11px;
  background: var(--el-white);
}
#englife-explanation-have .el-have-meaning-card__english {
  font-weight: 700;
}
#englife-explanation-have .el-have-meaning-card__german {
  color: var(--el-muted);
  font-size: 0.92em;
}
#englife-explanation-have .el-have-patterns {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
#englife-explanation-have .el-have-pattern {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-have .el-have-pattern__label {
  color: var(--el-muted);
  font-size: 0.9em;
  font-weight: 650;
}
#englife-explanation-have .el-have-s-transfer {
  display: grid;
  grid-template-columns: 1fr auto 1.4fr;
  align-items: center;
  gap: 14px;
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  background: var(--el-soft);
}
#englife-explanation-have .el-have-s-transfer__start,
#englife-explanation-have .el-have-s-transfer__end {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}
#englife-explanation-have .el-have-s-transfer__start small,
#englife-explanation-have .el-have-s-transfer__end small {
  width: 100%;
  color: var(--el-muted);
  font-size: 0.78em;
  text-align: center;
}
#englife-explanation-have .el-have-s-transfer__word {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
#englife-explanation-have .el-have-s-transfer__s {
  display: inline-block;
  min-width: 0.72em;
  margin-left: 1px;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--el-green-soft);
  color: var(--el-green);
  text-align: center;
}
#englife-explanation-have .el-have-s-transfer__plus,
#englife-explanation-have .el-have-s-transfer__arrow {
  color: var(--el-muted);
  font-size: 1.2rem;
  font-weight: 700;
}
#englife-explanation-have .el-have-got-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--el-white);
}
#englife-explanation-have .el-have-got-grid > div {
  min-width: 0;
  padding: 11px 13px;
  border-bottom: 1px solid var(--el-border);
}
#englife-explanation-have .el-have-got-grid > div:nth-child(odd) {
  border-right: 1px solid var(--el-border);
}
#englife-explanation-have .el-have-got-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}
#englife-explanation-have .el-have-got-grid__head {
  background: var(--el-green-soft);
  color: var(--el-green);
  font-weight: 800;
}
#englife-explanation-have .el-have-shortforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 16px 0 20px;
}
#englife-explanation-have .el-have-shortforms span {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--el-sand);
}
#englife-explanation-have .el-have-warning {
  padding: 16px;
  border: 1px solid var(--el-border);
  border-radius: 13px;
  background: var(--el-warn-soft);
}
#englife-explanation-have .el-have-warning__title {
  margin-bottom: 12px;
  color: var(--el-warn);
  font-weight: 800;
}
#englife-explanation-have .el-have-warning__examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
#englife-explanation-have .el-have-warning__examples > div {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 3px 7px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(138, 90, 36, 0.2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
}
#englife-explanation-have .el-have-warning__examples small {
  grid-column: 2;
  color: var(--el-muted);
}
#englife-explanation-have .el-have-warning__wrong > span {
  color: var(--el-error);
  font-weight: 800;
}
#englife-explanation-have .el-have-warning p:last-child {
  margin-bottom: 0;
}
#englife-explanation-have .el-have-example {
  margin: 10px 0 14px;
  padding: 10px 13px;
  border-left: 3px solid var(--el-blue);
  background: var(--el-soft);
  font-size: 1.02em;
}
#englife-explanation-have .el-have-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
#englife-explanation-have .el-have-compare > div {
  padding: 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-soft);
}
#englife-explanation-have .el-have-compare strong,
#englife-explanation-have .el-have-compare small,
#englife-explanation-have .el-have-compare__label {
  display: block;
}
#englife-explanation-have .el-have-compare__label {
  margin-bottom: 5px;
  color: var(--el-muted);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
}
#englife-explanation-have .el-have-compare small {
  margin-top: 3px;
  color: var(--el-muted);
}
#englife-explanation-have .el-have-past-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0;
}
#englife-explanation-have .el-have-past-grid span {
  padding: 9px 8px;
  border: 1px solid var(--el-border);
  border-radius: 9px;
  background: var(--el-soft);
  text-align: center;
  font-weight: 650;
}
#englife-explanation-have .el-have-check-list {
  display: grid;
  gap: 9px;
}
#englife-explanation-have .el-have-check-list > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-have .el-have-check-list > div > span {
  color: var(--el-error);
  font-weight: 800;
}
#englife-explanation-have .el-have-check-list del {
  color: var(--el-muted);
}
#englife-explanation-have .el-have-check-list strong {
  color: var(--el-green);
}
@media (max-width: 680px) {#englife-explanation-have .el-have-rule-grid,
  #englife-explanation-have .el-have-meaning-grid,
  #englife-explanation-have .el-have-shortforms,
  #englife-explanation-have .el-have-compare {
    grid-template-columns: 1fr;
  }
#englife-explanation-have .el-have-rule-card {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 1.5fr;
    gap: 8px;
    align-items: center;
    text-align: left;
  }
#englife-explanation-have .el-have-rule-card__verb {
    margin: 0;
    text-align: center;
  }
#englife-explanation-have .el-have-rule-card__example {
    text-align: right;
  }
#englife-explanation-have .el-have-conversion {
    grid-template-columns: minmax(0, 1.6fr) auto 0.8fr auto 0.6fr;
    gap: 6px;
    font-size: 0.94em;
  }
#englife-explanation-have .el-have-pattern {
    grid-template-columns: 1fr;
    gap: 3px;
  }
#englife-explanation-have .el-have-s-transfer {
    grid-template-columns: 1fr;
    gap: 8px;
  }
#englife-explanation-have .el-have-s-transfer__arrow {
    transform: rotate(90deg);
    text-align: center;
  }
#englife-explanation-have .el-have-warning__examples {
    grid-template-columns: 1fr;
  }
#englife-explanation-have .el-have-past-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
#englife-explanation-have .el-have-past-grid span:last-child {
    grid-column: 1 / -1;
  }
#englife-explanation-have .el-have-check-list > div {
    grid-template-columns: 22px 1fr;
  }
#englife-explanation-have .el-have-check-list strong {
    grid-column: 2;
  }
}


/* dont: unique teaching diagrams; common styles are in the shared system. */
#englife-explanation-dont-doesnt .el-dd-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
#englife-explanation-dont-doesnt .el-dd-rule-card {
  min-width: 0;
  padding: 17px 15px;
  border: 1px solid var(--el-border);
  border-radius: 14px;
  background: var(--el-soft);
  text-align: center;
}
#englife-explanation-dont-doesnt .el-dd-rule-card__subject,
#englife-explanation-dont-doesnt .el-dd-rule-card__verb,
#englife-explanation-dont-doesnt .el-dd-rule-card__example {
  display: block;
}
#englife-explanation-dont-doesnt .el-dd-rule-card__subject {
  margin-bottom: 4px;
  font-weight: 700;
}
#englife-explanation-dont-doesnt .el-dd-rule-card__verb {
  margin: 2px 0 7px;
  color: var(--el-green);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
}
#englife-explanation-dont-doesnt .el-dd-rule-card__example {
  color: var(--el-muted);
  font-size: 0.9em;
}
#englife-explanation-dont-doesnt .el-dd-conversion-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}
#englife-explanation-dont-doesnt .el-dd-conversion {
  display: grid;
  grid-template-columns: minmax(130px, 1.8fr) auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-dont-doesnt .el-dd-conversion__original {
  font-weight: 650;
}
#englife-explanation-dont-doesnt .el-dd-conversion__arrow {
  color: var(--el-muted);
}
#englife-explanation-dont-doesnt .el-dd-conversion strong {
  color: var(--el-green);
}
#englife-explanation-dont-doesnt .el-dd-pattern-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: var(--el-white);
  text-align: center;
}
#englife-explanation-dont-doesnt .el-dd-pattern-box__part {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--el-soft);
  font-weight: 700;
}
#englife-explanation-dont-doesnt .el-dd-pattern-box__part--highlight {
  background: var(--el-green-soft);
  color: var(--el-green);
}
#englife-explanation-dont-doesnt .el-dd-pattern-box__plus {
  color: var(--el-muted);
  font-weight: 800;
}
#englife-explanation-dont-doesnt .el-dd-example-list {
  display: grid;
  gap: 8px;
}
#englife-explanation-dont-doesnt .el-dd-example-list > div {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(95px, 0.7fr) minmax(0, 2fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-dont-doesnt .el-dd-example-list strong {
  color: var(--el-green);
}
#englife-explanation-dont-doesnt .el-dd-s-transfer {
  max-width: 610px;
  margin: 22px auto 18px;
  padding: 18px;
  border: 1px solid var(--el-border);
  border-radius: 16px;
  background: var(--el-white);
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--el-soft);
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__label {
  color: var(--el-muted);
  font-size: 0.9em;
  font-weight: 700;
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__row strong {
  font-size: 1.08em;
}
#englife-explanation-dont-doesnt .el-dd-s {
  display: inline-block;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--el-green-soft);
  color: var(--el-green);
  font-weight: 850;
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__move {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 5px 0;
  color: var(--el-green);
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__s {
  font-size: 1.05rem;
  font-weight: 850;
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__arrow {
  font-size: 1.3rem;
  line-height: 1;
}
#englife-explanation-dont-doesnt .el-dd-transform-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
#englife-explanation-dont-doesnt .el-dd-transform-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-dont-doesnt .el-dd-transform-list > div > span:nth-child(2) {
  color: var(--el-muted);
}
#englife-explanation-dont-doesnt .el-dd-transform-list strong {
  color: var(--el-green);
}
#englife-explanation-dont-doesnt .el-dd-example {
  margin: 10px 0 14px;
  padding: 10px 13px;
  border-left: 3px solid var(--el-blue);
  background: var(--el-soft);
  font-size: 1.02em;
}
#englife-explanation-dont-doesnt .el-dd-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
#englife-explanation-dont-doesnt .el-dd-compare > div {
  padding: 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-soft);
}
#englife-explanation-dont-doesnt .el-dd-compare strong,
#englife-explanation-dont-doesnt .el-dd-compare small,
#englife-explanation-dont-doesnt .el-dd-compare__label {
  display: block;
}
#englife-explanation-dont-doesnt .el-dd-compare__label {
  margin-bottom: 5px;
  color: var(--el-muted);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
}
#englife-explanation-dont-doesnt .el-dd-compare small {
  margin-top: 3px;
  color: var(--el-muted);
}
#englife-explanation-dont-doesnt .el-dd-longforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 14px 0;
}
#englife-explanation-dont-doesnt .el-dd-longforms span {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--el-sand);
}
#englife-explanation-dont-doesnt .el-dd-check-list {
  display: grid;
  gap: 9px;
}
#englife-explanation-dont-doesnt .el-dd-check-list > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-dont-doesnt .el-dd-check-list > div > span {
  color: var(--el-red);
  font-weight: 800;
}
#englife-explanation-dont-doesnt .el-dd-check-list del {
  color: var(--el-muted);
}
#englife-explanation-dont-doesnt .el-dd-check-list strong {
  color: var(--el-green);
}
@media (max-width: 680px) {#englife-explanation-dont-doesnt .el-dd-rule-grid {
    grid-template-columns: 1fr;
  }
#englife-explanation-dont-doesnt .el-dd-rule-card {
    display: grid;
    grid-template-columns: 1.25fr 0.8fr 1.55fr;
    gap: 8px;
    align-items: center;
    text-align: left;
  }
#englife-explanation-dont-doesnt .el-dd-rule-card__verb {
    margin: 0;
    text-align: center;
  }
#englife-explanation-dont-doesnt .el-dd-rule-card__example {
    text-align: right;
  }
#englife-explanation-dont-doesnt .el-dd-conversion {
    grid-template-columns: minmax(0, 1.5fr) auto 0.7fr auto 0.9fr;
    gap: 6px;
    font-size: 0.93em;
  }
#englife-explanation-dont-doesnt .el-dd-pattern-box {
    grid-template-columns: 1fr;
  }
#englife-explanation-dont-doesnt .el-dd-pattern-box__plus {
    line-height: 1;
  }
#englife-explanation-dont-doesnt .el-dd-example-list > div {
    grid-template-columns: minmax(72px, 0.8fr) minmax(86px, 0.8fr) minmax(0, 1.6fr);
    gap: 7px;
    font-size: 0.95em;
  }
#englife-explanation-dont-doesnt .el-dd-s-transfer__row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
#englife-explanation-dont-doesnt .el-dd-transform-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
#englife-explanation-dont-doesnt .el-dd-transform-list > div > span:nth-child(2) {
    transform: rotate(90deg);
    justify-self: start;
    margin-left: 5px;
  }
#englife-explanation-dont-doesnt .el-dd-compare {
    grid-template-columns: 1fr;
  }
#englife-explanation-dont-doesnt .el-dd-longforms {
    grid-template-columns: 1fr;
  }
#englife-explanation-dont-doesnt .el-dd-check-list > div {
    grid-template-columns: 22px 1fr;
  }
#englife-explanation-dont-doesnt .el-dd-check-list strong {
    grid-column: 2;
  }
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__row--positive {
  border-left: 3px solid var(--el-sand);
}
#englife-explanation-dont-doesnt .el-dd-s-transfer__row--negative {
  border-left: 3px solid var(--el-green);
}
#englife-explanation-dont-doesnt .el-explain__check {
  margin-bottom: 8px;
}


/* question: unique teaching diagrams; common styles are in the shared system. */
#englife-explanation-question-words .el-qw-table-wrap {
  width: 100%;
  margin: 20px 0;
  overflow-x: auto;
  border: 1px solid var(--el-border);
  border-radius: 13px;
  background: var(--el-white);
  -webkit-overflow-scrolling: touch;
}
#englife-explanation-question-words .el-qw-table-wrap:focus-visible {
  outline: 3px solid rgba(14, 102, 51, 0.22);
  outline-offset: 3px;
}
#englife-explanation-question-words .el-qw-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.95em;
}
#englife-explanation-question-words .el-qw-table th,
#englife-explanation-question-words .el-qw-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--el-border);
  text-align: left;
  vertical-align: top;
}
#englife-explanation-question-words .el-qw-table thead th {
  background: var(--el-soft);
  color: var(--el-text);
  font-size: 0.88em;
  font-weight: 800;
}
#englife-explanation-question-words .el-qw-table tbody th {
  color: var(--el-green);
  font-size: 1.07em;
  font-weight: 800;
}
#englife-explanation-question-words .el-qw-table tbody tr:nth-child(even) {
  background: var(--el-soft);
}
#englife-explanation-question-words .el-qw-table tbody tr:last-child th,
#englife-explanation-question-words .el-qw-table tbody tr:last-child td {
  border-bottom: 0;
}
#englife-explanation-question-words .el-qw-answer-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
#englife-explanation-question-words .el-qw-answer-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 30px minmax(80px, 0.7fr) minmax(120px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-white);
}
#englife-explanation-question-words .el-qw-answer-row strong {
  color: var(--el-green);
}
#englife-explanation-question-words .el-qw-answer-row small {
  color: var(--el-muted);
}
#englife-explanation-question-words .el-qw-arrow {
  color: var(--el-muted);
  text-align: center;
}
#englife-explanation-question-words .el-qw-pattern-list {
  display: grid;
  gap: 11px;
  margin: 18px 0;
}
#englife-explanation-question-words .el-qw-pattern {
  padding: 16px;
  border: 1px solid var(--el-border);
  border-radius: 13px;
  background: var(--el-white);
}
#englife-explanation-question-words .el-qw-pattern__label {
  display: block;
  margin-bottom: 10px;
  color: var(--el-green);
  font-weight: 800;
}
#englife-explanation-question-words .el-qw-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 9px;
  background: var(--el-blue-soft);
  font-size: 0.92em;
}
#englife-explanation-question-words .el-qw-formula > span {
  color: var(--el-muted);
}
#englife-explanation-question-words .el-qw-example,
#englife-explanation-question-words .el-qw-faq-example {
  margin: 8px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--el-blue);
  background: var(--el-soft);
  font-size: 1.01em;
  font-weight: 650;
}
#englife-explanation-question-words .el-qw-transform-list {
  display: grid;
  gap: 8px;
  margin: 15px 0 18px;
}
#englife-explanation-question-words .el-qw-transform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-soft);
}
#englife-explanation-question-words .el-qw-mini-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 15px 0 18px;
}
#englife-explanation-question-words .el-qw-mini-compare > div {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  padding: 11px 12px;
  border-radius: 10px;
}
#englife-explanation-question-words .el-qw-mini-compare__wrong {
  border: 1px solid rgba(138, 63, 63, 0.22);
  background: var(--el-error-soft);
}
#englife-explanation-question-words .el-qw-mini-compare__right {
  border: 1px solid rgba(14, 102, 51, 0.2);
  background: var(--el-green-soft);
}
#englife-explanation-question-words .el-qw-note {
  padding: 13px 15px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-soft);
  color: var(--el-muted);
  font-size: 0.92em;
}
#englife-explanation-question-words .el-qw-subject-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
#englife-explanation-question-words .el-qw-subject-compare > div {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: var(--el-soft);
}
#englife-explanation-question-words .el-qw-subject-compare__label {
  color: var(--el-muted);
  font-size: 0.82em;
  font-weight: 750;
  text-transform: uppercase;
}
#englife-explanation-question-words .el-qw-subject-compare small {
  color: var(--el-muted);
}
#englife-explanation-question-words .el-qw-error-list {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}
#englife-explanation-question-words .el-qw-error-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
  padding: 12px;
  border: 1px solid var(--el-border);
  border-radius: 12px;
  background: var(--el-warn-soft);
}
#englife-explanation-question-words .el-qw-error-pair__wrong,
#englife-explanation-question-words .el-qw-error-pair__right {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}
#englife-explanation-question-words .el-qw-error-pair__wrong > span:first-child {
  color: var(--el-error);
  font-weight: 800;
}
#englife-explanation-question-words .el-qw-error-pair__right > span:first-child {
  color: var(--el-green);
  font-weight: 800;
}
#englife-explanation-question-words .el-qw-error-pair small {
  grid-column: 1 / -1;
  color: var(--el-muted);
}
#englife-explanation-question-words .el-qw-faq-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
#englife-explanation-question-words .el-qw-faq-examples > div {
  padding: 13px;
  border: 1px solid var(--el-border);
  border-radius: 10px;
  background: var(--el-soft);
}
#englife-explanation-question-words .el-qw-faq-examples__label {
  display: block;
  margin-bottom: 5px;
  color: var(--el-muted);
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
}
#englife-explanation-question-words .el-qw-faq-examples strong,
#englife-explanation-question-words .el-qw-faq-examples small {
  display: block;
}
#englife-explanation-question-words .el-qw-faq-examples small {
  margin-top: 5px;
  color: var(--el-muted);
}
@media (max-width: 760px) {#englife-explanation-question-words .el-qw-subject-compare,
  #englife-explanation-question-words .el-qw-mini-compare,
  #englife-explanation-question-words .el-qw-faq-examples {
    grid-template-columns: 1fr;
  }
#englife-explanation-question-words .el-qw-answer-row {
    grid-template-columns: minmax(0, 1.4fr) 28px minmax(70px, 0.7fr);
  }
#englife-explanation-question-words .el-qw-answer-row small {
    grid-column: 1 / -1;
    padding-left: 0;
  }
#englife-explanation-question-words .el-qw-transform {
    grid-template-columns: 1fr;
  }
#englife-explanation-question-words .el-qw-transform .el-qw-arrow {
    transform: rotate(90deg);
  }
}
@media (max-width: 560px) {#englife-explanation-question-words .el-qw-error-pair {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   PRINT: Safari/PDF must not composite the masked notebook-grid layer.
   The grid is decorative; worksheets and text remain fully printable.
   --------------------------------------------------------- */
@media print {
    :is(.englife-ueben-grid-zone, .englife-ueben-library--landing)::before {
        content: none !important;
        display: none !important;
    }
}


/* =========================================================
   v2.8.56 – ACCESSIBILITY AND SEARCH AUDIT (12 OCT 2026)
   Public presentation only; Teacher Mode/scoring/stamps untouched.
   ========================================================= */

/* Readable, consistent keyboard focus throughout EngLife-owned learner UI.
   The 2px offset gives green buttons a light separating inner boundary. */
:is(
    .englife-ueben-library,
    .englife-family-hub,
    .englife-area-hub,
    .englife-ueben-series-library,
    .englife-explanations-library,
    .englife-ueben-global-footer,
    .englife-exercise-shell,
    .englife-exercise-navigation,
    .englife-explanation-related
) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid #0E6633 !important;
    outline-offset: 3px !important;
}

/* Fix the actual stacking context, not just the list's local z-index.
   On /ueben/alle/ the later after-search section also had z-index:1. */
.englife-ueben-library .englife-ueben-search {
    position: relative;
    z-index: 10;
    overflow: visible;
}
.englife-ueben-library .englife-ueben-search__suggestion:is(.is-active,:hover) {
    background: #FFF3D4 !important;
    box-shadow: inset 4px 0 0 #0E6633;
}
.englife-ueben-library .englife-ueben-search__suggestion-category {
    font-size: max(.8125rem, 13px);
}

/* POST-switch status is announced but does not add visual copy to the card. */
.englife-quick-start-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Small standalone navigation links and metadata should remain readable. */
.englife-ueben-home-link,
body.englife-generated-exercise-page .englife-exercise-meta-home {
    font-size: .875rem !important;
    min-height: 28px;
}
body.englife-generated-exercise-page .englife-exercise-pill,
.englife-ueben-guest-featured-exercise__details {
    font-size: .875rem !important;
}
body.englife-generated-exercise-page .englife-exercise-path__eyebrow {
    font-size: .75rem !important;
}

/* Full-bleed 100vw footer can exceed the layout viewport with classic
   scrollbars. Clip ONLY pages containing this footer, not the entire site.
   The clip value preserves sticky descendants unlike overflow-x:hidden. */
body:has(.englife-ueben-global-footer) {
    overflow-x: clip;
}

/* v2.8.57: Editorial SEO copy, without another banner/card or search-top gap. */
body.englife-generated-exercise-page .englife-exercise-seo-intro {
    box-sizing: border-box;
    width: min(100%, var(--el-exercise-content-max, 760px));
    margin: 0 auto 14px;
    padding: 0;
    color: var(--el-system-ink, #262B33);
    font-size: 1rem;
    line-height: 1.55;
}
body.englife-generated-exercise-page .englife-exercise-seo-intro p {
    margin: 0;
}
.englife-area-hub .englife-area-hub__guide {
    max-width: 70ch;
    margin: 24px 0 0;
    color: var(--el-muted, #5B6470);
    font-size: .94rem;
    line-height: 1.6;
}