/* Zhuyin / Bopomofo chart and converter — /tools/bopomofo (growth plan D36).
   Dark mode comes from Bootstrap variables and [data-bs-theme="dark"] overrides, never from a
   hard-coded hex in a rule that only exists for the light theme. */

/* The symbol itself. Zhuyin characters are drawn from a CJK font at the same metrics as hanzi,
   so at body size they are as hard to tell apart as ㄈ and ㄷ; the chart is only useful if the
   strokes are big enough to distinguish. */
.bp-symbol {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 500;
}

.bp-symbol-lg {
    font-size: clamp(2.5rem, 12vw, 4rem);
    line-height: 1.05;
    font-weight: 500;
}

/* Chart rows are buttons that write into the converter, so they need to look pressable
   without becoming a grid of blue rectangles. */
.bp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.bp-cell:hover,
.bp-cell:focus-visible {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

.bp-cell-pinyin {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
}

/* The converter panes. Matched heights so the two sides read as one operation rather than
   as an input and an unrelated result box. */
.bp-pane {
    min-height: 9rem;
}

#bpInput {
    font-size: 1.15rem;
    line-height: 1.6;
    resize: vertical;
}

.bp-output {
    font-size: 1.6rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.bp-output-empty::before {
    content: attr(data-placeholder);
    opacity: 0.45;
    font-size: 1rem;
}

/* Example chips above the box. */
.bp-chip {
    font-size: 1rem;
    white-space: nowrap;
}

/* The comparison table can be wide on a phone; it scrolls inside itself rather than pushing
   the page sideways. */
.bp-scroll {
    overflow-x: auto;
}

.bp-table td,
.bp-table th {
    vertical-align: middle;
}

.bp-note {
    font-size: 0.82rem;
    opacity: 0.85;
}