/* HSKK speaking-exam hub (/hsk/hskk). Loaded alongside speakingpractice.css, which owns the
   mic button, the metric tiles and the per-character grading chips. Only what is specific to
   a sentence-length prompt and to the three exam formats lives here. */

.hskk-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 40%),
        linear-gradient(135deg, #7c2d92 0%, #b5179e 55%, #d62828 100%);
}

.hskk-hero .hero-kicker {
    letter-spacing: 0.14em;
    opacity: 0.82;
}

.hskk-hero .hero-copy {
    max-width: 44rem;
    opacity: 0.93;
}

/* A whole sentence, not a word: 3.4rem (the speakingpractice.css default) wraps to four
   lines on a phone and pushes the mic button off screen. */
#targetHanzi {
    font-size: 1.85rem;
    line-height: 1.45;
}

#targetPinyin {
    font-size: 1.05rem;
    line-height: 1.5;
}

@media (min-width: 992px) {
    #targetHanzi { font-size: 2.2rem; }
    #targetPinyin { font-size: 1.2rem; }
}

/* 听后重复: the prompt is deliberately unreadable until it has been graded. */
.hskk-veil {
    padding: 1.75rem 1rem;
    border: 2px dashed rgba(181, 23, 158, 0.35);
    border-radius: 0.75rem;
    background: rgba(181, 23, 158, 0.06);
}

.hskk-veil-icon {
    font-size: 2.4rem;
    color: #b5179e;
}

[data-bs-theme="dark"] .hskk-veil-icon { color: #e879c7; }

/* The native answer, shown once the learner has spoken. */
.hskk-model {
    border-left: 4px solid #b5179e;
    background: rgba(181, 23, 158, 0.07);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.hskk-model-text {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
}

.hskk-model-pinyin {
    color: #b5179e;
    font-weight: 500;
}

[data-bs-theme="dark"] .hskk-model-pinyin { color: #e879c7; }

/* Exam-structure table: three level columns that stack rather than scroll on a phone. */
.hskk-level-card {
    border-top: 4px solid #b5179e;
}

.hskk-part {
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    padding: 0.6rem 0;
}

.hskk-part:last-child { border-bottom: 0; }

.hskk-part-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.hskk-reality {
    background: rgba(13, 110, 253, 0.07);
    border-radius: 0.5rem;
    padding: 0.6rem 0.85rem;
}