/* =====================================================================
   EXERCISES: practice section, read-aloud lists, multiple choice, gap-fill dropdowns, web ticks and crosses.
   ===================================================================== */

/* ---- Practice ---- */
.practice-title {
    margin-block: 32px 16px;
    padding: 0;
    color: #8c92ac;                    /* charcoal */
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.read-aloud { list-style: none; padding: 0; counter-reset: n; }

.read-aloud li {
    counter-increment: n;
    display: flex; align-items: center; gap: 10px;
    padding-block: 5px;
    font-size: 1.02rem;
}

.read-aloud li::before { content: counter(n) "."; font-weight: 700; min-width: 1.5em; }

.read-aloud li span { flex: 1; }

.read-aloud .say { margin-right: 0; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 16px; }

.choice {
    padding: 10px 12px;
    background: rgb(255 255 255 / .65); border-radius: 8px;
    transition: box-shadow .2s ease;
}

.choice__word { margin-bottom: 4px; font-weight: 700; font-size: 1.05rem; }

.choice label { display: flex; align-items: center; gap: 8px; padding-block: 3px; cursor: pointer; }

.choice input { accent-color: var(--accent); margin: 0; width: 1.05em; height: 1.05em; }

.choice.is-right { box-shadow: inset 0 0 0 2px var(--right); }

.choice.is-wrong { box-shadow: inset 0 0 0 2px var(--wrong); }

.check {
    margin-top: 14px; padding: 9px 20px;
    border: 0; border-radius: 99px;
    background: var(--accent); color: #fff;
    font: inherit; font-weight: 700; cursor: pointer;
}

.check:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.score { margin-left: 12px; font-weight: 700; }

.spot-words { font-size: clamp(1rem, 2.4vw, 1.15rem); font-weight: 700; margin-block: 4px 12px; }

.tips ul { padding-left: 20px; }

.tips li + li { margin-top: 4px; }

.answers { margin-top: 8px; font-size: .85rem; color: var(--muted); }

.answers summary { cursor: pointer; font-weight: 700; color: var(--ink); }

.answers b { color: var(--coral); }

/* ======================= END PHONE MENU ROW + SEARCH ======================= */
/* =====================================================================
   GAP-FILL EXERCISES  (dropdowns in sentences + web ticks / crosses)
   Markup: <ol class="gapfill"> <li> text <select class="dropdown" data-answer="n"> …
           <span class="resultImage"></span></li>
   ===================================================================== */
.gapfill {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: q;
}

.gapfill li {
    counter-increment: q;
    position: relative;
    padding: 10px 16px 10px 3.2em;
    line-height: 2.3;                    /* room for the dropdowns when a sentence wraps */
    font-size: 1rem;
}

.gapfill li + li { border-top: 1.5px solid #fff; }

.gapfill li:nth-child(even) { background: rgb(255 255 255 / .45); }

.gapfill li::before {
    content: counter(q) ".";
    position: absolute;
    left: 16px;
    font-weight: 700;
    color: var(--accent);
}

/* the dropdowns: rounded pills in the sentence */
.gapfill select {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 6px;
    padding: 3px 32px 3px 14px;
    border: 2px solid var(--accent);
    border-radius: 99px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    vertical-align: middle;
    transition: box-shadow .15s ease;
}

.gapfill select:hover { box-shadow: 0 0 0 3px rgb(0 0 0 / .06); }

.gapfill select:focus, .gapfill select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(46 134 171 / .18); }   /* single soft highlight when clicked */

.gapfill select:invalid,
.gapfill select.is-empty { color: var(--muted); }   /* "?" in grey; stays bold so the dropdown never changes width */

/* ---- Web ticks and crosses (no image files) ---- */
.mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.mark:not(.is-right):not(.is-wrong) { visibility: hidden; }   /* invisible until answered, but its space is kept so the sentence doesn't move */

.mark.is-right { background: var(--right); }

.mark.is-wrong { background: var(--wrong); }

.mark::after {
    content: "";
    width: 14px;
    height: 14px;
    background: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}

.mark.is-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }

.mark.is-wrong { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

.mark.pop { animation: mark-pop .4s ease forwards; }

@keyframes mark-pop {
    0%   { transform: scale(0);   opacity: 0; }
    50%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1);   opacity: 1; }
}

@media (max-width: 640px) {
    .gapfill li { padding-left: 2.6em; padding-right: 12px; line-height: 2.1; }
    .gapfill li::before { left: 12px; }
}

@media print {
    .gapfill select { background-image: none; padding-right: 14px; }
}