/* Shared, optional letter information across all language courses. */
.letter-display-controls { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; position: relative; font-family: "Segoe UI", system-ui, sans-serif; }
.letter-display-control { position: relative; display: inline-flex; }
.letter-display-controls button { min-height: 34px; min-width: 40px; padding: 6px 8px; border: 1px solid #cad8d0; border-radius: 7px; background: #fff; color: #566d63; font: 700 .7rem/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: .035em; cursor: pointer; }
.letter-display-controls button:hover { background: #f0f5f1; border-color: #689c8a; }
.letter-display-controls button[aria-pressed="true"] { background: #076652; border-color: #076652; color: white; }
.letter-display-controls button[aria-disabled="true"] { opacity: .5; cursor: default; }
.letter-display-controls button:focus-visible { outline: 3px solid #cc740a; outline-offset: 3px; }
.letter-display-tooltip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: 220px; padding: 9px 12px; border-radius: 8px; background: #203a38; color: white; font-size: .75rem; font-weight: 400; line-height: 1.5; text-align: center; visibility: hidden; opacity: 0; transition: opacity .12s; pointer-events: none; }
.letter-display-tooltip small { display: block; font-size: .7rem; color: #cfe5db; }
.letter-display-control.tooltip-open .letter-display-tooltip { visibility: visible; opacity: 1; }
.display-save-status:empty { display: none; }
.display-save-status { position: absolute; top: 100%; right: 0; width: 230px; padding: 6px 9px; font-size: .7rem; background: #fff5dc; color: #76551e; z-index: 55; }
.letter-label { font-family: inherit; }
.letter-details { margin-inline-start: .3em; font-size: .85em; font-weight: 400; color: #536b62; line-height: 1.45; white-space: normal; }
.letter-details.has-phonetics { display: block; margin: 4px 0 0; font-size: .78rem; line-height: 1.4; }
.letter-details[hidden], [data-display-column][hidden] { display: none !important; }
.guide-example .letter-details.has-phonetics { font-size: .72rem; }
.question-display .letter-details { font-size: .6em; }
.question-display .letter-details.has-phonetics { font-size: .85rem; max-width: 470px; margin: 6px auto 0; }
.answer-option:has(.letter-details.has-phonetics:not([hidden])) { align-items: flex-start; }
.answer-option:has(.letter-details.has-phonetics:not([hidden])) kbd { margin-top: 2px; }
.choice-button .letter-details { display: inline; }
.choice-button .letter-details.has-phonetics { display: block; }
.course-topbar .letter-display-controls { margin-left: auto; }
.course-topbar { gap: 16px; }
@media (min-width: 721px) and (max-width: 1450px) {
    .course-topbar .header-learner { flex-direction: column; align-items: flex-start; gap: 0; }
    .course-topbar .header-account .text-link { padding: 4px 0 0 52px; font-size: .75rem; }
    .course-topbar .topbar-stats { gap: 10px; }
}
@media (min-width: 721px) and (max-width: 1050px) {
    .course-topbar .topbar-stats { flex-direction: column; gap: 5px; align-items: flex-end; }
    .course-topbar { gap: 10px; }
    .course-topbar .header-learner { max-width: 195px; }
}
@media (max-width: 720px) {
    .course-topbar .letter-display-controls { grid-row: 3; grid-column: 1 / -1; margin-left: 0; }
    .course-topbar { row-gap: 10px; }
    .letter-display-control:first-child .letter-display-tooltip { left: 0; transform: none; }
    .letter-display-control:last-of-type .letter-display-tooltip { left: auto; right: 0; transform: none; }
    .answer-option .letter-details.has-phonetics { font-size: .7rem; }
    .reference-topbar { flex-wrap: wrap; }
    .reference-topbar .letter-display-controls { order: 3; width: 100%; }
    .top-actions { flex-wrap: wrap; }
}
@media print { .letter-display-controls { display: none; } }

.reference-table:has([data-display-column="pho"]:not([hidden])) { min-width: 1100px; }

@media (min-width: 721px) and (max-width: 950px) {
    .course-topbar .learner-profile .avatar { display: none; }
    .course-topbar .header-account .text-link { padding-left: 0; }
}
@media (max-width: 720px) {
    /* Reuse the local editor's reserved top row instead of adding header height. */
    .editor-available .course-topbar { position: relative; }
    .editor-available .course-topbar .letter-display-controls { position: absolute; grid-area: auto; top: 15px; left: 18px; }
}

/* Word transcriptions sit below the Arabic baseline and remain left-to-right. */
.word-label { display: inline-block; max-width: 100%; text-align: center; }
.word-label > .word-details { display: block; margin: 3px 0 0; color: #536b62; font: 400 .82rem/1.4 "Segoe UI", system-ui, sans-serif; letter-spacing: normal; overflow-wrap: anywhere; }
.question-display .word-label > .word-details { font-size: .95rem; }
.guide-example .word-label > .word-details { font-size: .78rem; }
.word-label > .word-details[hidden] { display: none !important; }