/* 英语音标标注器 /chs/English/IpaAnnotator
   Layout is the mirror of the Pinyin Annotator's ruby view: the phonetic line sits above
   the word and both stay on one baseline, so a paragraph still reads as a paragraph. */

.ia-output {
    font-size: 1.05rem;
    line-height: 3.1;          /* room for the IPA line above every word */
    word-break: break-word;
    /* NOT white-space: pre-wrap. That preserves the template's own newlines between each
       word's markup as well as the user's, which put every single word on its own line.
       The user's line breaks come through as explicit <br> from
       IpaAnnotatorModel.PassthroughHtml instead. */
}

.ia-word {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: baseline;
    margin: 0 .1rem;
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .15rem;
    transition: background-color .12s ease;
}

.ia-word:hover {
    background: var(--bs-tertiary-bg);
}

.ia-ipa {
    display: block;
    font-size: .72rem;
    line-height: 1.15;
    color: var(--bs-primary);
    font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
    white-space: nowrap;
}

.ia-en {
    display: block;
    line-height: 1.15;
}

/* Derived forms (-s, -ed, -ing…) are marked so a user can see which rows came from a rule
   rather than from an entry. Dotted, not coloured: it is a provenance hint, not a warning. */
.ia-derived .ia-en {
    border-bottom: 1px dotted var(--bs-secondary-color);
}

.ia-unknown .ia-ipa {
    color: var(--bs-secondary-color);
}

.ia-unknown .ia-en {
    text-decoration: underline wavy var(--bs-warning);
    text-underline-offset: 3px;
}

.ia-stats {
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    font-size: .92rem;
}

.ia-unknown-list {
    font-size: .9rem;
    word-break: break-word;
}

/* ---------- print ----------
   The printed page is the handout: annotated text only. */
@media print {
    .ia-no-print {
        display: none !important;
    }

    .ia-output {
        font-size: 12pt;
        line-height: 2.9;
    }

    .ia-word {
        break-inside: avoid;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }

    .card-body {
        padding: 0 !important;
    }
}