/* Interactive component styles. Colours/fonts come from theme CSS
   variables (with safe fallbacks) so the plugin and theme share one
   visual identity without duplicating the palette. */

.psc-vocab-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.psc-vocab-card { background: var(--psc-color-surface, #fff); border: 2px solid var(--psc-color-border, #e2e2e2); border-radius: 14px; padding: 1rem; text-align: center; }
.psc-vocab-card img { max-width: 100%; height: auto; border-radius: 10px; margin-bottom: .5rem; }
.psc-vocab-word { display: block; font-weight: 700; font-size: 1.1rem; }
.psc-vocab-translation { display: block; color: var(--psc-color-muted, #555); font-size: .95rem; }

.psc-audio-play { margin-top: .5rem; border: 2px solid var(--psc-color-secondary, #2EC4B6); background: transparent; color: var(--psc-color-secondary, #2EC4B6); border-radius: 999px; padding: .3rem .8rem; font-size: .9rem; cursor: pointer; min-height: 44px; }
.psc-audio-play:hover, .psc-audio-play:focus-visible { background: var(--psc-color-secondary, #2EC4B6); color: #fff; }

.psc-learn-block { margin-bottom: 1.5rem; }
.psc-learn-block img { max-width: 100%; border-radius: 14px; margin-bottom: .75rem; }

/* Quiz */
.psc-quiz { background: var(--psc-color-surface, #fff); border-radius: 16px; padding: 1.5rem; border: 2px solid var(--psc-color-border, #e2e2e2); }
.psc-quiz-question legend { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.psc-quiz-options { display: flex; flex-direction: column; gap: .6rem; }
.psc-quiz-option { text-align: left; min-height: 48px; padding: .6rem 1rem; border-radius: 12px; border: 2px solid var(--psc-color-border, #ccc); background: #fff; font-size: 1rem; cursor: pointer; }
.psc-quiz-option:hover:not(:disabled), .psc-quiz-option:focus-visible { border-color: var(--psc-color-primary, #2B3A67); }
.psc-quiz-option.is-correct { border-color: var(--psc-color-success, #1B7F4C); font-weight: 700; }
.psc-quiz-option.is-incorrect { border-color: var(--psc-color-error, #B3261E); }
.psc-quiz-feedback { margin-top: .75rem; font-weight: 700; min-height: 1.3em; }
.psc-quiz-controls { margin-top: 1rem; }

.psc-btn, .psc-btn-outline { display: inline-block; min-height: 44px; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1rem; cursor: pointer; border: 2px solid transparent; text-decoration: none; }
.psc-btn { background: var(--psc-color-accent, #FF6B35); color: #fff; }
.psc-btn:hover, .psc-btn:focus-visible { background: var(--psc-color-accent-dark, #e05a28); }
.psc-btn-outline { background: transparent; border-color: var(--psc-color-primary, #2B3A67); color: var(--psc-color-primary, #2B3A67); }

/* Flashcards */
.psc-flashcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.psc-flashcard { perspective: 1000px; background: none; border: none; padding: 0; cursor: pointer; min-height: 140px; }
.psc-flashcard-inner { display: block; position: relative; min-height: 140px; border-radius: 14px; border: 2px solid var(--psc-color-border, #e2e2e2); background: var(--psc-color-surface, #fff); padding: 1rem; }
.psc-flashcard-back { display: none; font-weight: 700; }
.psc-flashcard.is-flipped .psc-flashcard-front { display: none; }
.psc-flashcard.is-flipped .psc-flashcard-back { display: block; }
.psc-flashcard-front img { max-width: 100%; border-radius: 10px; margin-bottom: .5rem; }

/* Match */
.psc-match-columns { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.psc-match-column { flex: 1 1 200px; display: flex; flex-direction: column; gap: .6rem; }
.psc-match-item { min-height: 44px; padding: .6rem 1rem; border-radius: 12px; border: 2px solid var(--psc-color-border, #ccc); background: #fff; cursor: pointer; font-size: 1rem; }
.psc-match-item.is-selected { border-color: var(--psc-color-primary, #2B3A67); }
.psc-match-item.is-matched { border-color: var(--psc-color-success, #1B7F4C); opacity: .6; }
.psc-match-result { font-weight: 700; margin-top: 1rem; min-height: 1.3em; }

/* Passport */
.psc-passport-row { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--psc-color-border, #e2e2e2); }
.psc-passport-statement { font-weight: 700; font-size: 1.05rem; }
.psc-passport-options { display: flex; gap: .6rem; flex-wrap: wrap; }
.psc-passport-option { min-height: 44px; padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--psc-color-border, #ccc); background: #fff; cursor: pointer; }
.psc-passport-option.is-selected { border-color: var(--psc-color-primary, #2B3A67); background: var(--psc-color-primary, #2B3A67); color: #fff; font-weight: 700; }
.psc-passport-note { font-style: italic; color: var(--psc-color-muted, #555); }

/* Worksheets */
.psc-worksheets { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; flex-wrap: wrap; }

/* Homepage timeline */
.psc-timeline { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; overflow-x: auto; }
.psc-timeline-stop a { display: block; min-width: 130px; padding: .75rem 1rem; border-radius: 14px; border: 2px solid var(--psc-color-border, #ccc); text-decoration: none; color: inherit; }
.psc-timeline-unit { display: block; font-size: .8rem; color: var(--psc-color-muted, #555); }
.psc-timeline-title { display: block; font-weight: 700; margin: .25rem 0; }
.psc-timeline-state { display: block; font-size: .8rem; }
.psc-timeline-complete a { border-color: var(--psc-color-success, #1B7F4C); }
.psc-timeline-current a { border-color: var(--psc-color-accent, #FF6B35); border-width: 3px; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}