/* ==========================================================================
   Learn Creole: hub, lessons list, dictionary, word pages, quiz, phrasebook
   ========================================================================== */

.wotd-band { background: var(--lagoon-wash); }
.wotd-band .wotd__word { font-size: var(--step-4); }

/* Lesson list */
.lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lesson-row { background: var(--surface); border-radius: var(--r-lg); transition: background-color .15s; }
.lesson-row:hover { background: var(--lagoon-wash); }
.lesson-row a { display: grid; grid-template-columns: 3rem 1fr; gap: 0.25rem 1rem; padding: 1.15rem 1.25rem; color: var(--ink); text-decoration: none; }
@media (min-width: 720px) { .lesson-row a { grid-template-columns: 4rem 1fr auto; align-items: center; } }
.lesson-row__num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--lagoon); grid-row: span 2;  letter-spacing: -0.015em; }
@media (min-width: 720px) { .lesson-row__num { grid-row: auto; font-size: 2.3rem; } }
.lesson-row__body strong { display: block; font-family: var(--font-display); font-weight: 650; letter-spacing: -0.015em; font-size: var(--step-1); }
.lesson-row__body span { display: block; color: var(--ink-soft); font-size: 0.93rem; margin-top: 0.15rem; }
.lesson-row__meta { display: flex; gap: 0.4rem 0.9rem; flex-wrap: wrap; align-items: center; font-size: 0.82rem; color: var(--ink-mute); }
.lesson-row__meta em { font-style: normal; font-weight: 700; color: var(--lagoon); }
.lesson-row a:hover strong { color: var(--lagoon); }
.lesson-row.is-locked .lesson-row__num { color: var(--ink-mute); }
.lesson-row.is-done .lesson-row__num { color: var(--cane); }
.lesson-row__done { color: var(--lagoon); font-weight: 700; }

.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 1rem 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 1rem;  letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--lagoon); font-family: var(--font-body); }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--ink-soft); padding-bottom: 1rem; margin: 0; }

/* Dictionary */
.dict-search { position: relative; max-width: 36rem; margin-top: 1.25rem; }
.dict-search .icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }
.dict-search .field { padding-left: 2.75rem; min-height: 3.1rem; font-size: 1.05rem; }
.dict-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 0.75rem; }
.dict-meta p { margin: 0; }
.dict-count { font-size: 0.85rem; color: var(--ink-mute); font-weight: 600; }
.dict-hint { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-mute); }
.dict-hint .icon { color: var(--lagoon); flex: none; }
/* Rows open the word page: the whole row is the link, with a chevron as the cue. */
[data-dict-list] li a { flex: 1; position: relative; padding-right: 1.75rem; min-height: 2.75rem; align-content: center; }
[data-dict-list] li a::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-mute); border-top: 2px solid var(--ink-mute); transform: translateY(-50%) rotate(45deg); transition: transform .15s, border-color .15s; }
[data-dict-list] li a:hover::after { border-color: var(--lagoon); transform: translate(3px, -50%) rotate(45deg); }
.dict-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .dict-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
@media (min-width: 1080px) { .dict-list { grid-template-columns: repeat(3, 1fr); } }
.dict-list li { display: flex; gap: 0.75rem; align-items: center; border-bottom: 1px solid var(--rule); padding-block: 0.6rem; }
.dict-list a { display: grid; color: var(--ink); text-decoration: none; min-width: 0; }
.dict-list strong { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem;  letter-spacing: -0.015em; }
.dict-list a span { color: var(--ink-soft); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.dict-list a:hover strong { color: var(--lagoon); }
.dict-list .speak-btn { flex: none; }
.dict-list--compact { grid-template-columns: 1fr; }
@media (min-width: 600px) { .dict-list--compact { grid-template-columns: repeat(2, 1fr); } }
.dict-empty { color: var(--ink-mute); grid-column: 1 / -1; }

.learn-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--rule); padding: 1.1rem 1.25rem; margin-top: 2.5rem; }
.learn-cta p { margin: 0; }

/* Word page */
.word { padding-block: 1.5rem 3rem; }
.word-layout { display: grid; gap: 2rem; margin-top: 0.5rem; }
@media (min-width: 960px) { .word-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.5rem; align-items: start; } .word-side { position: sticky; top: 6rem; } }
.word-main { min-width: 0; }

.word-card { position: relative; background: var(--lagoon-wash); border-radius: 24px; padding: 1.75rem; margin-bottom: 2rem; overflow: hidden; }
.word-card::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 12rem; height: 12rem; border-radius: 50%; background: radial-gradient(circle, rgb(11 122 117 / .12), transparent 70%); pointer-events: none; }
.word-card__label { font-size: 0.9rem; font-weight: 650; color: var(--lagoon-deep); margin: 0; }
.word-card__creole { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); color: var(--ink); margin: 0.2rem 0 0.35rem; line-height: 1.02; overflow-wrap: anywhere; }
.word-card__english { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 1.35rem; color: var(--lagoon-deep); }
.word-card__english span { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; }
.word-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.word-card__actions .btn { gap: 0.45rem; }
.word-card__actions .btn--ghost { background: var(--paper); }
.word-card__share { padding-inline: 0.85rem; }
.word-card__cat { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid rgb(11 122 117 / .18); font-size: 0.92rem; color: var(--ink-mute); }
.word-card__cat a { margin-left: 0.35rem; font-weight: 650; }

.word-explain { color: var(--ink-soft); }
.word-section { margin-top: 2.25rem; }
.word-section h2, .word-quiz h2, .word-side__box h2 { font-size: 1.2rem; margin: 0 0 0.85rem; }

.word-quiz { margin-top: 2.25rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.word-quiz__q { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0 0 1rem; font-size: 1.05rem; }
.word-quiz__q strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--lagoon-deep); }
.word-quiz__options { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.word-quiz__option { min-height: 3rem; padding: 0.6rem 1rem; text-align: left; background: var(--paper); border: 1.5px solid var(--rule); border-radius: var(--radius); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s; }
.word-quiz__option:hover:not(:disabled) { border-color: var(--lagoon); }
.word-quiz__option:disabled { cursor: default; opacity: 0.7; }
.word-quiz__option.is-correct { opacity: 1; border-color: var(--lagoon); background: var(--lagoon-wash); color: var(--lagoon-deep); }
.word-quiz__option.is-wrong { opacity: 1; border-color: #D9643F; background: #FDECEA; color: #8A2F22; }
.word-quiz__result { margin: 1rem 0 0; font-weight: 650; }
.word-quiz__result.is-right { color: var(--lagoon-deep); }
.word-quiz__result.is-miss { color: #8A2F22; }
.word-quiz__more { margin: 0.35rem 0 0; }
.word-quiz > .text-link { margin-top: 1rem; }

.word-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2.5rem; }
.word-pager a { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border: 1.5px solid var(--rule); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; min-width: 0; }
.word-pager a:hover { border-color: var(--lagoon); }
.word-pager a span { display: grid; min-width: 0; }
.word-pager small { font-size: 0.8rem; color: var(--ink-mute); }
.word-pager strong { font-family: var(--font-display); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.word-pager .icon { flex: none; color: var(--lagoon); }
.word-pager__next { grid-column: 2; justify-content: flex-end; text-align: right; }

.word-side { display: grid; gap: 1.25rem; }
.word-side__box { padding: 1.35rem; background: var(--surface); border-radius: var(--r-lg); }
.dict-list--side { grid-template-columns: 1fr !important; border-top: 0; margin-bottom: 1rem; }
.dict-list--side li { padding-block: 0.45rem; }
.dict-list--side strong { font-size: 1.02rem; }
.word-side__learn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.word-side__learn a { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.25rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.word-side__learn a:hover strong { color: var(--lagoon-deep); }
.word-side__learn .icon { flex: none; width: 2.3rem; height: 2.3rem; padding: 0.5rem; border-radius: var(--radius); background: var(--paper); color: var(--lagoon); }
.word-side__learn span { display: grid; }
.word-side__learn strong { font-family: var(--font-display); font-weight: 650; }
.word-side__learn small { font-size: 0.85rem; color: var(--ink-mute); }
.word-reading { background: var(--paper-deep); }

@media (max-width: 599px) {
  .word { padding-top: 1rem; }
  .word-card { padding: 1.25rem; border-radius: var(--r-lg); margin-bottom: 1.5rem; }
  .word-card__english { font-size: 1.35rem; margin-bottom: 1.1rem; }
  .word-card__actions .btn:first-child { flex: 1 1 auto; justify-content: center; }
  .word-quiz { padding: 1.1rem; }
  .word-pager a { padding: 0.75rem; gap: 0.5rem; }
  .word-side__box { padding: 1.1rem; }
}

/* Practice */
.streak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.streak div { padding: 0.75rem 0.5rem 0.25rem 0; }
.streak div + div { border-left: 1px solid var(--rule); padding-left: 0.75rem; }
.streak dt { font-size: 0.92rem; font-weight: 650; color: var(--ink-mute); }
.streak dd { margin: 0.15rem 0 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; display: flex; align-items: center; gap: 0.3rem;  letter-spacing: -0.015em; }
.streak dd .icon { color: var(--coral); }

.quiz-modes { display: flex; gap: 0.25rem 1.25rem; overflow-x: auto; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; scrollbar-width: none; }
.quiz-modes::-webkit-scrollbar { display: none; }
.quiz-modes button { display: inline-flex; gap: 0.4rem; align-items: center; white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.7rem 0; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.quiz-modes button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lagoon); }
.quiz-options { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.25rem; }
.quiz-options .field { max-width: 16rem; }

.quiz { min-height: 22rem; }
.quiz__loading { color: var(--ink-mute); }
.quiz__top { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-mute); margin-bottom: 0.5rem; }
.quiz__bar { height: 4px; background: var(--paper-deep); margin-bottom: 1.5rem; }
.quiz__bar span { display: block; height: 100%; background: var(--lagoon); transition: width .3s; }
.quiz__q { font-size: var(--step-2); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.quiz__q:focus { outline: none; }
.quiz__options { display: grid; gap: 0.6rem; }
@media (min-width: 600px) { .quiz__options { grid-template-columns: 1fr 1fr; } }
.quiz__opt { display: flex; gap: 0.75rem; align-items: center; text-align: left; min-height: 3.4rem; padding: 0.6rem 0.9rem; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 1.02rem; color: var(--ink); }
.quiz__opt:hover:not(:disabled) { border-color: var(--ink); }
.quiz__key { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border: 1px solid var(--rule); font-size: 0.78rem; font-weight: 700; color: var(--ink-mute); }
.quiz__opt.is-right { border-color: var(--lagoon); background: var(--lagoon-wash); }
.quiz__opt.is-right .quiz__key { background: var(--lagoon); color: var(--on-lagoon); border-color: var(--lagoon); }
.quiz__opt.is-wrong { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.quiz__opt:disabled { cursor: default; }
.quiz__feedback { margin-top: 1.25rem; }
.quiz__feedback p { border-left: 3px solid var(--rule); padding-left: 0.9rem; }
.quiz__feedback p.is-right { border-color: var(--lagoon); }
.quiz__feedback p.is-wrong { border-color: var(--coral); }
.quiz__result { text-align: center; padding-block: 1.5rem; }
.quiz__score { font-family: var(--font-display); font-size: var(--step-2); margin: 0;  letter-spacing: -0.015em; }
.quiz__score strong { font-size: 4.5rem; line-height: 1; font-weight: 650; color: var(--lagoon); }
.quiz__grid { font-size: 1.4rem; letter-spacing: 0.1em; }
.quiz__done { background: var(--cane-wash); padding: 0.6rem 0.9rem; display: inline-block; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; align-items: center; margin-top: 1.25rem; }
.quiz-account { font-size: 0.88rem; color: var(--ink-mute); margin-top: 2rem; }
.quiz-account .icon { margin-right: 0.3rem; }

.flashcard { position: relative; display: grid; place-items: center; width: 100%; min-height: 15rem; border: 1.5px solid var(--rule); background: var(--surface); cursor: pointer; padding: 1.5rem; perspective: 900px; color: var(--ink); }
.flashcard__front, .flashcard__back { font-family: var(--font-display); font-size: var(--step-3); text-align: center; transition: opacity .2s;  letter-spacing: -0.015em; }
.flashcard__back { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; opacity: 0; font-size: var(--step-2); color: var(--lagoon-deep); background: var(--lagoon-wash); }
.flashcard.is-flipped .flashcard__back { opacity: 1; }
.flashcard.is-flipped .flashcard__front { opacity: 0; }

/* Phrasebook */
.phrase-group + .phrase-group { margin-top: 2.5rem; }
.phrase-group h2 { font-size: var(--step-2); }
.phrase-list { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 720px) { .phrase-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; } }
.phrase-list li { border-bottom: 1px solid var(--rule); }
.phrase { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; width: 100%; text-align: left; background: none; border: 0; padding: 0.8rem 0; cursor: pointer; color: var(--ink); }
.phrase__en { color: var(--ink-soft); font-size: 0.92rem; }
.phrase__cr { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; grid-row: 2;  letter-spacing: -0.015em; }
.phrase__icon { grid-row: span 2; align-self: center; color: var(--lagoon); }
.phrase:hover .phrase__cr { color: var(--lagoon); }
.phrase-tip { margin-top: 2.5rem; }

@media print {
  .phrasebook { padding: 0; }
  .hub-head .learn-head__actions, .phrase__icon, .section:not(.phrasebook) { display: none !important; }
  .phrase-list { grid-template-columns: 1fr 1fr; }
  .phrase { padding: 0.35rem 0; }
}