/* =========================================================
   BIOLOGY BRAIN
   COHESION, ADHESION & SURFACE TENSION
========================================================= */


:root {
    --bb-green: #1f7a45;
    --bb-green-dark: #155b33;
    --bb-green-soft: #eaf6ef;

    --ink: #1f2933;
    --muted: #667085;

    --line: #d9e2dc;

    --surface: #ffffff;
    --workspace: #eef8f3;

    --shadow:
        0 18px 45px
        rgba(29, 45, 36, .14);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--ink);

    background:
        #edf1ee;

    overflow:
        hidden;
}


body {
    padding: 0;
}


/* =========================================================
   MODULE SHELL
========================================================= */

.module-shell {
    width: 100%;
    height: 100vh;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    background:
        var(--surface);

    border:
        1px solid #dfe6e1;

    border-radius:
        22px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);
}


/* =========================================================
   FULLSCREEN
========================================================= */

.module-shell:fullscreen,
.module-shell:-webkit-full-screen {
    width: 100vw;
    height: 100vh;

    border:
        none;

    border-radius:
        0;

    box-shadow:
        none;
}


/* =========================================================
   TOP BAR
========================================================= */

.module-topbar {
    min-height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        10px 20px;

    border-bottom:
        1px solid var(--line);

    background:
        #ffffff;

    z-index:
        40;
}


.module-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        0;
}


.brand-mark {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark img {
    width: 42px;
    height: 42px;

    display: block;

    object-fit: contain;
}


.module-brand > div:last-child {
    min-width:
        0;
}


.module-eyebrow {
    margin:
        0 0 2px;

    font-size:
        .75rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        var(--bb-green);
}


.module-title {
    margin:
        0;

    font-size:
        clamp(
            1.02rem,
            2vw,
            1.5rem
        );

    line-height:
        1.15;
}


.module-meta {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.badge {
    padding:
        7px 10px;

    border:
        1px solid var(--line);

    border-radius:
        999px;

    background:
        #f8faf8;

    color:
        #435047;

    font-size:
        .78rem;

    font-weight:
        800;
}


.icon-button {
    min-width:
        40px;

    height:
        40px;

    padding:
        0 12px;

    border:
        1px solid var(--line);

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334039;

    font-size:
        .95rem;

    font-weight:
        800;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.icon-button:hover,
.control-button:hover {
    background:
        #f7faf8;
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 34% 20%,
            rgba(255, 255, 255, .96),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            var(--workspace) 100%
        );
}


/* =========================================================
   ACTIVITY STAGE
========================================================= */

.activity-stage {
    position:
        absolute;

    inset:
        14px 18px;

    display:
        grid;

    place-items:
        center;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;
}


/* =========================================================
   STEP 1 — COHESION WORKSPACE
========================================================= */

.cohesion-demo {
    position:
        relative;

    width:
        min(
            930px,
            94%
        );

    height:
        min(
            500px,
            100%
        );

    max-width:
        100%;

    max-height:
        100%;

    min-width:
        0;

    min-height:
        0;
}


/* =========================================================
   STEP 1 — WATER MOLECULES
========================================================= */

.cohesion-water {
    position:
        absolute;

    width:
        215px;

    height:
        auto;

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    touch-action:
        none;

    z-index:
        10;
}


.central-water {
    left:
        50%;

    top:
        48%;

    pointer-events:
        none;
}


.draggable-water {
    cursor:
        grab;
}


.draggable-water:active {
    cursor:
        grabbing;
}


/* =========================================================
   STEP 1 — STARTING POSITIONS
========================================================= */

.water-1 {
    left:
        15%;

    top:
        20%;
}


.water-2 {
    left:
        84%;

    top:
        20%;
}


.water-3 {
    left:
        15%;

    top:
        78%;
}


.water-4 {
    left:
        84%;

    top:
        78%;
}


/* =========================================================
   STEP 1 — COHESION TARGET GLOWS
========================================================= */

.cohesion-target {
    position:
        absolute;

    width:
        34px;

    height:
        34px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        rgba(31, 122, 69, .18);

    box-shadow:
        0 0 0 8px
        rgba(31, 122, 69, .07),

        0 0 22px
        rgba(31, 122, 69, .40);

    opacity:
        1;

    pointer-events:
        none;

    z-index:
        14;

    animation:
        cohesionTargetPulse
        1.6s
        ease-in-out
        infinite;
}


.cohesion-target-1 {
    left:
        37%;

    top:
        31%;
}


.cohesion-target-2 {
    left:
        63%;

    top:
        31%;
}


.cohesion-target-3 {
    left:
        37%;

    top:
        66%;
}


.cohesion-target-4 {
    left:
        63%;

    top:
        66%;
}


@keyframes cohesionTargetPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.90);

        box-shadow:
            0 0 0 7px
            rgba(31, 122, 69, .05),

            0 0 15px
            rgba(31, 122, 69, .26);
    }


    50% {
        transform:
            translate(-50%, -50%)
            scale(1.10);

        box-shadow:
            0 0 0 10px
            rgba(31, 122, 69, .09),

            0 0 27px
            rgba(31, 122, 69, .50);
    }
}


/* =========================================================
   STEP 1 — HYDROGEN BONDS
========================================================= */

.cohesion-bond {
    position:
        absolute;

    height:
        4px;

    background:
        repeating-linear-gradient(
            to right,
            #4f8f72 0,
            #4f8f72 7px,
            transparent 7px,
            transparent 14px
        );

    transform-origin:
        left center;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        5;
}


/* =========================================================
   STEP 1 — DRAG HINT
========================================================= */

.drag-hint {
    position:
        absolute;

    left:
        50%;

    bottom:
        6px;

    transform:
        translateX(-50%);

    padding:
        9px 14px;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .90);

    color:
        #526057;

    font-size:
        .86rem;

    font-weight:
        700;

    white-space:
        nowrap;

    box-shadow:
        0 8px 20px
        rgba(42, 57, 48, .08);

    z-index:
        16;
}


/* =========================================================
   STEP 1 — FEEDBACK
========================================================= */

.activity-feedback {
    position:
        absolute;

    left:
        50%;

    top:
        12%;

    transform:
        translate(-50%, -8px);

    padding:
        9px 14px;

    border:
        1px solid #bcd9c8;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .96);

    color:
        var(--bb-green-dark);

    font-size:
        .84rem;

    font-weight:
        850;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        18;

    transition:
        opacity .22s ease,
        transform .22s ease;
}


.activity-feedback.visible {
    opacity:
        1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   STEP 2 — PLANT TRANSPORT SCENE
========================================================= */

.plant-transport-scene {
    position:
        absolute;

    inset:
        0;

    display:
        none;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(430px, 1.22fr);

    align-items:
        stretch;

    gap:
        58px;

    padding:
        24px 370px 24px 30px;

    z-index:
        20;
}


/* =========================================================
   STEP 2 — SHARED PANEL STYLE
========================================================= */

.plant-panel,
.xylem-panel {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    border:
        1px solid
        rgba(31, 122, 69, .12);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 12px 30px
        rgba(31, 70, 48, .08);

    overflow:
        hidden;

    z-index:
        3;
}


.plant-panel-label {
    position:
        absolute;

    top:
        16px;

    left:
        18px;

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        rgba(234, 246, 239, .96);

    color:
        var(--bb-green-dark);

    font-size:
        .8rem;

    font-weight:
        850;

    letter-spacing:
        .025em;

    z-index:
        25;
}


/* =========================================================
   STEP 2 — WHOLE PLANT
========================================================= */

.plant-panel {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        54px 10px 12px;
}


.plant-visual {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}


.plant-outline {
    display:
        block;

    width:
        auto;

    height:
        100%;

    max-width:
        none;

    object-fit:
        contain;

    transform:
        scale(1.72);

    transform-origin:
        center center;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    z-index:
        3;
}


/* =========================================================
   STEP 2 — STEM MAGNIFICATION CIRCLE
========================================================= */

.plant-zoom-source {
    position:
        absolute;

    width:
        68px;

    height:
        68px;

    transform:
        translate(-50%, -50%);

    border:
        3px dashed
        rgba(31, 122, 69, .72);

    border-radius:
        50%;

    background:
        rgba(234, 246, 239, .10);

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, .42);

    pointer-events:
        none;

    z-index:
        12;
}


/* =========================================================
   STEP 2 — PLANT → XYLEM ZOOM LINES
========================================================= */

.zoom-connector-overlay {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        visible;

    pointer-events:
        none;

    z-index:
        8;
}


.zoom-connector-line {
    stroke:
        rgba(31, 122, 69, .62);

    stroke-width:
        2.5;

    stroke-dasharray:
        7 7;

    stroke-linecap:
        round;

    
}


/* =========================================================
   STEP 2 — XYLEM PANEL
========================================================= */

.xylem-panel {
    padding:
        50px 18px 16px;
}


.xylem-stage {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;
}


.xylem-tube {
    position:
        absolute;

    left:
        43%;

    top:
        50%;

    height:
        96%;

    width:
        auto;

    max-width:
        none;

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    z-index:
        2;
}


/* =========================================================
   STEP 2 — WATER MOLECULES
========================================================= */

.xylem-water {
    position:
        absolute;

    width:
        62px;

    height:
        auto;

    transform:
        translate(-50%, -50%);

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-drag:
        none;

    touch-action:
        none;

    z-index:
        12;
}


.xylem-water:active {
    cursor:
        grabbing;
}


.xylem-water-1 {
    left:
        86%;

    top:
        78%;
}


.xylem-water-2 {
    left:
        87%;

    top:
        58%;
}


.xylem-water-3 {
    left:
        86%;

    top:
        38%;
}


.xylem-water-4 {
    left:
        87%;

    top:
        18%;
}


/* =========================================================
   STEP 2 — TARGET GLOWS
========================================================= */

.adhesion-target,
.xylem-cohesion-target {
    position:
        absolute;

    width:
        30px;

    height:
        30px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        rgba(31, 122, 69, .17);

    box-shadow:
        0 0 0 7px
        rgba(31, 122, 69, .06),

        0 0 20px
        rgba(31, 122, 69, .36);

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        10;
}


.adhesion-target.visible,
.xylem-cohesion-target.visible {
    opacity:
        1;

    animation:
        xylemTargetPulse
        1.45s
        ease-in-out
        infinite;
}


@keyframes xylemTargetPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.9);
    }


    50% {
        transform:
            translate(-50%, -50%)
            scale(1.12);
    }
}


/* =========================================================
   STEP 2 — ADHESION / HYDROGEN-BOND LINES
========================================================= */

.adhesion-link,
.xylem-hbond {
    position:
        absolute;

    height:
        4px;

    background:
        repeating-linear-gradient(
            to right,
            #4f8f72 0,
            #4f8f72 6px,
            transparent 6px,
            transparent 12px
        );

    transform-origin:
        left center;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        7;
}


/* =========================================================
   STEP 2 — CONCEPT FEEDBACK TOASTS
========================================================= */

.concept-label {
    position: absolute;

    width: 260px;
    padding: 14px 16px;

    border: 1px solid rgba(31, 122, 69, .20);
    border-radius: 16px;

    background: rgba(255, 255, 255, .98);

    color: #33443a;

    box-shadow:
        0 10px 28px rgba(31, 70, 48, .14);

    opacity: 0;

    transform: translateY(8px);

    pointer-events: none;

    transition:
        opacity .3s ease,
        transform .3s ease;

    z-index: 30;
}

.concept-label strong {
    display: block;

    margin-bottom: 4px;

    color: var(--bb-green-dark);

    font-size: .95rem;
    font-weight: 900;
}

.concept-label span {
    display: block;

    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
}

.concept-label.visible {
    opacity: 1;
    transform: translateY(0);
}

.adhesion-label {
    left: 5%;
    bottom: 10%;
}

.cohesion-label {
    right: 4%;
    top: 38%;
}


/* =========================================================
   STEP 2 — UPWARD MOVEMENT ARROW
========================================================= */

.water-column-arrow {
    position:
        absolute;

    left:
        43%;

    top:
        3%;

    transform:
        translateX(-50%);

    color:
        var(--bb-green);

    font-size:
        3.25rem;

    font-weight:
        900;

    line-height:
        1;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        16;

    cursor:
        default;

    user-select:
        none;
}


.water-column-arrow.visible {
    opacity:
        1;

    pointer-events:
        auto;

    cursor:
        pointer;

    animation:
        waterColumnRise
        1.15s
        ease-in-out
        infinite;
}


.water-column-arrow.visible:hover {
    transform:
        translateX(-50%)
        scale(1.12);
}


.water-column-arrow.transporting {
    pointer-events:
        none;

    cursor:
        default;

    animation:
        none;
}


@keyframes waterColumnRise {

    0%,
    100% {
        transform:
            translate(-50%, 6px);
    }


    50% {
        transform:
            translate(-50%, -6px);
    }
}


/* =========================================================
   STEP 2 — WATER COLUMN TRANSPORT
========================================================= */

.xylem-water.transport-up {
    transition:
        top 2.4s
        cubic-bezier(.45, 0, .35, 1),
        opacity .45s ease 2s;
}


.xylem-hbond.transport-up,
.adhesion-link.transport-up {
    transition:
        top 2.4s
        cubic-bezier(.45, 0, .35, 1),
        opacity .45s ease 2s;
}


/* =========================================================
   FLOATING INSTRUCTIONS
========================================================= */

.instruction-popup {
    position:
        absolute;

    top:
        22px;

    right:
        22px;

    width:
        min(
            350px,
            calc(100% - 44px)
        );

    border:
        1px solid #d9e5dd;

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 18px 42px
        rgba(28, 44, 34, .16);

    overflow:
        hidden;

    z-index:
        30;
}


.workspace.step-two-active .instruction-popup {
    top:
        18px;

    right:
        18px;

    width:
        330px;
}


.instruction-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        12px 14px 11px 16px;

    background:
        var(--bb-green-soft);

    border-bottom:
        1px solid #dbe9df;

    cursor:
        grab;

    user-select:
        none;
}


.instruction-header:active {
    cursor:
        grabbing;
}


.instruction-step {
    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    color:
        var(--bb-green-dark);
}


.popup-actions {
    display:
        flex;

    gap:
        6px;
}


.popup-action {
    width:
        30px;

    height:
        30px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #536057;

    font-size:
        1rem;

    cursor:
        pointer;
}


.popup-action:hover {
    background:
        rgba(31, 122, 69, .1);
}


.instruction-body {
    padding:
        16px 18px 17px;
}


.instruction-body h2 {
    margin:
        0 0 9px;

    font-size:
        1.22rem;

    line-height:
        1.25;
}


.instruction-body p {
    margin:
        0;

    color:
        #4e5b53;

    line-height:
        1.5;

    font-size:
        .94rem;
}


.instruction-goal {
    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid #e0e8e3;

    border-radius:
        12px;

    background:
        #f7faf8;

    color:
        #435047;

    font-size:
        .86rem;
}


.instruction-goal strong {
    display:
        block;

    margin-bottom:
        3px;
}


.instruction-restore {
    position:
        absolute;

    top:
        20px;

    right:
        20px;

    display:
        none;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 13px;

    border:
        1px solid #d8e3db;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--bb-green-dark);

    font-weight:
        850;

    box-shadow:
        0 10px 24px
        rgba(28, 44, 34, .1);

    cursor:
        pointer;

    z-index:
        29;
}


/* =========================================================
   FOOTER
========================================================= */

.module-footer {
    min-height:
        60px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        16px;

    padding:
        8px 18px;

    border-top:
        1px solid var(--line);

    background:
        #ffffff;

    z-index:
        40;
}


.footer-left,
.footer-right {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.footer-right {
    justify-content:
        flex-end;
}


.control-button {
    min-height:
        40px;

    padding:
        0 14px;

    border:
        1px solid var(--line);

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334039;

    font-weight:
        800;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.control-button.primary {
    border-color:
        var(--bb-green);

    background:
        var(--bb-green);

    color:
        #ffffff;
}


.control-button.primary:disabled {
    opacity:
        .38;

    cursor:
        not-allowed;
}


.module-progress {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.progress-dot {
    width:
        10px;

    height:
        10px;

    border:
        2px solid #9db7a6;

    border-radius:
        50%;

    background:
        #ffffff;
}


.progress-dot.active {
    border-color:
        var(--bb-green);

    background:
        var(--bb-green);
}


.sound-active {
    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   STEP 3 — SURFACE TENSION
========================================================= */

.surface-tension-scene {
    position:
        absolute;

    inset:
        0;

    display:
        none;

    grid-template-columns:
        minmax(320px, .92fr)
        58px
        minmax(420px, 1.08fr);

    align-items:
        stretch;

    gap:
        18px;

    padding:
        24px 380px 24px 30px;

    z-index:
        20;
}


/* =========================================================
   STEP 3 — SHARED PANEL STYLE
========================================================= */

.surface-observation-panel,
.surface-molecular-panel {
    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    border:
        1px solid
        rgba(31, 122, 69, .12);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, .84);

    box-shadow:
        0 12px 30px
        rgba(31, 70, 48, .08);

    overflow:
        hidden;
}


/* =========================================================
   STEP 3 — LEFT PANEL
========================================================= */

.surface-observation-panel {
    padding:
        54px 18px 18px;
}


.strider-drag-stage {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


/* =========================================================
   STEP 3 — WATER POOL
========================================================= */

.strider-water-pool {
    position:
        absolute;

    left:
        7%;

    right:
        7%;

    bottom:
        12%;

    height:
        45%;

    border-radius:
        50% 50% 22px 22px /
        18% 18% 12px 12px;

    background:
        linear-gradient(
            to bottom,
            rgba(157, 221, 243, .52),
            rgba(91, 183, 221, .74)
        );

    overflow:
        hidden;

    z-index:
        2;
}


.strider-surface-line {
    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        4px;

    background:
        rgba(63, 154, 199, .82);
}


.strider-drag-stage.strider-landed
.strider-surface-line {
    height:
        12px;

    background:
        transparent;

    border-top:
        4px solid
        rgba(63, 154, 199, .82);

    border-radius:
        50%;
}


/* =========================================================
   STEP 3 — WATER STRIDER
========================================================= */

.water-strider {
    position:
        absolute;

    left:
        50%;

    top:
        25%;

    width:
        min(
            300px,
            72%
        );

    height:
        auto;

    transform:
        translate(-50%, -50%);

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-drag:
        none;

    touch-action:
        none;

    z-index:
        12;
}


.water-strider:active {
    cursor:
        grabbing;
}


.water-strider.strider-placed {
    cursor:
        default;
}


/* =========================================================
   STEP 3 — STRIDER DROP TARGET
========================================================= */

.strider-drop-target {
    position:
        absolute;

    left:
        50%;

    top:
        58%;

    width:
        180px;

    height:
        88px;

    transform:
        translate(-50%, -50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        3px dashed
        rgba(31, 122, 69, .55);

    border-radius:
        50%;

    background:
        rgba(31, 122, 69, .06);

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        850;

    text-align:
        center;

    pointer-events:
        none;

    z-index:
        7;

    animation:
        striderTargetPulse
        1.5s
        ease-in-out
        infinite;
}


.strider-drop-target.hidden {
    opacity:
        0;

    animation:
        none;
}


@keyframes striderTargetPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }


    50% {
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}


/* =========================================================
   STEP 3 — LEFT PANEL HINT
========================================================= */

.surface-drag-hint {
    position:
        absolute;

    left:
        50%;

    bottom:
        2%;

    transform:
        translateX(-50%);

    padding:
        8px 13px;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .94);

    color:
        #526057;

    font-size:
        .8rem;

    font-weight:
        750;

    white-space:
        nowrap;

    box-shadow:
        0 7px 18px
        rgba(31, 70, 48, .08);

    z-index:
        15;
}


/* =========================================================
   STEP 3 — MAGNIFICATION DOTS
========================================================= */

.surface-magnification-link {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


.surface-magnification-link span {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        rgba(31, 122, 69, .28);
}


.surface-magnification-link span:nth-child(2) {
    background:
        rgba(31, 122, 69, .54);
}


.surface-magnification-link span:nth-child(3) {
    background:
        var(--bb-green);
}


/* =========================================================
   STEP 3 — MOLECULAR PANEL
========================================================= */

.surface-molecular-panel {
    padding:
        54px 18px 18px;

    transition:
        opacity .3s ease,
        filter .3s ease;
}


.surface-molecular-panel.locked {
    opacity: .38;
}


.surface-molecular-stage {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


/* =========================================================
   STEP 3 — LOCK MESSAGE
========================================================= */

.molecular-panel-lock {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%, -50%);

    width:
        min(
            260px,
            80%
        );

    padding:
        12px 16px;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .96);

    color:
        #536057;

    text-align:
        center;

    font-size:
        .82rem;

    font-weight:
        800;

    box-shadow:
        0 8px 22px
        rgba(28, 44, 34, .10);

    z-index:
        30;
}


.molecular-panel-lock.hidden {
    display:
        none;
}


/* =========================================================
   STEP 3 — CURVED MOLECULAR WATER SURFACE
========================================================= */

.molecular-surface-svg {
    position:
        absolute;

    left:
        6%;

    top:
        40%;

    width:
        88%;

    height:
        150px;

    overflow:
        visible;

    pointer-events:
        none;

    z-index:
        5;
}


.molecular-surface-path {
    fill:
        none;

    stroke:
        #68b2d5;

    stroke-width:
        4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   STEP 3 — MAGNIFIED WATER STRIDER LEG
========================================================= */
.magnified-strider-leg {
    position: absolute;

    left: 50%;
    top: 21%;

    width: 112px;
    height: 205px;

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 18;

    opacity: 0;

    transition:
        top .72s cubic-bezier(.35, 0, .25, 1),
        opacity .35s ease;
}

.surface-molecular-panel:not(.locked)
.magnified-strider-leg {
    opacity: 1;
}


/* =========================================================
   STEP 3 — LEG SHAFT
========================================================= */

.magnified-leg-shaft {
    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        22px;

    height:
        190px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #5a321d 0%,
            #754428 45%,
            #65371f 100%
        );

    box-shadow:
        inset 2px 0 3px
        rgba(255, 255, 255, .10),

        0 3px 6px
        rgba(52, 27, 15, .18);
}


/* =========================================================
   STEP 3 — LEG CONTACT FOOT
========================================================= */

.magnified-leg-foot {
    position:
        absolute;

    left:
        50%;

    bottom:
        -1px;

    width:
        108px;

    height:
        22px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        linear-gradient(
            to bottom,
            #754428,
            #5b311c
        );

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, .08),

        0 3px 6px
        rgba(52, 27, 15, .16);
}


/* =========================================================
   STEP 3 — LEG PRESSURE MOVEMENT
========================================================= */

.surface-molecular-stage.pressure-applied
.magnified-strider-leg {
    top:
        30%;
}


/* =========================================================
   STEP 3 — MAGNIFIED WATER MOLECULES
========================================================= */

.surface-water {
    position:
        absolute;

    width:
        115px;

    height:
        auto;

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    z-index:
        10;

    transition:
        left .7s ease,
        top .7s
        cubic-bezier(.4, 0, .2, 1);
}


.surface-water-1 {
    left:
        12%;

    top:
        56%;
}


.surface-water-2 {
    left:
        31%;

    top:
        55%;
}


.surface-water-3 {
    left:
        50%;

    top:
        54%;
}


.surface-water-4 {
    left:
        69%;

    top:
        55%;
}


.surface-water-5 {
    left:
        88%;

    top:
        56%;
}


/*
    The central molecule is displaced most strongly.

    The neighboring molecules are pulled downward
    by the cohesive hydrogen-bond network.
*/

.surface-molecular-stage.pressure-applied
.surface-water-1 {
    top:
        57%;
}


.surface-molecular-stage.pressure-applied
.surface-water-2 {
    top:
        61%;
}


.surface-molecular-stage.pressure-applied
.surface-water-3 {
    top:
        68%;
}


.surface-molecular-stage.pressure-applied
.surface-water-4 {
    top:
        61%;
}


.surface-molecular-stage.pressure-applied
.surface-water-5 {
    top:
        57%;
}


/* =========================================================
   STEP 3 — HYDROGEN BONDS
========================================================= */

.surface-hbond {
    position:
        absolute;

    height:
        4px;

    background:
        repeating-linear-gradient(
            to right,
            #4f8f72 0,
            #4f8f72 7px,
            transparent 7px,
            transparent 14px
        );

    transform-origin:
        left center;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        8;
}


.surface-hbond.visible {
    opacity:
        1;
}


/* =========================================================
   STEP 3 — PRESS BUTTON
========================================================= */

.surface-action-button {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    padding: 11px 18px;

    border: none;
    border-radius: 11px;

    background: var(--bb-green);

    color: #ffffff;

    font-size: .88rem;
    font-weight: 850;

    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(31, 122, 69, .18);

    z-index: 21;

    opacity: 0;

    transition:
        opacity .3s ease,
        background .2s ease;
}

.surface-molecular-panel:not(.locked)
.surface-action-button {
    opacity: 1;
}


.surface-action-button:hover:not(:disabled) {
    background:
        var(--bb-green-dark);
}


.surface-action-button:disabled {
    opacity:
        .42;

    cursor:
        default;
}


/* =========================================================
   STEP 3 — SURFACE TENSION LABEL
========================================================= */

.surface-tension-label {
    position:
        absolute;

    right:
        5%;

    top:
        75%;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(31, 122, 69, .20);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .97);

    color:
        var(--bb-green-dark);

    font-size:
        .82rem;

    font-weight:
        900;

    box-shadow:
        0 7px 18px
        rgba(31, 70, 48, .10);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .35s ease;

    z-index:
        18;
}


.surface-tension-label.visible {
    opacity:
        1;
}


/* =========================================================
   SHORT HEIGHTS
========================================================= */

@media (max-height: 760px) {

    .module-topbar {
        min-height:
            60px;

        padding:
            8px 16px;
    }


    .brand-mark {
        width:
            38px;

        height:
            38px;

        font-size:
            20px;
    }


    .module-footer {
        min-height:
            54px;

        padding:
            6px 14px;
    }


    .control-button {
        min-height:
            36px;

        font-size:
            .84rem;
    }


    .activity-stage {
        inset:
            8px 14px;
    }


    .cohesion-demo {
        height:
            min(
                450px,
                100%
            );
    }


    .cohesion-water {
        width:
            190px;
    }


    .instruction-popup {
        top:
            14px;

        right:
            14px;
    }


    .plant-transport-scene {
        padding-top:
            16px;

        padding-bottom:
            16px;
    }


    .plant-outline {
        transform:
            scale(1.58);
    }


    .xylem-tube {
        height:
            94%;
    }


    .magnified-strider-leg {
        height:
            178px;
    }


    .magnified-leg-shaft {
        height:
            164px;
    }
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1150px) {

    .plant-transport-scene {
        grid-template-columns:
            minmax(230px, .80fr)
            minmax(350px, 1.20fr);

        gap:
            42px;

        padding:
            18px 300px 18px 18px;
    }


    .workspace.step-two-active .instruction-popup {
        width:
            275px;
    }


    .plant-outline {
        transform:
            scale(1.55);
    }


    .xylem-water {
        width:
            56px;
    }


    .surface-tension-scene {
        grid-template-columns:
            minmax(250px, .9fr)
            40px
            minmax(330px, 1.1fr);

        gap:
            12px;

        padding:
            18px 300px 18px 18px;
    }


    .surface-water {
        width:
            92px;
    }


    .water-strider {
        width:
            min(
                250px,
                74%
            );
    }


    .magnified-strider-leg {
        transform:
            translateX(-50%)
            scale(.88);

        transform-origin:
            top center;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .module-meta .badge {
        display:
            none;
    }


    .plant-transport-scene {
        grid-template-columns:
            minmax(210px, .82fr)
            minmax(330px, 1.18fr);

        gap:
            34px;

        padding:
            16px;
    }


    .workspace.step-two-active .instruction-popup {
        top:
            14px;

        right:
            14px;

        width:
            300px;
    }


    .plant-outline {
        transform:
            scale(1.42);
    }


    .xylem-water {
        width:
            54px;
    }


    .surface-tension-scene {
        padding:
            16px;

        grid-template-columns:
            minmax(230px, .9fr)
            36px
            minmax(320px, 1.1fr);
    }


    .surface-water {
        width:
            82px;
    }
}


/* =========================================================
   SMALL SCREEN
========================================================= */

@media (max-width: 700px) {

    .plant-transport-scene {
        grid-template-columns:
            1fr;

        grid-template-rows:
            .75fr
            1.25fr;

        gap:
            16px;

        padding:
            12px;
    }


    .plant-panel,
    .xylem-panel {
        min-height:
            0;
    }


    .plant-outline {
        transform:
            scale(1.28);
    }


    .xylem-tube {
        height:
            92%;

        left:
            45%;
    }


    .xylem-water {
        width:
            50px;
    }


    .zoom-connector-overlay {
        display:
            none;
    }


    .plant-zoom-source {
        width:
            48px;

        height:
            48px;
    }


    .surface-tension-scene {
        grid-template-columns:
            1fr;

        grid-template-rows:
            .86fr
            18px
            1.14fr;

        gap:
            8px;

        padding:
            12px;
    }


    .surface-magnification-link {
        transform:
            rotate(90deg);
    }


    .surface-water {
        width:
            70px;
    }


    .magnified-strider-leg {
        transform:
            translateX(-50%)
            scale(.72);

        transform-origin:
            top center;
    }


    .molecular-surface-svg {
        top:
            39%;
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 560px) {

    .module-topbar {
        padding:
            8px 10px;

        gap:
            10px;
    }


    .module-meta {
        gap:
            5px;
    }


    .module-title {
        font-size:
            .98rem;
    }


    .brand-mark {
        width:
            36px;

        height:
            36px;
    }


    .icon-button {
        min-width:
            34px;

        height:
            34px;

        padding:
            0 8px;

        font-size:
            .8rem;
    }


    .cohesion-demo {
        width:
            100%;

        height:
            100%;
    }


    .cohesion-water {
        width:
            145px;
    }


    .water-1 {
        left:
            12%;

        top:
            18%;
    }


    .water-2 {
        left:
            88%;

        top:
            18%;
    }


    .water-3 {
        left:
            12%;

        top:
            80%;
    }


    .water-4 {
        left:
            88%;

        top:
            80%;
    }


    .drag-hint {
        max-width:
            calc(100% - 20px);

        white-space:
            normal;

        text-align:
            center;
    }


    .instruction-popup,
    .workspace.step-two-active .instruction-popup {
        width:
            min(
                310px,
                calc(100% - 20px)
            );

        top:
            10px;

        right:
            10px;
    }


    .module-footer {
        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            8px;

        padding:
            6px 8px;
    }


    .footer-left {
        display:
            none;
    }


    .module-progress {
        justify-self:
            center;
    }


    .footer-right {
        grid-column:
            3;
    }


    .control-button {
        min-height:
            34px;

        padding:
            0 9px;

        font-size:
            .78rem;
    }
}


/* =========================================================
   MODULE COMPLETION SCREEN
========================================================= */

.module-completion-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(8, 12, 10, .72);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:
        9999;
}


.module-completion-overlay.visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   COMPLETION CARD
========================================================= */

.module-completion-card {

    position:
        relative;

    width:
        min(
            560px,
            100%
        );

    max-height:
        calc(100vh - 48px);

    overflow-y:
        auto;

    padding:
        30px;

    border:
        1px solid
        #dce6df;

    border-radius:
        26px;

    background:
        #ffffff;

    color:
        var(--ink);

    text-align:
        center;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .32);

    transform:
        translateY(20px)
        scale(.96);

    transition:
        transform .4s
        cubic-bezier(.2, .8, .2, 1);
}


.module-completion-overlay.visible
.module-completion-card {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.completion-close-button {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        #f3f6f4;

    color:
        #59665e;

    font-size:
        1.25rem;

    cursor:
        pointer;
}


.completion-close-button:hover {

    background:
        #e8eeea;
}


/* =========================================================
   SUCCESS HEADER
========================================================= */

.completion-success-icon {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 12px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green);

    font-size:
        2rem;

    font-weight:
        950;
}

.completion-success-icon img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: contain;
}


.module-completion-overlay.visible
.completion-success-icon {

    animation:
        completionSuccessPop
        .55s ease;
}


@keyframes completionSuccessPop {

    0% {

        transform:
            scale(.55)
            rotate(-12deg);

        opacity:
            0;
    }


    70% {

        transform:
            scale(1.10)
            rotate(3deg);

        opacity:
            1;
    }


    100% {

        transform:
            scale(1)
            rotate(0);
    }
}


.completion-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--bb-green);

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .12em;
}


.module-completion-card h2 {

    margin:
        0;

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );

    line-height:
        1.16;
}


.completion-subtitle {

    max-width:
        440px;

    margin:
        10px auto 0;

    color:
        var(--muted);

    font-size:
        .88rem;

    line-height:
        1.5;
}


/* =========================================================
   XP REWARD
========================================================= */

.completion-reward-card {

    margin:
        20px 0 14px;

    padding:
        15px 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        1px solid
        #dfe8e2;

    border-radius:
        16px;

    background:
        #f7fbf8;

    text-align:
        left;
}


.completion-reward-card span {

    color:
        #647069;

    font-size:
        .78rem;

    font-weight:
        800;
}


.completion-reward-card strong {

    color:
        #59b832;

    font-size:
        1.6rem;

    font-weight:
        950;
}


/* =========================================================
   UNIT PROGRESS
========================================================= */

.completion-progress-card {

    margin-top:
        12px;

    padding:
        15px 16px;

    border:
        1px solid
        #e1e7e3;

    border-radius:
        16px;

    background:
        #f9fbfa;

    text-align:
        left;
}


.completion-progress-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        11px;
}


.completion-progress-heading span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--bb-green);

    font-size:
        .64rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;
}


.completion-progress-heading strong {

    font-size:
        .84rem;
}


.completion-progress-heading > strong {

    flex:
        0 0 auto;

    color:
        #536057;

    font-size:
        .8rem;
}


.completion-progress-track {

    width:
        100%;

    height:
        12px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #dce3df;
}


.completion-progress-fill {

    height:
        100%;

    border-radius:
        inherit;

    background:
        #59b832;

    transition:
        width 1.05s
        cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   BADGE PROGRESS
========================================================= */

.completion-badge-card {

    margin-top:
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        15px 16px;

    border: 1px solid #e1e7e3;

    border-radius:
        16px;

    background: #f9fbfa;

    text-align:
        left;
}


.completion-badge-icon {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background: #eef8f3;
}

.completion-badge-icon img {
    width: 62px;
    height: 62px;

    display: block;

    object-fit: contain;
}

.completion-badge-copy span {
    display: block;

    margin-bottom: 3px;

    color: #23834a;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.completion-badge-copy strong {
    display: block;

    color: #20272d;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;
}


.completion-badge-copy p {
    margin: 12px 0 0;

    color: #4f5b54;

    font-size: 17px;

    font-weight: 650;

    line-height: 1.5;
}


/* =========================================================
   COMPLETION — ACTIVITY FEEDBACK
========================================================= */

.activity-feedback-form {

    margin-top:
        16px;

    padding:
        16px;

    border:
        1px solid
        #dfe8e2;

    border-radius:
        16px;

    background:
        #f7fbf8;

    text-align:
        left;
}


.activity-feedback-question {

    margin:
        0 0 12px;

    color:
        #29352e;

    font-size:
        .92rem;

    font-weight:
        850;

    text-align:
        center;
}


/* =========================================================
   YES / NO BUTTONS
========================================================= */

.activity-feedback-buttons {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;
}


.activity-feedback-button {

    min-height:
        42px;

    padding:
        0 14px;

    border:
        1px solid
        #d4dfd8;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #3f4c44;

    font:
        inherit;

    font-size:
        .86rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.activity-feedback-button:hover {

    border-color:
        #a9c9b5;

    background:
        #eef8f3;

    color:
        var(--bb-green-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 12px
        rgba(31, 122, 69, .08);
}


.activity-feedback-button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   NEGATIVE FEEDBACK REASONS
========================================================= */

.activity-feedback-reasons {

    margin-top:
        14px;

    padding-top:
        14px;

    border-top:
        1px solid
        #e0e7e2;
}


.activity-feedback-reasons[hidden] {

    display:
        none;
}


.activity-feedback-reasons > p {

    margin:
        0 0 10px;

    color:
        #536057;

    font-size:
        .8rem;

    font-weight:
        750;
}


.activity-feedback-reasons > p span {

    margin-left:
        4px;

    color:
        #89948d;

    font-size:
        .72rem;

    font-weight:
        650;
}


.activity-feedback-reason-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        8px;
}


.activity-feedback-reason-grid button {

    min-height:
        36px;

    padding:
        7px 9px;

    border:
        1px solid
        #d7e0da;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #4b5950;

    font:
        inherit;

    font-size:
        .75rem;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.activity-feedback-reason-grid button:hover {

    border-color:
        #a9c9b5;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);

    transform:
        translateY(-1px);
}


.activity-feedback-reason-grid button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   FEEDBACK THANK YOU
========================================================= */

.activity-feedback-thanks {

    margin-top:
        12px;

    padding:
        10px 12px;

    border:
        1px solid
        #cce2d4;

    border-radius:
        10px;

    background:
        #edf8f1;

    color:
        var(--bb-green-dark);

    font-size:
        .8rem;

    font-weight:
        800;

    line-height:
        1.4;

    text-align:
        center;
}


.activity-feedback-thanks[hidden] {

    display:
        none;
}


/* =========================================================
   HIDDEN FEEDBACK CONTROLS
========================================================= */

.activity-feedback-buttons[hidden] {

    display:
        none;
}


/* =========================================================
   COMPLETION ACTIONS
========================================================= */

.completion-actions {

    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        9px;
}


.completion-primary-button,
.completion-secondary-button {

    min-height:
        46px;

    padding:
        0 16px;

    border-radius:
        12px;

    font:
        inherit;

    font-weight:
        850;

    cursor:
        pointer;
}


.completion-primary-button {

    border:
        0;

    background:
        var(--bb-green);

    color:
        #ffffff;

    box-shadow:
        0 9px 20px
        rgba(31, 122, 69, .20);
}


.completion-primary-button:hover {

    background:
        #248d51;
}


.completion-secondary-button {

    border:
        1px solid
        #d9e2dc;

    background:
        #ffffff;

    color:
        #455248;
}


.completion-secondary-button:hover {

    background:
        #f7faf8;
}


/* =========================================================
   COMPLETION MOBILE
========================================================= */

@media (max-width: 600px) {

    .module-completion-overlay {

        padding:
            14px;
    }


    .module-completion-card {

        padding:
            24px 18px 20px;

        border-radius:
            20px;
    }


    .completion-actions {

        grid-template-columns:
            1fr;
    }

        .activity-feedback-buttons {

        grid-template-columns:
            1fr;
    }


    .activity-feedback-reason-grid {

        grid-template-columns:
            1fr
            1fr;
    }



}

/* =========================================================
   STEP 3 — STRIDER SUCCESS FEEDBACK
========================================================= */

.strider-success-toast {
    position: absolute;

    left: 50%;
    bottom: 5%;

    width: min(290px, 82%);

    transform:
        translate(-50%, 10px);

    padding: 13px 16px;

    border:
        1px solid
        rgba(31, 122, 69, .20);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .98);

    box-shadow:
        0 10px 26px
        rgba(31, 70, 48, .14);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        transform .3s ease;

    z-index: 25;
}


.strider-success-toast strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--bb-green-dark);

    font-size: .92rem;

    font-weight: 900;
}


.strider-success-toast span {
    display: block;

    color: #536057;

    font-size: .8rem;

    font-weight: 650;

    line-height: 1.4;
}


.strider-success-toast.visible {
    opacity: 1;

    transform:
        translate(-50%, 0);
}