/* English But Better — Pronunciation section (hub + topic pages). Shared by pronunciation/*.html */
/* ---- sections ---- */
.pr-body { margin-bottom: 8px; }
.pr-body h3 { font-size: 1.05rem; margin: 26px 0 8px; scroll-margin-top: calc(var(--nav-h, 80px) + 16px); }
.pr-body p { margin-bottom: 12px; }
.pr-ipa { font-family: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', 'Lucida Sans Unicode', 'Arial Unicode MS', Arial, sans-serif; white-space: nowrap; }
.pr-steps { margin: 10px 0 16px 0; padding-left: 20px; }
.pr-steps li { margin-bottom: 6px; }
.pr-ex { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 12px; padding: 22px; margin-top: 18px; }
.pr-ex-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.pr-ex .ex-desc { margin-bottom: 14px; }
.pr-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pr-actions .check-btn { margin-top: 0; }
.pr-reset { background: transparent; color: var(--blue); border: 2px solid var(--blue); border-radius: 999px; padding: 9px 22px; font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 600; cursor: pointer; }
.pr-reset:hover { background: var(--blue); color: var(--white); }
.pr-ex .ex-score { margin-top: 0; }

/* ---- sort engine ---- */
.prs-label { font-size: .85rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prs-zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; }
.prs-bank { background: var(--white); border: 2px dashed var(--gray-mid); border-radius: 14px; padding: 12px; min-height: 60px; margin-bottom: 16px; }
.prs-cols { display: grid; gap: 12px; }
.prs-cols.c2 { grid-template-columns: repeat(2, 1fr); }
.prs-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.prs-col { border: 2px solid var(--prs-c); background: var(--prs-bg); border-radius: 14px; display: flex; flex-direction: column; min-width: 0; }
.prs-col .prs-zone { padding: 10px; min-height: 170px; flex: 1; }
.prs-head { text-align: center; font-size: 1.35rem; font-weight: 700; color: #fff; background: var(--prs-c); padding: 6px 4px; border-radius: 10px 10px 0 0; }
.prs-head small { display: block; font-size: .72rem; font-weight: 500; opacity: .92; }
.prs-col:nth-child(1) { --prs-c: #F57C00; --prs-bg: #FFF6EB; }
.prs-col:nth-child(2) { --prs-c: #6A3FC8; --prs-bg: #F5F0FE; }
.prs-col:nth-child(3) { --prs-c: #1B6FD8; --prs-bg: #EDF4FF; }
.prs-over { outline: 3px dashed var(--blue); outline-offset: -3px; }
.prs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--gray-mid); background: var(--white); color: var(--black); font-size: .92rem; font-weight: 500; line-height: 1.35; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.prs-col .prs-chip { border-color: var(--prs-c); }
.prs-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.prs-chip.prs-sel { background: var(--blue-light); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(27,156,216,.3); }
.prs-chip.prs-dragging { opacity: .3; }
.prs-col .prs-chip.prs-ok  { border-color: var(--green); background: #E8F8EE; }
.prs-col .prs-chip.prs-bad { border-color: var(--red); background: #FDECEA; }
.prs-fix { display: none; font-size: .76rem; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 0 7px; }
.prs-chip.prs-bad .prs-fix { display: inline-block; }
.prs-ghost { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%, -60%) scale(1.08); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
@media (max-width: 560px) {
  .prs-cols { gap: 6px; }
  .prs-col .prs-zone { padding: 6px; gap: 5px; min-height: 150px; }
  .prs-head { font-size: 1.1rem; }
  .prs-chip { font-size: .78rem; padding: 4px 8px; gap: 4px; }
  .prs-fix { font-size: .66rem; padding: 0 5px; }
}

/* ---- choice / stress / schwa items ---- */
.pri { margin-bottom: 18px; }
.pri-q { font-weight: 500; line-height: 1.55; margin-bottom: 8px; }
.pri-num { font-weight: 700; color: var(--blue); margin-right: 6px; }
.pri-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pri-opt { font-family: inherit; font-size: .92rem; background: var(--white); color: var(--text); border: 2px solid var(--gray-mid); border-radius: 999px; padding: 6px 16px; cursor: pointer; transition: border-color .12s, background .12s; }
.pri-opt:hover { border-color: var(--blue); }
.pri-opt.pri-pick { border-color: var(--blue); background: var(--blue-light); }
.pri-opt.opt-correct { border-color: var(--green); background: #E8F8EE; color: #1b6b3d; }
.pri-opt.opt-user-wrong { border-color: var(--red); background: #FDECEA; color: #a8281c; }
.pri-opt.pri-miss { border-color: var(--green); border-style: dashed; background: #F4FBF7; }
.pri-syls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pri-syl { font-family: inherit; font-size: 1.05rem; background: var(--white); color: var(--text); border: 2px solid var(--gray-mid); border-radius: 10px; padding: 7px 14px; cursor: pointer; min-width: 44px; }
.pri-syl:hover { border-color: var(--blue); }
.pri-syl.pri-pick { border-color: var(--blue); background: var(--blue-light); }
.pri-syl.opt-correct { border-color: var(--green); background: #E8F8EE; }
.pri-syl.opt-user-wrong { border-color: var(--red); background: #FDECEA; }
.pri-syl.pri-miss { border-color: var(--green); border-style: dashed; background: #F4FBF7; }
.pri-dot { color: var(--gray-mid); font-weight: 700; }
.pri .ex-input { min-width: 150px; font-size: 1rem; }

/* ---- twister picker ---- */
.prw-card { background: var(--white); border: 2px solid var(--blue); border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 14px; }
.prw-text { font-size: 1.25rem; font-weight: 600; line-height: 1.5; margin-bottom: 6px; }
.prw-focus { font-size: .9rem; color: var(--text-light); }
.prw-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.prw-ladder label { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--gray-mid); border-radius: 10px; padding: 9px 12px; font-size: .9rem; cursor: pointer; }
.prw-ladder input { margin: 0; }
.prw-ladder label.prw-done { border-color: var(--green); background: #E8F8EE; }
  
.sidebar-links li.pr-here a { background: var(--blue-light); color: var(--blue); font-weight: 700; }
.sidebar-note { font-size: .78rem; color: var(--text-light); margin: 12px 0 4px; }
.pr-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
.pr-card { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--gray-mid); border-radius: 14px; padding: 20px; text-decoration: none; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s; }
.pr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); }
.pr-card-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: .9rem; }
.pr-card h2 { font-size: 1.05rem; margin: 4px 0 0; color: var(--black); }
.pr-card p { font-size: .88rem; color: var(--text-light); margin: 0; flex: 1; }
.pr-card-tag { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-top: 6px; }
.pr-card-ed { border-style: dashed; }

/* ---- speaker icons (assets/pronunciation.js) ---- */
.pr-spk { width: 24px; height: 24px; margin: 0 0 0 5px; font-size: .75rem; flex: none; }
.pr-spk-late { display: none; }
.pr-checked .pr-spk-late { display: inline-flex; }
.prs-chip .pr-spk { width: 22px; height: 22px; margin: 0 -4px 0 0; font-size: .68rem; cursor: pointer; }
.pri-q .pr-spk, .pri .pr-spk { vertical-align: middle; margin-top: 0; }
.prw-spk { text-align: center; min-height: 30px; margin-top: 8px; }
.prw-spk .pr-spk { width: 32px; height: 32px; font-size: .95rem; }
.pr-w + .pr-spk { margin-top: 0; }
@media (max-width: 560px) { .prs-chip .pr-spk { width: 20px; height: 20px; font-size: .62rem; } }
/* ---- recorded IPA sounds ---- */
.pr-sound { background: var(--blue-light); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; padding: 10px 16px; margin: 10px 0 18px; font-size: 1.05rem; }
.pr-sound .pr-ipa { font-size: 1.3rem; }
.pr-sound .pr-spk { width: 32px; height: 32px; font-size: .95rem; }
.pr-sound-sep { color: var(--text-light); margin: 0 4px; }
.prs-head .pr-spk { margin: 0 0 2px 8px; width: 26px; height: 26px; }
th .pr-spk { margin: 0 0 1px 6px; width: 24px; height: 24px; background: #fff; }
td .pr-ipa + .pr-spk, td a.pr-ipa + .pr-spk { margin-top: 0; }
/* ---- listen and choose ---- */
.prl .prl-stim { display: inline-block; vertical-align: middle; }
.prl .vl-btn.pr-stim { width: 38px; height: 38px; margin: 0 10px 0 0; font-size: 1.1rem; }
.prl .pri-q { line-height: 2.2; }
.prl .pri-opt { min-width: 84px; font-size: 1rem; }
.prl .pri-opt.pr-ipa { font-size: 1.1rem; }
/* ---- listen and drag (sentence gap) ---- */
.prf-bank { background: var(--white); border: 2px dashed var(--gray-mid); border-radius: 14px; padding: 12px; min-height: 60px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.prf-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-bottom: 14px; font-size: 1.05rem; line-height: 2.3; }
.prf-item .pri-num { margin-right: 6px; min-width: 24px; }
.prf-text { display: inline; }
.prf-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; min-height: 40px; margin: 0 5px; padding: 2px 6px; vertical-align: middle; border: 2px dashed var(--blue); border-radius: 12px; background: var(--blue-light); }
.prf-slot.prs-over { outline: 3px dashed var(--blue); outline-offset: 2px; }
.prf-slot.prf-ok { border-style: solid; border-color: var(--green); background: #E8F8EE; }
.prf-slot.prf-bad { border-style: solid; border-color: var(--red); background: #FDECEA; }
.prf-slot .prs-chip.prs-ok { border-color: var(--green); background: #E8F8EE; }
.prf-slot .prs-chip.prs-bad { border-color: var(--red); background: #FDECEA; }
.prf-fix { margin-left: 8px; font-weight: 700; font-size: .9rem; color: var(--green); }
.prf-item .vl-btn.pr-stim { width: 38px; height: 38px; margin: 0 10px 0 0; font-size: 1.1rem; }
/* ---- exercises inside the site's tab box ---- */
.ex-box .pr-ex { background: none; border: none; padding: 0; margin-top: 0; }
.ex-box .pr-ex-title { margin-top: 2px; }
.ex-box .ex-tab-btn { white-space: nowrap; }
/* ---- homophones ---- */
.hp-m { color: var(--text-light); font-size: .88rem; }
/* ---- sentence stress ---- */
.ss-level { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; background: var(--blue-light); color: var(--blue); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.ss-beat { font-weight: 800; color: var(--blue); }
.ss-lines { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 12px; padding: 10px 18px; margin: 10px 0 16px; }
.ss-lines .ss-line { font-size: 1.08rem; margin: 8px 0; }
.ss-pattern { color: var(--text-light); letter-spacing: .02em; }
.ss-list { list-style: none; padding: 0; margin: 8px 0 14px; }
.ss-list li { font-size: 1.05rem; padding: 4px 0; }
.ss-ipa-line { font-size: 1.15rem; margin: 6px 0 12px; }
.ss-ipa-line .pr-ipa { font-size: 1.25rem; }
.ss-compare { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 16px; }
.ss-cmp { background: var(--white); border: 2px solid var(--gray-mid); border-radius: 12px; padding: 12px 16px; font-size: 1.05rem; line-height: 1.7; }
.ss-cmp-note { color: var(--text-light); font-size: .9rem; }
@media (min-width: 640px) { .ss-compare { grid-template-columns: 1fr 1fr; } }
/* the "ENBB ADVICE" box: purple, so it never looks like theory or the amber tip-box */
.ss-advice { background: #F5F0FE; border: 2px solid #6A3FC8; border-radius: 14px; padding: 16px 20px; margin: 22px 0; }
.ss-advice p { margin-bottom: 10px; }
.ss-advice-title { display: inline-block; background: #6A3FC8; color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .04em; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.ss-try { font-size: 1.08rem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ss-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: .85rem; margin-right: 6px; flex: none; }
.ss-wrong .ss-mark { background: var(--red); }
.ss-right .ss-mark { background: var(--green); }
.ss-wrong .ss-beat { color: var(--red); }
/* underlined preposition in exercises 2-3 */
.pri-q u { text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 700; }
/* explanation + audio: shown only after "Check answers" (the audio would give the answer away) */
.pri-why { display: none; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; font-size: .88rem; color: var(--text-light); }
.pr-checked .pri-why { display: flex; }
.pri-why .pr-spk { margin: 0 4px 0 0; }

/* ---- stress shift: "listen first" pairs, multi-line explanations, listen-first exercise ---- */
.sh-pairs { display: grid; gap: 10px; margin: 10px 0 16px; }
.sh-pair { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: center; background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 12px; padding: 10px 16px; font-size: 1.05rem; }
.sh-arrow { color: var(--text-light); font-weight: 700; }
.sh-note { color: var(--text-light); font-size: .88rem; white-space: nowrap; }
@media (min-width: 760px) { .sh-pair { grid-template-columns: 1fr auto 1.15fr; gap: 14px; } }
.pri-why-col { flex-direction: column; align-items: flex-start; gap: 2px; }
.pr-checked .pri-why-col { display: flex; }
.pri-why-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ss-listen { font-weight: 600; margin-left: 4px; }
.pr-needs .pri-q .pr-spk { width: 38px; height: 38px; font-size: 1.1rem; margin: 0 6px 0 0; }
.pr-related { font-size: .92rem; color: var(--text-light); margin: 24px 0 0; }
.ss-body .tip-box p { margin: 6px 0 0; }
/* section titles of the sentence-stress page */
.ss-body h2 { font-size: 1.55rem; line-height: 1.25; font-weight: 700; margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid var(--gray-mid); scroll-margin-top: calc(var(--nav-h, 80px) + 16px); }
.ss-body h2:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
@media (max-width: 560px) { .ss-body h2 { font-size: 1.3rem; margin-top: 36px; padding-top: 20px; } }