/* Pinyin Text Annotator
   ------------------------------------------------------------------ */

.annot-input {
    font-size: 1.1rem;
    line-height: 1.7;
    resize: vertical;
}

/* --- Annotated ruby output --- */
.annot-output {
    font-size: 1.5rem;
    line-height: 2.6; /* room for the ruby text above each line */
    word-break: break-word;
}

.annot-output ruby {
    ruby-align: center;
}

.annot-output rt {
    font-size: 0.52em;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 500;
    letter-spacing: .01em;
}

/* Each word is a column: ruby (pinyin over hanzi) on top, English underneath.
   inline-flex keeps the container's baseline on the FIRST flex item (the hanzi
   row), so surrounding punctuation and passthrough text stay aligned with the
   characters whether or not the English line is shown. */
.annot-output .aw {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: .05em .1em;
    border-radius: 4px;
    transition: background-color .12s ease;
}

.annot-output .aw-zh {
    white-space: nowrap;
}

.annot-output .aw-en {
    font-size: .72rem;
    line-height: 1.25;
    color: var(--bs-secondary-color, #6c757d);
    max-width: 11em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Multiple senses: the English line wraps so every option stays clickable,
   mirroring the translator pages' "Use this translation" choice. */
.annot-output .aw-en-opts {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 13em;
}

.annot-output .aw-opt {
    cursor: pointer;
    border-radius: 3px;
    padding: 0 .12em;
}

.annot-output .aw-opt:hover,
.annot-output .aw-opt:focus-visible {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent);
    outline: none;
}

.annot-output .aw-sep {
    opacity: .5;
    margin: 0 .05em;
}

/* One sense picked: hide the alternatives and separators; the picked one stays
   clickable to bring the others back. */
.annot-output .aw-en-opts.picked .aw-opt:not(.sel),
.annot-output .aw-en-opts.picked .aw-sep {
    display: none;
}

.annot-output .aw-en-opts.picked .aw-opt.sel {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
}

/* English line hidden → the hover/tap tooltip takes over (JS gates on this class). */
.annot-output.en-off .aw-en {
    display: none;
}

.annot-output.en-off .aw {
    cursor: help;
}

.annot-output .aw:hover {
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 10%, transparent);
}

/* Words with no dictionary entry: dashed underline, no pinyin above. */
.annot-output .aw-unknown .aw-zh {
    border-bottom: 2px dashed var(--bs-secondary-color, #adb5bd);
}

.annot-output .aw-unknown {
    cursor: default;
}

.annot-output .aw-unknown rt {
    visibility: hidden; /* keeps the ruby line height consistent */
}

.annot-output .aw:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

/* --- Word tooltip (pinyin + meaning), shown on hover and tap --- */
.annot-tip {
    position: fixed;
    z-index: 1080;
    max-width: min(22rem, 92vw);
    background: #1f2937;
    color: #fff;
    font-size: .9rem;
    line-height: 1.45;
    padding: .4rem .6rem;
    border-radius: .4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    pointer-events: none; /* never intercept the taps/hovers meant for words */
    word-break: break-word;
}

.annot-tip[hidden] {
    display: none;
}

.annot-tip::after { /* little arrow pointing at the word */
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.annot-tip[data-placement="top"]::after {
    top: 100%;
    border-top-color: #1f2937;
}

.annot-tip[data-placement="bottom"]::after {
    bottom: 100%;
    border-bottom-color: #1f2937;
}

/* --- Dark mode --- */
[data-bs-theme="dark"] .annot-output rt {
    color: #9ca3af;
}

[data-bs-theme="dark"] .annot-tip {
    background: #374151;
    border: 1px solid rgba(255, 255, 255, .14);
}

[data-bs-theme="dark"] .annot-tip[data-placement="top"]::after {
    border-top-color: #374151;
}

[data-bs-theme="dark"] .annot-tip[data-placement="bottom"]::after {
    border-bottom-color: #374151;
}

/* --- Print: only the annotated text, black on white, no chrome --- */
@media print {
    body * {
        visibility: hidden;
    }

    .annot-print,
    .annot-print * {
        visibility: visible;
    }

    .annot-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none !important;
        box-shadow: none !important;
    }

    .annot-print .annot-toolbar,
    .annot-print .annot-note {
        display: none !important;
    }

    .annot-output {
        color: #000;
        font-size: 16pt;
        line-height: 2.8;
    }

    .annot-output rt {
        color: #444;
    }

    .annot-output .aw-en {
        color: #333;
    }

    .annot-output .aw {
        cursor: default;
    }
}