/* ================================================================
   YSP Gapfill Practice — self-contained styles
   Scoped to .ysp-gf-set; no dependency on pdf-exercise CSS.
   Palette: bronze accent for Grammar (house convention).
   ================================================================ */

.ysp-gf-set {
    max-width: 860px;
    margin: 0 auto 2rem;
    padding: 1.25rem;
    border: 1px solid #e3ddd2;
    border-radius: 12px;
    background: #fffdf9;
    font-size: 1rem;
    line-height: 1.6;
}

/* ── Header ───────────────────────────────────────────────────── */
.ysp-gf-header { border-bottom: 2px solid #b08d57; padding-bottom: .6rem; margin-bottom: 1.1rem; }
.ysp-gf-title  { margin: 0 0 .3rem; font-size: 1.35rem; }
.ysp-gf-meta   { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; }
.ysp-gf-badge  { background: #b08d57; color: #fff; padding: .1rem .55rem; border-radius: 999px; font-weight: 700; }
.ysp-gf-codes  { color: #7a6a4f; font-family: monospace; }
.ysp-gf-count  { color: #7a6a4f; }

/* ── Section ──────────────────────────────────────────────────── */
.ysp-gf-section { margin-bottom: 1.6rem; }
.ysp-gf-rubric {
    font-weight: 600; background: #f4eee3; border-left: 4px solid #b08d57;
    padding: .55rem .8rem; border-radius: 0 8px 8px 0; margin-bottom: .6rem;
}
.ysp-gf-rubric-num {
    display: inline-block; min-width: 1.5em; text-align: center;
    background: #b08d57; color: #fff; border-radius: 6px; margin-right: .4rem;
}
.ysp-gf-rule {
    font-size: .9rem; color: #5d4e37; background: #fdf6e8;
    border: 1px dashed #d4b98a; border-radius: 8px;
    padding: .4rem .7rem; margin-bottom: .6rem;
}

/* ── Word bank ────────────────────────────────────────────────── */
.ysp-gf-bank {
    display: flex; flex-wrap: wrap; gap: .45rem;
    border: 1px solid #d4b98a; border-radius: 8px;
    padding: .6rem .7rem; margin-bottom: .8rem; background: #fff;
}
.ysp-gf-bank-word {
    padding: .1rem .55rem; border: 1px solid #c9b48c; border-radius: 999px;
    font-size: .9rem; background: #faf6ee;
}
.ysp-gf-bank-word.ysp-gf-bank-used { text-decoration: line-through; opacity: .45; }

/* ── Item ─────────────────────────────────────────────────────── */
.ysp-gf-item {
    position: relative; padding: .7rem .8rem .7rem 2.4rem;
    border-bottom: 1px dotted #e0d8c8;
}
.ysp-gf-item:last-child { border-bottom: 0; }
.ysp-gf-item-num {
    position: absolute; left: .3rem; top: .75rem;
    min-width: 1.5em; text-align: center; font-weight: 700; color: #9a865f;
}
.ysp-gf-cue { color: #8a7a5c; font-style: italic; white-space: nowrap; margin-left: .3rem; }

.ysp-gf-example { background: #f7f3ea; border-radius: 8px; }
.ysp-gf-example .ysp-gf-gap { background: #efe8d8; color: #4e6b3a; font-weight: 600; }
.ysp-gf-example-tag { font-size: .8rem; color: #4e6b3a; margin-left: .5rem; }

/* ── Gap inputs ───────────────────────────────────────────────── */
.ysp-gf-gap {
    display: inline-block; min-width: 110px; max-width: 100%;
    border: 0; border-bottom: 2px solid #b08d57; border-radius: 0;
    background: #fff; padding: .05rem .3rem; margin: 0 .15rem;
    font: inherit; text-align: center;
}
.ysp-gf-gap:focus { outline: none; border-bottom-color: #7a5c2e; background: #fdf9f0; }
.ysp-gf-gap-full  { display: block; width: 100%; text-align: left; margin-top: .3rem; min-height: 1.9em; }
.ysp-gf-answer-line { margin-top: .35rem; display: flex; align-items: baseline; gap: .35rem; }
.ysp-gf-stem-start  { font-weight: 600; white-space: nowrap; }

.ysp-gf-gap-correct { border-bottom-color: #3f8f4e; background: #eef7ef; color: #2d6a38; font-weight: 600; }
.ysp-gf-gap-wrong   { border-bottom-color: #c0392b; background: #fdeeec; }
.ysp-gf-gap-near    { border-bottom-color: #d49a21; background: #fdf6e4; }

/* ── Controls / feedback ──────────────────────────────────────── */
.ysp-gf-controls { margin-top: .45rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ysp-gf-check-btn {
    background: #b08d57; color: #fff; border: 0; border-radius: 8px;
    padding: .3rem .9rem; cursor: pointer; font-size: .9rem;
}
.ysp-gf-check-btn:hover { background: #96763f; }
.ysp-gf-answered .ysp-gf-check-btn { display: none; }

.ysp-gf-feedback  { font-size: .9rem; font-weight: 600; }
.ysp-gf-fb-correct { color: #2d6a38; }
.ysp-gf-fb-wrong   { color: #c0392b; }
.ysp-gf-fb-near    { color: #b07d10; }

.ysp-gf-explanation {
    margin-top: .4rem; font-size: .9rem; color: #5d4e37;
    background: #f7f3ea; border-radius: 8px; padding: .45rem .7rem;
}

/* ── Score bar ────────────────────────────────────────────────── */
.ysp-gf-score-bar {
    margin-top: 1rem; padding: .6rem .9rem; border-radius: 10px;
    background: #2c2a26; color: #f4e8cf; font-weight: 700;
    display: flex; gap: .6rem; align-items: baseline;
}

/* ── Mobile variant ───────────────────────────────────────────── */
.ysp-gf-mobile .ysp-gf-gap { min-width: 90px; font-size: 16px; /* prevent iOS zoom */ }
.ysp-gf-mobile .ysp-gf-item { padding-left: 2rem; }
.ysp-gf-mobile-note {
    background: #f4eee3; border-radius: 8px; padding: .6rem .8rem;
    color: #7a6a4f; font-size: .9rem;
}
@media (max-width: 600px) {
    .ysp-gf-set { padding: .8rem; }
    .ysp-gf-gap { min-width: 84px; font-size: 16px; }
    .ysp-gf-check-btn { padding: .45rem 1.1rem; }
}