/* Sentence Shadowing — /tools/shadowing (growth plan D79).
   Colours come from Bootstrap variables so dark mode needs no second set of rules; the plotted
   lines are the canvas element's own `color` and the theme's muted colour, both read at draw
   time by js/shadowing.js. */

/* ── the level picker ────────────────────────────────────────────────────────────
   Five equal targets rather than a dropdown. Moving between levels is the thing a returning
   visitor does most, and on a phone a select costs two taps every time. */
.sh-levels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}

.sh-levels .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.2rem;
    font-size: 0.8rem;
    line-height: 1.15;
}

.sh-level-tier {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

/* The sentence count under each label is muted, and Bootstrap's muted grey against the active
   button's filled background is unreadable. Inherit the button's own colour there instead. */
.sh-levels .btn.active .text-muted {
    color: inherit !important;
    opacity: 0.8;
}

@media (max-width: 420px) {
    .sh-levels .btn { font-size: 0.68rem; }
}

/* ── the stage ───────────────────────────────────────────────────────────────────
   The recording state is a ring that breathes with the input level, driven by the --sh-level
   custom property the meter sets. It is the one piece of feedback that has to be visible from
   arm's length, because that is where the phone is while someone is speaking into it. */
.sh-stage {
    position: relative;
    border-radius: 0.75rem;
    transition: box-shadow 0.2s ease;
}

.sh-stage.sh-live {
    box-shadow: 0 0 0 calc(2px + var(--sh-level, 0) * 10px) rgba(220, 53, 69, 0.18);
}

.sh-sentence {
    font-size: clamp(1.6rem, 6.5vw, 2.5rem);
    line-height: 1.35;
    font-weight: 600;
    word-break: keep-all;
}

.sh-pinyin {
    font-size: clamp(1rem, 3.4vw, 1.25rem);
    color: var(--bs-primary);
}

/* ── the chart ───────────────────────────────────────────────────────────────────
   Wide and short on purpose: an utterance is a shape over time, and a square plot squashes the
   horizontal axis that carries all of the information. Two panels in one canvas — pitch above,
   loudness below — because they share a time axis and separating them would break the one
   reading that matters, which is what the pitch was doing at the moment of a stress. */
.sh-chart {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    max-height: 280px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.sh-chart canvas {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--bs-body-color);
}

/* The celebration layer sits over the chart and never touches its pixels. */
.sh-chart .sh-spark {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sh-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.sh-legend i {
    display: inline-block;
    width: 1.4rem;
    height: 0;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.sh-key-you { border-top: 3px solid var(--bs-body-color); }
.sh-key-model { border-top: 3px dashed var(--bs-secondary-color); }

/* ── the level meter ─────────────────────────────────────────────────────────── */
.sh-meter {
    height: 0.5rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

.sh-meter span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--bs-danger);
    transition: width 0.08s linear;
}

/* ── the verdict ─────────────────────────────────────────────────────────────────
   Three bars, not one number. The whole argument for shadowing over a right/wrong drill is
   that it can say WHICH of pitch, rhythm and pace went wrong. */
.sh-score {
    font-size: clamp(2rem, 8vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
}

.sh-bar {
    height: 0.5rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

.sh-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 1rem;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sh-bar-fill.is-good { background: var(--bs-success); }
.sh-bar-fill.is-ok { background: var(--bs-warning); }
.sh-bar-fill.is-poor { background: var(--bs-danger); }

/* ── the round ───────────────────────────────────────────────────────────────── */
.sh-dots {
    display: flex;
    gap: 0.3rem;
}

.sh-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
}

.sh-dot.is-current { box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); }
.sh-dot.is-great { background: var(--bs-success); border-color: var(--bs-success); }
.sh-dot.is-ok { background: var(--bs-warning); border-color: var(--bs-warning); }
.sh-dot.is-poor { background: var(--bs-danger); border-color: var(--bs-danger); }

.sh-summary-score {
    font-size: clamp(2.5rem, 12vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

.sh-stars { font-size: 1.5rem; letter-spacing: 0.2rem; }

/* The Next button asks for the next page-to-page move, which is where the vignette fires. */
@keyframes sh-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4); }
    50% { box-shadow: 0 0 0 0.5rem rgba(13, 110, 253, 0); }
}

.sh-pulse { animation: sh-pulse 1.6s ease-out 3; }

@media (prefers-reduced-motion: reduce) {
    .sh-pulse { animation: none; }
    .sh-stage.sh-live { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.35); }
    .sh-bar-fill { transition: none; }
}

/* ── the score breakdown: three parts and the total they make ─────────────────── */
.sh-break-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 0.15rem 0.75rem;
    justify-content: start;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}

.sh-break-grid .sh-num {
    text-align: right;
}

.sh-break-rule {
    grid-column: 1 / -1;
    border-top: 1px solid var(--bs-border-color);
    margin: 0.2rem 0;
}