/* Graded reader library (/stories) — hub cards and the story reader. */

/* ---------- Hub ---------- */
.st-card {
    transition: transform 0.15s ease;
}

.st-card:hover {
    transform: translateY(-2px);
}

.st-card-zh {
    font-size: 1.35rem;
    line-height: 1.25;
}

.st-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Reader ---------- */
.st-line {
    padding: 0.65rem 0.2rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.st-line:last-child {
    border-bottom: 0;
}

.st-zh {
    font-size: 1.7rem;
    line-height: 2.4;
}

/* One annotated word: hanzi with ruby pinyin above. Tap/hover reveals the meaning. */
.st-word {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted transparent;
}

.st-word:hover,
.st-word.is-open {
    border-bottom-color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, 0.08);
    border-radius: 0.2rem;
}

.st-word ruby rt {
    font-size: 0.44em;
    line-height: 1.1;
    opacity: 0.8;
    font-weight: 400;
}

/* Pinyin off: hide the ruby text but keep the line height stable so the page
   doesn't jump when the toggle is flipped. */
.st-nopinyin .st-word ruby rt {
    visibility: hidden;
}

.st-en {
    font-size: 1rem;
    opacity: 0.8;
    padding-left: 0.2rem;
}

.st-noenglish .st-en {
    display: none;
}

.st-audio-btn {
    min-width: 2.3rem;
}

/* Tap-a-word definition popup */
.st-popup {
    position: absolute;
    z-index: 30;
    max-width: 16rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.35;
    background: var(--bs-dark, #212529);
    color: #fff;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
}

.st-popup .st-popup-py {
    color: #9ec5fe;
    font-weight: 600;
}

/* ---------- English reader (/chs/English/Stories) ---------- */
.st-en-text {
    font-size: 1.4rem;
    line-height: 1.75;
}

.st-zh-line {
    font-size: 1.05rem;
    opacity: 0.8;
    padding-left: 0.1rem;
}

.st-nochinese .st-zh-line {
    display: none;
}

/* ---------- Key words ---------- */
.st-keyword {
    font-size: 1.5rem;
    line-height: 2.1;
}

.st-keyword ruby rt {
    font-size: 0.45em;
    opacity: 0.8;
}

/* ---------- Quiz ---------- */
.st-quiz-option {
    text-align: left;
}

.st-quiz-feedback {
    min-height: 1.6rem;
}

@media (max-width: 575.98px) {
    .st-zh {
        font-size: 1.4rem;
        line-height: 2.3;
    }
}

@media print {
    .st-no-print,
    .ad-container,
    .ad-placeholder {
        display: none !important;
    }
}