/* English Learning Engine — word & phrase picker (v2.9.0). Shared by tests and book lessons. */
.elct-pop,.elct-toast,.elcw-chip,.elct-lightbox,.elc-course{
  --c-brand:#0b9fc2;--c-brand-d:#07708c;--c-brand-l:#e6f7fb;--c-sun:#ffc93c;--c-sun-l:#fff6d6;
  --c-ink:#14303f;--c-ink-2:#4d6573;--c-line:#d9e6ec;--c-soft:#f4fafc;--c-ok:#15803d;--c-ok-bg:#e8f8ee}
.elct-pop,.elct-toast,.elcw-chip,.elct-lightbox{--font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif}
.elct-pop *,.elct-pop *::before,.elct-pop *::after{box-sizing:border-box}
.elct-pop .elct-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 20px;border-radius:999px;border:2px solid var(--c-brand);background:#fff;color:var(--c-brand-d);font:inherit;font-family:var(--font);font-weight:800;cursor:pointer;line-height:1.2}
.elct-pop .elct-btn.primary{background:var(--c-brand);color:#fff;box-shadow:0 4px 0 var(--c-brand-d)}
.elct-pop .elct-btn[disabled]{opacity:.5;cursor:not-allowed}
.elct-pop .elct-btn:focus-visible,.elct-w:focus-visible,.elcw-chip:focus-visible{outline:3px solid var(--c-sun);outline-offset:2px}
.elct-pop .elct-icon-btn{display:inline-grid;place-items:center;border:0;background:var(--c-brand-l);border-radius:50%;width:42px;height:42px;cursor:pointer;padding:0;flex:0 0 auto}
.elct-pop .elct-icon-btn img{width:24px;height:24px}
.elct-pop .elct-muted{color:var(--c-ink-2)}
.elct-pop p{margin:.4em 0}

/* tappable words */
.elct-w{cursor:pointer;border-radius:4px;transition:background .12s}
.elct-w:hover{background:#fff1a8}
.elct-w.is-open{background:#ffe066}
.elct-w.is-saved{text-decoration:underline;text-decoration-color:var(--c-brand);text-decoration-thickness:2px;text-underline-offset:3px}
.elct-w.is-marked{background:#fff1a8;box-shadow:0 2px 0 var(--c-sun)}

/* popover */
.elct-pop{position:fixed;z-index:100000;width:min(370px,calc(100vw - 24px));max-height:min(82vh,580px);overflow:auto;background:#fff;color:#14303f;border-radius:22px;padding:16px;box-shadow:0 18px 50px rgba(20,48,63,.28);border:2px solid #d9e6ec;font-family:var(--font);font-size:16px;line-height:1.5;animation:elct-in .15s ease}
.elct-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:100%;max-height:85vh;border-radius:24px 24px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@keyframes elct-in{from{opacity:0;transform:translateY(6px)}}
.elct-pop-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer;color:#4d6573;width:40px;height:40px}
.elct-pop-head{display:flex;align-items:center;gap:10px;padding-right:40px}
.elct-pop-img{width:64px;height:64px;flex:0 0 auto;background:var(--c-soft);border-radius:16px;padding:6px}
.elct-pop-word{font-size:1.55rem;font-weight:900}
.elct-pop-ipa{color:#4d6573;margin:2px 0 6px}
.elct-pop textarea{width:100%;font:inherit;font-size:.95rem;border:2px solid #d9e6ec;border-radius:12px;padding:6px 10px;resize:vertical;box-sizing:border-box;font-family:var(--font)}
.elct-pop-vi{font-weight:800}
.elct-lbl{display:block;font-size:.78rem;font-weight:800;color:#4d6573;margin:8px 0 2px}
.elct-pop-ctx{margin:10px 0 0;padding:8px 12px;border-left:4px solid var(--c-brand);background:#f4fafc;border-radius:0 12px 12px 0;font-style:italic}
.elct-pop-ctx mark{background:#fff1a8;font-style:normal;font-weight:800}
.elct-pop-hint{font-size:.86rem;color:#8a5a00;background:var(--c-sun-l);border-radius:10px;padding:6px 10px;margin:4px 0 0}
.elct-pop .elct-btn{width:100%;margin-top:12px}
.elct-pop-guest{margin-top:12px;font-size:.93rem}
.elct-colors{display:flex;gap:10px;margin-top:8px}
.elct-color{position:relative;width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent}
.elct-color input{position:absolute;opacity:0}
.elct-color.c-yellow{background:#fff1a8}.elct-color.c-green{background:#c9f1d6}.elct-color.c-pink{background:#ffd8e8}.elct-color.c-blue{background:#cfe9ff}
.elct-color:has(input:checked){border-color:#14303f}
.elct-color:focus-within{outline:3px solid var(--c-sun)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* toast */
.elct-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:100001;background:#14303f;color:#fff;padding:10px 18px;border-radius:999px;font:700 15px var(--font);opacity:0;pointer-events:none;transition:.2s;max-width:calc(100vw - 32px);text-align:center}
.elct-toast.show{opacity:1;transform:translate(-50%,0)}

.elct-pop-kind{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--c-sun-l);color:#8a5a00;border-radius:999px;padding:2px 9px}
.elct-pop.is-phrase .elct-pop-word{font-size:1.3rem;line-height:1.25}
.elct-pop-ex{font-style:italic;color:var(--c-ink-2);font-size:.92rem}

/* saved / starred phrases: join the words into one highlight */
.elct-w.is-saved-in,.elct-w.is-marked-in{border-top-right-radius:0;border-bottom-right-radius:0}
.elct-w.is-marked-in::after{content:none!important}

/* phrase chip (appears above a selection of 2–8 words) */
.elcw-chip{position:fixed;z-index:100001;display:inline-flex;align-items:center;gap:8px;max-width:min(420px,calc(100vw - 16px));padding:8px 14px;border-radius:999px;border:0;background:#14303f;color:#fff;font:800 14px/1.2 var(--font);cursor:pointer;box-shadow:0 8px 24px rgba(20,48,63,.3);animation:elct-in .12s ease}
.elcw-chip:hover{background:#07708c}
.elcw-chip-txt{font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
@media (prefers-reduced-motion:reduce){.elct-pop,.elcw-chip{animation:none!important}}

/* book lessons: saved words/phrases keep the highlight colour chosen when saving */
.elc-course .elct-w.is-saved{text-decoration:none;padding:0 1px}
.elc-course .elct-w.is-saved[data-c="yellow"]{background:#fff1a8}
.elc-course .elct-w.is-saved[data-c="green"]{background:#c9f3d8}
.elc-course .elct-w.is-saved[data-c="pink"]{background:#ffd8e8}
.elc-course .elct-w.is-saved[data-c="blue"]{background:#d8ebff}
.elc-course .elc-selectable{cursor:auto}
.elc-course .elct-w.is-saved-in[data-c="yellow"]{box-shadow:.3em 0 0 #fff1a8}
.elc-course .elct-w.is-saved-in[data-c="green"]{box-shadow:.3em 0 0 #c9f3d8}
.elc-course .elct-w.is-saved-in[data-c="pink"]{box-shadow:.3em 0 0 #ffd8e8}
.elc-course .elct-w.is-saved-in[data-c="blue"]{box-shadow:.3em 0 0 #d8ebff}
.elct-w.is-marked-in{box-shadow:.3em 0 0 #fff1a8,0 2px 0 var(--c-sun,#ffc93c),.3em 2px 0 var(--c-sun,#ffc93c)}
