html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Keep successive keyboard focus changes visible. A pending smooth scroll to
   the previous control can otherwise finish after focus moves back. */
html:has(:focus-visible) {
    scroll-behavior: auto;
}

/* In the work loop, native textarea focus can reveal only its first caret line
   at the viewport edge. Reserve room for the three-row field and its outline. */
html:has(.mission-table-scroll):has(:focus-visible) {
    scroll-padding-block: 6rem;
}

a, .btn-link {
    color: #006bb7;
}

/* MudNavLink anchors are rendered by a child component, outside CSS isolation. */
.hoho-appbar .hoho-nav-links .mud-nav-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

:root {
    /* Legacy aliases keep HOHO Test visually stable while shared tokens own values. */
    --hoho-navy: var(--hoho-brand-navy);
    --hoho-orange: var(--hoho-brand-orange);
    --hoho-green: var(--hoho-brand-green);
    --hoho-light: var(--hoho-surface-canvas);
    --hoho-text: #333333;
}

.hoho-terminal {
    width: 100%;
    background-color: #000;
    color: #e6e6e6;
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid rgba(230, 230, 230, 0.12);
    overflow: visible;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.hoho-terminal-copy {
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
}

/* Hanging indent for terminal bullet lines so wraps align nicely on phones */
.hoho-terminal-bulletLine {
    padding-left: 2ch;
    text-indent: -2ch;
}

/* Keep score ranges like (0–120) unbroken */
.hoho-level-range {
    white-space: nowrap;
}

/* Responsive ASCII-frame card: keeps terminal black background and wraps content on small screens */
.hoho-asciiFrameCard {
    --hoho-ascii-cols: 60;
    --hoho-ascii-pad-x: 2;
    --hoho-ascii-pad-y: 1;

    display: block;
    width: min(100%, calc(var(--hoho-ascii-cols) * 1ch));
    margin: 0.25rem auto 0;
    padding: 0.75rem;
    background: #000;
    border-radius: 14px;
    border: 4px double rgba(235, 235, 235, 0.90);
    box-sizing: border-box;
}

.hoho-asciiFrameCard-body {
    padding-left: calc(var(--hoho-ascii-pad-x) * 1ch);
    padding-right: calc(var(--hoho-ascii-pad-x) * 1ch);
    padding-top: calc(var(--hoho-ascii-pad-y) * 1.1em);
    padding-bottom: calc(var(--hoho-ascii-pad-y) * 1.1em);
    color: rgba(235, 235, 235, 0.95);
    box-sizing: border-box;
}

.hoho-asciiFrameCard-body.is-centered {
    text-align: center;
}

.hoho-asciiFrameCard-line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hoho-terminal-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e6e6e6;
    margin-bottom: 0.75rem;
}

.hoho-terminal-statusRow {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Keep the right group (Elapsed + Pause) together when wrapping */
.hoho-terminal-statusRow > .hoho-terminal-statusText {
    flex: 1 1 auto;
    min-width: 18ch;
}

.hoho-terminal-statusRight {
    display: inline-flex;
    gap: 0.75rem;
    align-items: baseline;
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 520px) {
    /* On small screens, put Pause/Continue on its own line for easier tapping */
    .hoho-terminal-statusRight {
        flex-wrap: wrap;
        white-space: normal;
        justify-content: flex-end;
    }

    .hoho-terminal-statusRight > button.hoho-terminal-action {
        flex-basis: 100%;
        margin-top: 0.25rem;
    }

    /* Spanish label 'Transcurrido' is longer; shrink font so it fits without wrapping */
    .hoho-terminal-statusRow.is-es .hoho-terminal-statusText {
        font-size: 0.82rem;
    }
}

.hoho-terminal-statusText {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.35;
    white-space: pre;
}

.hoho-terminal-question {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0.25rem 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hoho-terminal-questionCard {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: #000;
    border: 4px double rgba(235, 235, 235, 0.90);
    color: rgba(235, 235, 235, 0.95);
    box-sizing: border-box;
}

.hoho-terminal-instruction {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.35;
    margin-top: 0.25rem;
}

.hoho-terminal-center {
    text-align: center;
}

.hoho-terminal-screen {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: clamp(12px, 1.2vw, 18px);
    line-height: 1.35;
    white-space: pre-wrap;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0;
}

.hoho-terminal-frame {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: clamp(12px, 1.2vw, 18px);
    line-height: 1.35;
    white-space: pre;
    overflow-x: hidden;
    word-break: normal;
    overflow-wrap: normal;
    margin: 0;
    color: #e6e6e6;
    max-width: 100%;
    display: block;
}

.hoho-results-shell {
    width: min(100%, 78ch);
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hoho-result-pre,
.hoho-result-enhancements {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hoho-result-pre {
    font-size: inherit;
    line-height: 1.35;
}

.hoho-result-enhancements {
    margin-top: 0.35rem;
    min-width: 0;
}

.hoho-results-actions {
    margin-top: 0.35rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hoho-level-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.18em;
}

.hoho-level-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    outline: none;
}

/* The magnifier transition/animation applies ONLY to icons inside a badge.
   List-row icons stay plain (no GPU layer promotion) to avoid Chromium
   re-compositing flicker when a row's selection box-shadow changes. */
.hoho-level-badge .hoho-level-icon {
    transition: transform 0.15s ease;
    transform-origin: center;
}

/* CSS-only magnifier effect on hover and keyboard focus (no layout jump). */
.hoho-level-badge:hover .hoho-level-icon,
.hoho-level-badge:focus .hoho-level-icon,
.hoho-level-badge:focus-visible .hoho-level-icon {
    transform: scale(1.3);
}

.hoho-level-badge:focus-visible {
    outline: 1px solid var(--level-accent, rgba(215, 186, 125, 0.7));
    outline-offset: 2px;
    border-radius: 3px;
}

/* CSS-only tooltip: badge name + short description, shown on hover or focus. */
.hoho-level-badge[data-hoho-tooltip]::after {
    content: attr(data-hoho-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    min-width: 8rem;
    max-width: 16rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(215, 186, 125, 0.5);
    border-radius: 4px;
    background: #10100c;
    color: #f7d58a;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: pre-line;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 40;
}

.hoho-level-badge[data-hoho-tooltip]:hover::after,
.hoho-level-badge[data-hoho-tooltip]:focus::after,
.hoho-level-badge[data-hoho-tooltip]:focus-visible::after {
    opacity: 1;
}

.terminal-badge-bag-item {
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.1rem 0.35rem;
    border: 1px solid rgba(215, 186, 125, 0.58);
    color: #f7d58a;
    background: rgba(215, 186, 125, 0.06);
}

.hoho-level-preview-row {
    margin-top: 0.85rem;
    padding: 0.55rem 0;
    border-top: 1px solid rgba(215, 186, 125, 0.26);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.hoho-level-preview-name {
    color: #f7d58a;
}

.hoho-level-preview-sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
    margin-top: 0.45rem;
}

.hoho-level-preview-size {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 5.5rem;
}

.terminal-level-row.terminal-level-accent-neutral,
.terminal-level-coaching-panel.terminal-level-accent-neutral,
.terminal-level-accent-neutral {
    --level-accent: rgba(215, 186, 125, 0.72);
    --level-accent-soft: rgba(215, 186, 125, 0.12);
}

.terminal-level-row.terminal-level-accent-beginner,
.terminal-level-coaching-panel.terminal-level-accent-beginner,
.terminal-level-accent-beginner {
    --level-accent: #B65E2C;
    --level-accent-soft: rgba(182, 94, 44, 0.16);
}

.terminal-level-row.terminal-level-accent-growing,
.terminal-level-coaching-panel.terminal-level-accent-growing,
.terminal-level-accent-growing {
    --level-accent: #4E8D22;
    --level-accent-soft: rgba(78, 141, 34, 0.14);
}

.terminal-level-row.terminal-level-accent-disciple,
.terminal-level-coaching-panel.terminal-level-accent-disciple,
.terminal-level-accent-disciple {
    --level-accent: #094E99;
    --level-accent-soft: rgba(9, 78, 153, 0.16);
}

.terminal-level-row.terminal-level-accent-servant-worker,
.terminal-level-coaching-panel.terminal-level-accent-servant-worker,
.terminal-level-accent-servant-worker {
    --level-accent: #929091;
    --level-accent-soft: rgba(146, 144, 145, 0.14);
}

.terminal-level-row.terminal-level-accent-faith-builder,
.terminal-level-coaching-panel.terminal-level-accent-faith-builder,
.terminal-level-accent-faith-builder {
    --level-accent: #D89F08;
    --level-accent-soft: rgba(216, 159, 8, 0.14);
}

.terminal-level-row.terminal-level-accent-christlike-leader,
.terminal-level-coaching-panel.terminal-level-accent-christlike-leader,
.terminal-level-accent-christlike-leader {
    --level-accent: #24C6D1;
    --level-accent-soft: rgba(36, 198, 209, 0.14);
}

/*
 * Coaching panels are all pre-rendered; only the level the user has CLICKED
 * (.is-active) is shown. Hover does nothing here on purpose — clicking reveals the
 * details panel, which keeps the list compact and leaves room for the NEXT button.
 */
.terminal-level-panels {
    min-width: 0;
}

.terminal-level-panels > .terminal-level-coaching-panel {
    display: none;
}

.terminal-level-panels > .terminal-level-coaching-panel.is-active {
    display: block;
}

/*
 * Every level row always shows its own accent color (a permanent legend that
 * teaches the level colors). The clicked/selected row is emphasized further.
 */
.terminal-level-options .terminal-level-row {
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--level-accent) 40%, transparent);
    border-left: 4px solid var(--level-accent);
    background-color: color-mix(in srgb, #000 80%, var(--level-accent));
    background-image: linear-gradient(90deg, var(--level-accent-soft), transparent 72%);
}

.terminal-level-options .terminal-level-row .terminal-level-title {
    color: color-mix(in srgb, var(--level-accent) 64%, #fff);
}

.terminal-level-options .terminal-level-row:hover {
    background-color: color-mix(in srgb, #000 72%, var(--level-accent));
}

.terminal-level-options .terminal-level-row.is-selected {
    border-color: var(--level-accent);
    background-color: color-mix(in srgb, #000 64%, var(--level-accent));
    background-image: linear-gradient(90deg, var(--level-accent-soft), color-mix(in srgb, var(--level-accent) 20%, transparent));
    outline: 1px solid rgba(0, 0, 0, .75);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--level-accent) 50%, transparent), 0 6px 14px rgba(0, 0, 0, .45);
}

.terminal-level-options .terminal-level-row.is-selected .terminal-level-title {
    color: color-mix(in srgb, var(--level-accent) 84%, #fff);
}

@media (max-width: 900px) {
    .hoho-results-shell {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .hoho-results-shell {
        font-size: 0.92rem;
    }

    .hoho-results-actions {
        justify-content: stretch;
    }

    .hoho-results-actions .hoho-terminal-action {
        flex: 1 1 9rem;
        min-height: 2.5rem;
    }
}

.hoho-terminal-cardFrame {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: clamp(12px, 1.2vw, 18px);
    line-height: 1.35;
    white-space: pre;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    margin: 0;
    max-width: 100%;
    display: block;

    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background-color: var(--hoho-light);
    border: 1px solid rgba(22, 59, 99, 0.25);
    color: var(--hoho-text);

    width: min(calc(var(--hoho-cardframe-ch, 72) * 1ch), 100%);
}

.hoho-terminal-accent {
    color: #d7ba7d;
}

.hoho-terminal-strong {
    font-weight: 800;
    color: var(--hoho-orange);
}

.hoho-terminal-ref {
    font-weight: 800;
    color: var(--hoho-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hoho-terminal-link {
    color: var(--hoho-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@keyframes hoho-terminal-field-blink {
    0%, 45% {
        background-color: rgba(215, 186, 125, 0.00);
        color: inherit;
    }
    50%, 100% {
        background-color: rgba(215, 186, 125, 0.18);
        color: #f7d58a;
    }
}

.hoho-terminal-blink {
    animation: hoho-terminal-field-blink 1.05s step-end infinite;
    border-radius: 4px;
    padding: 0 0.2ch;
}

.hoho-terminal-success {
    color: #6a9955;
}

.hoho-terminal-inputRow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.hoho-terminal-prompt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #d7ba7d;
}

.hoho-terminal-input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background-color: rgba(245, 246, 250, 0.08);
    color: #e6e6e6;
    border: 1px solid rgba(245, 246, 250, 0.22);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    outline: none;
}

.hoho-terminal-input:focus {
    border-color: rgba(215, 186, 125, 0.65);
}

.hoho-terminal-verseRow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.35;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hoho-verseRef {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-right: 0.75rem;
}

/* Generic tooltip refs (re-uses verse tooltip visual language) */
.hoho-tooltipRef {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hoho-tooltipBubble {
    display: none;
    position: absolute;
    left: 50%;
    top: 1.6em;
    transform: translateX(-50%);
    z-index: 2100;
    background-color: color-mix(in srgb, #000 58%, var(--hoho-navy));
    color: #e6e6e6;
    border: 1px solid rgba(215, 186, 125, 0.5);
    outline: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    width: min(calc(var(--hoho-tooltip-ch, 18) * 1ch), calc(100vw - 2rem));
    max-width: min(560px, calc(100vw - 2rem));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(215, 186, 125, 0.25);
}

.hoho-tooltipRef:hover .hoho-tooltipBubble,
.hoho-tooltipRef:focus .hoho-tooltipBubble {
    display: block;
}

.hoho-verseTooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: 1.6em;
    transform: translateX(-50%);
    z-index: 2100;
    background-color: rgba(245, 246, 250, 0.08);
    background-color: color-mix(in srgb, #000 58%, var(--hoho-navy));
    color: #e6e6e6;
    border: 1px solid rgba(215, 186, 125, 0.5);
    outline: 1px solid rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    width: min(calc(var(--hoho-tooltip-ch, 14) * 1ch), calc(100vw - 2rem));
    max-width: min(520px, calc(100vw - 2rem));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(215, 186, 125, 0.25);
}

.hoho-verseRef:hover .hoho-verseTooltip,
.hoho-verseRef.is-open .hoho-verseTooltip {
    display: block;
}

.hoho-verseTooltip-ref {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.hoho-verseTooltip-text {
    color: #e6e6e6;
}

.hoho-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    padding: 3rem 1.5rem;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .hoho-hero {
        grid-template-columns: 1fr;
    }
}

.hoho-hero-left {
    border-right: 1px solid #e0e4ef;
    padding-right: 2rem;
}

@media (max-width: 900px) {
    .hoho-hero-left {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #e0e4ef;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
}

.hoho-hero-right {
    font-size: 0.95rem;
}

.hoho-brand-pill {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hoho-hero-title {
    margin-top: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hoho-navy);
}

.hoho-hero-subtitle {
    margin-top: 0.75rem;
    color: var(--hoho-orange);
}

.hoho-hero-tagline {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.hoho-scripture {
    border-left: 4px solid var(--hoho-green);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.hoho-scripture-ref {
    margin-top: 0.25rem;
    color: #555555;
}

.hoho-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hoho-assessment {
    margin-top: clamp(1rem, 2vw, 2rem);
    padding: clamp(1rem, 2.5vw, 2rem);
}

/* Ensure MudBlazor selects/menus display above content and are not clipped */
.hoho-main,
.hoho-content {
    overflow: visible;
}

.hoho-settings-surface {
    overflow: visible;
}

.mud-popover,
.mud-popover-open {
    z-index: 2000;
}

.mud-overlay {
    z-index: 1990;
}

.page-title {
    margin-bottom: 0.5rem;
    color: var(--hoho-navy);
}

.page-intro {
    margin-bottom: 1.5rem;
}

.question-card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.hoho-ux-card {
    border: 1px solid transparent;
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.hoho-ux-card:hover {
    border-color: rgba(215, 186, 125, 0.65);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.hoho-terminal-optionList {
    margin-top: 0.75rem;
}

.hoho-terminal-option {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    line-height: 1.35;
    padding: 0.15rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.hoho-terminal-option-controlled {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    box-sizing: border-box;
    appearance: none;
    border: 0;
    color: inherit;
    text-align: left;
    touch-action: manipulation;
}

.hoho-terminal-option-controlled:focus-visible {
    outline: 2px solid rgba(215, 186, 125, 0.9);
    outline-offset: 2px;
}

.hoho-terminal-editField {
    display: inline;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(215, 186, 125, 0.65);
    text-underline-offset: 0.18em;
}

.hoho-terminal-option.is-exit {
    margin-top: 0.35rem;
    font-size: 0.86rem;
    opacity: 0.9;
}

.hoho-terminal-option:hover,
.hoho-terminal-option.is-hovered {
    background-color: rgba(245, 246, 250, 0.08);
    background-color: color-mix(in srgb, #000 58%, var(--hoho-navy));

    /* Frame similar to verse tooltip (no layout shift) */
    outline: 1px solid rgba(0, 0, 0, 0.75);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px rgba(215, 186, 125, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.hoho-terminal-action {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
    line-height: 1.35;
    color: inherit;
    background-color: rgba(245, 246, 250, 0.08);
    background-color: color-mix(in srgb, #000 58%, var(--hoho-navy));
    border: 0;
    padding: 0.25rem 0.25rem;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;

    /* Frame matches hovered answers/tooltip */
    outline: 1px solid rgba(0, 0, 0, 0.75);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px rgba(215, 186, 125, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.hoho-terminal-action:hover,
.hoho-terminal-action:focus-visible {
    background-color: #000;
    outline: 1px solid rgba(0, 0, 0, 0.75);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px rgba(215, 186, 125, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.hoho-terminal-action:disabled,
.hoho-terminal-option-controlled:disabled {
    cursor: not-allowed;
    opacity: .5;
    animation: none;
}

@keyframes hoho-continue-blink {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(215, 186, 125, 0.5), 0 6px 14px rgba(0, 0, 0, 0.45);
        filter: none;
    }
    50% {
        box-shadow: inset 0 0 0 1px rgba(215, 186, 125, 0.85), 0 0 0 2px rgba(215, 186, 125, 0.25), 0 10px 22px rgba(0, 0, 0, 0.55);
        filter: brightness(1.15);
    }
}

/* When paused, blink the Continue button to draw attention */
.hoho-terminal-action.is-paused {
    animation: hoho-continue-blink 1.05s ease-in-out infinite;
}

.hoho-terminal-action.is-attention {
    animation: hoho-continue-blink 1.05s ease-in-out infinite;
}

@keyframes hoho-attention-text {
    0%, 100% {
        color: inherit;
        text-shadow: none;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 0.6rem rgba(215, 186, 125, 0.55);
    }
}

.hoho-terminal-screen.is-attention {
    animation: hoho-attention-text 1.05s ease-in-out infinite;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hoho-terminal-action.is-paused {
        animation: none;
    }

    .hoho-terminal-action.is-attention,
    .hoho-terminal-screen.is-attention {
        animation: none;
    }
}

.question-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777777;
    margin-bottom: 0.25rem;
}

.bible-ref {
    font-size: 0.85rem;
    color: #666666;
}

.options {
    margin-top: 0.75rem;
}

.bible-ref-link {
    border-bottom: 1px dotted rgba(22, 59, 99, 0.5);
    cursor: help;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
.hoho-notifications { border: 1px solid var(--hoho-color-border, #334155); border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; }
.hoho-notification-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.hoho-notification-list li { border-inline-start: .25rem solid #64748b; padding: .75rem; }
.hoho-notification-list li.unread { border-inline-start-color: #2563eb; background: color-mix(in srgb, #2563eb 8%, transparent); }
.hoho-notification-list time { display: block; font-size: .875rem; margin-block: .25rem; }


/* Shared close controls retain a usable touch target and keyboard outline. */
.hoho-close { color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .4rem; width: 44px; height: 44px; flex: 0 0 44px; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.hoho-close:focus-visible { outline: 3px solid #f15b2a; outline-offset: 3px; }


/* Study layouts use normal whitespace: terminal pre-wrap is for text output,
   not nested cards, reading controls or quizzes. */
.hoho-chapter-study {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    width: 100%;
    max-width: 760px;
    min-width: 0;
    margin-inline: auto;
    white-space: normal;
}
.hoho-chapter-study[hidden],
.hoho-study-view[hidden] { display: none !important; }
.hoho-study-view-navigation {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 3.25rem;
    padding: .25rem .5rem;
    background: color-mix(in srgb, #000 42%, var(--hoho-navy));
    border: 1px solid rgba(215, 186, 125, .75);
    border-radius: 6px;
}
.hoho-study-view-navigation .hoho-terminal-action {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding-inline: .5rem;
}
.hoho-chapter-study .hoho-terminal-screen { white-space: normal; }
.hoho-study-view { display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.hoho-study-chapters { display: flex; flex-wrap: wrap; gap: .5rem; }
.hoho-study-chapter { min-height: 2.75rem; text-align: start; }
.hoho-study-message { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.hoho-edition-selector, .hoho-reader-controls, .hoho-study-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}
.hoho-edition-selector { min-width: 0; max-width: 100%; }
.hoho-edition-selector select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.hoho-reader-controls { margin-block: .75rem; }
.hoho-reader-controls .hoho-terminal-action { white-space: nowrap; }
.hoho-reading-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.hoho-reading-passage {
    padding: .5rem;
    line-height: 1.85;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}
.hoho-bible-heading { color: #d7ba7d; font-weight: 600; margin-block: .75rem .35rem; }
.hoho-verse-number { color: #d7ba7d; font-size: .72em; vertical-align: super; margin-inline: .25rem .15rem; }
.hoho-verse-notes { font-size: .85em; }
.hoho-quiz-command { display: flex; flex-direction: column; gap: .4rem; margin-top: .75rem; }
.hoho-quiz-command-entry { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hoho-terminal-command {
    min-width: 8rem;
    min-height: 2.75rem;
    padding: .45rem .6rem;
    color: inherit;
    background: color-mix(in srgb, #000 58%, var(--hoho-navy));
    border: 1px solid rgba(215, 186, 125, .75);
    border-radius: 6px;
    font: inherit;
}
.hoho-terminal-command:focus-visible { outline: 2px solid #f15b2a; outline-offset: 2px; }
.hoho-quiz-command-error { color: #ffb4ab; }
.hoho-edition-notice, .hoho-badge-requirements { font-size: .85em; line-height: 1.5; white-space: normal; }
.hoho-edition-notice-summary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.hoho-edition-notice-details { margin-top: .5rem; padding: .75rem; border: 1px solid #858585; border-radius: .4rem; }
.hoho-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.hoho-edition-notice-details p { margin-block: .6rem; }
.hoho-edition-notice-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.hoho-chapter-study .hoho-terminal-questionCard { width: 100%; box-sizing: border-box; }
.hoho-chapter-study .hoho-terminal-optionList { width: 100%; min-width: 0; }
.hoho-chapter-study .hoho-terminal-statusRow { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) {
    .hoho-reading-card { padding-inline: .35rem !important; }
    .hoho-chapter-study .hoho-terminal-questionCard { padding: .6rem; }
}
@media (max-width: 360px) {
    .hoho-chapter-study .hoho-terminal-statusText {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}


/* The reader adds this class client-side; keep it global for generated word spans. */
.hoho-read-current {
    background: var(--hoho-brand-gold);
    color: var(--hoho-brand-black);
    outline: 2px solid var(--hoho-brand-gold);
    border-radius: .15rem;
}
.hoho-study-reference { color: var(--hoho-brand-gold); margin: 0; scroll-margin-top: 1rem; }
.hoho-edition-original-notice { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 18rem; overflow-y: auto; }


/* Chapter study controls: compact, wrapping and keyboard accessible. */
.hoho-study-view-navigation { width: fit-content; max-width: 100%; gap: .4rem;
    justify-content: flex-start; padding: 0; border: 0; background: transparent; min-height: 0; }
.hoho-study-view-navigation .hoho-terminal-action { flex: 0 0 auto; width: auto; }
.hoho-edition-selector { justify-content: flex-start; align-self: flex-start; }
.hoho-edition-selector select { width: auto; flex: 0 1 auto; max-width: min(100%, 24rem); }
.hoho-chapter-study .hoho-terminal-action { width: fit-content; max-width: 100%; flex: 0 1 auto; }
.hoho-chapter-media-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .6rem; }
.hoho-chapter-media-tabs [aria-current="page"], .hoho-chapter-media-tabs [aria-pressed="true"] {
    color: #d7ba7d; outline: 1px solid currentColor; }
.hoho-chapter-audio { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; white-space: normal; }
.hoho-chapter-audio audio { width: min(100%, 24rem); max-width: 100%; min-width: 0; }
.hoho-chapter-audio p { margin: 0; font-size: .9em; }
.hoho-chapter-audio small, .hoho-chapter-video { overflow-wrap: anywhere; }
.hoho-audio-verse.hoho-audio-current, .hoho-audio-sentence.hoho-audio-current { background: #d7ba7d33; outline: 1px dashed #d7ba7d; }
.hoho-chapter-video { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.hoho-chapter-video h3 { font-size: 1.05rem; margin: 0; }
.hoho-chapter-video-player { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; }
.hoho-visual-reading summary { cursor: pointer; }
.hoho-chapter-study button:focus-visible, .hoho-chapter-study a:focus-visible,
.hoho-chapter-study select:focus-visible { outline: 3px solid #f15b2a; outline-offset: 3px; }

.hoho-chapter-study:has([data-chapter-audio]) .hoho-reading-passage { max-height: 50vh; overflow-y: auto; }

/* Keep the chapter heading unobscured when navigation/focus scrolls on phones. */
.hoho-study-view-navigation { position: static; }
.hoho-audio-line { display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;width:100%; }
.hoho-audio-line audio { display:none; }
.hoho-audio-line progress { flex:1;min-width:20px;height:.7rem;accent-color:var(--hoho-accent); }
.hoho-audio-line .hoho-terminal-action { padding:.25rem .45rem;min-width:2rem; }
.hoho-video-list .hoho-chapter-video { display:grid;grid-template-columns:96px minmax(0,1fr);gap:.3rem .7rem;padding:.65rem; }
.hoho-video-thumbnail { grid-row:span 4;border:0;padding:0;background:transparent;align-self:start;cursor:pointer; }
.hoho-video-thumbnail img { width:96px;height:54px;object-fit:cover; }
.hoho-video-list h3,.hoho-video-list p { margin:0;font-size:.9rem; }
.hoho-video-votes,.hoho-chapter-video .hoho-study-actions,.hoho-chapter-video iframe { grid-column:1/-1; }
.hoho-video-votes { display:flex;gap:.5rem; }
.hoho-video-votes [aria-pressed="true"] { outline:2px solid currentColor; }

.hoho-video-playback { grid-column:1/-1;min-width:0; }
.hoho-chapter-video-player { height:auto;min-height:0; }
.hoho-chapter-video > h3,.hoho-chapter-video > p,.hoho-chapter-video > small { grid-column:2; }
.hoho-video-thumbnail { grid-column:1; }
.hoho-video-list > a { display:inline-block;white-space:normal;overflow-wrap:anywhere;max-width:100%; }

.hoho-svg-vote svg { width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.5; }
.hoho-svg-vote svg.is-down { transform:rotate(180deg); }
.hoho-svg-vote[aria-pressed='true'] svg { fill:currentColor; }
.hoho-video-transcript { grid-column:1/-1;white-space:normal; }
.hoho-video-catalog-note,.hoho-youtube-queue small { display:block;white-space:normal; }
.hoho-youtube-queue { margin-block:1rem;white-space:normal; }
.hoho-youtube-queue input,.hoho-youtube-queue select { max-width:100%;min-width:0; }
.hoho-youtube-queue li { overflow-wrap:anywhere; }
.hoho-chapter-video-player { min-height:200px; }

.hoho-study-view #chapter-video-language { width:auto;min-width:8rem;max-width:100%; }
.hoho-chapter-video .hoho-video-creator { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.hoho-chapter-video > h3 { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; }

/* Compact reader controls; scope to the chapter reader. */
.hoho-reader-edition-row { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; min-width:0; position:relative; }
.hoho-reader-edition-row .hoho-edition-selector { flex:1 1 22rem; margin:0; justify-content:flex-start; flex-wrap:nowrap; font-size:.85rem; }
.hoho-reader-edition-row select { background:#0b1d2d; color:#eee; border:1px solid #858575; border-radius:6px; padding:.4rem .6rem; min-height:44px; text-transform:uppercase; font:inherit; flex:1 1 auto; }
.hoho-reader-edition-row option { background:#0b1d2d; color:#eee; text-transform:uppercase; }
.hoho-reader-edition-row .hoho-edition-notice-details { position:absolute; left:0; right:0; top:100%; z-index:3; background:#0b1d2d; max-height:60vh; overflow:auto; }
.hoho-reader-navigation { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.4rem; }
.hoho-reader-navigation .hoho-study-view-navigation { grid-column:1; margin:0; display:flex; }
.hoho-reader-navigation .hoho-chapter-media-tabs { grid-column:2; justify-content:center; margin:0; }
.hoho-reader-navigation .hoho-terminal-action { padding:.35rem .55rem; min-height:44px; font-size:.9rem; }
.hoho-reading-heading { justify-content:flex-end; font-size:.85rem; }
.hoho-chapter-study:has([data-chapter-audio]) .hoho-reading-passage { max-height:44rem; }
@media (max-width:600px) {
 .hoho-reader-navigation { grid-template-columns:auto 1fr; }
 .hoho-reader-navigation .hoho-chapter-media-tabs { gap:.25rem; }
 .hoho-reader-navigation .hoho-terminal-action { font-size:.75rem; padding:.3rem; }
 .hoho-reader-edition-row .hoho-edition-selector { flex-wrap:wrap; flex-basis:100%; }
 .hoho-reader-edition-row select { max-width:100%; }
}


/* A single selected reader menu expands below its persistent trigger row. */
.hoho-reader-menus { display:block; }
.hoho-reader-menu-triggers { display:flex; flex-wrap:wrap; gap:.35rem 1rem; justify-content:space-between; }
.hoho-menu-toggle { border:0; background:transparent; color:inherit; font:inherit; font-size:.85rem; min-height:44px; padding:.2rem 0; text-align:start; cursor:pointer; }
.hoho-menu-toggle::before { content:"▸ "; }
.hoho-menu-toggle[aria-expanded="true"]::before { content:"▾ "; }
.hoho-menu-toggle:focus-visible { outline:3px solid #9cdcfe; outline-offset:3px; }
.hoho-reader-menu-panel { min-width:0; width:100%; }
.hoho-reader-menu-panel[hidden] { display:none; }

.hoho-reader-menu-triggers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem .7rem; }
.hoho-menu-toggle { min-width:0; overflow-wrap:anywhere; }
@media(max-width:480px) { .hoho-menu-toggle { font-size:.7rem; } }

.hoho-menu-compact { display:none; }
@media(max-width:480px) {
 .hoho-menu-full { display:none; }
 .hoho-menu-compact { display:inline; }
 .hoho-menu-toggle { font-size:.65rem; overflow-wrap:normal; }
}

/* Book/chapter navigation uses the same navy controls as edition choices. */
.hoho-reader-chapter-heading { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:1.3rem; }
.hoho-book-chapter-selector { display:inline-flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; min-width:0; max-width:100%; font-size:.85rem; font-weight:normal; }
.hoho-book-chapter-selector label { display:flex; gap:.4rem; align-items:center; min-width:0; max-width:100%; }
.hoho-book-chapter-selector select { min-width:0; max-width:100%; min-height:44px; padding:.4rem .6rem; background:#0b1d2d; color:#eee; border:1px solid #858575; border-radius:6px; font:inherit; }
.hoho-book-select { width:16rem; }
.hoho-chapter-select { width:5rem; }
@media(max-width:480px) { .hoho-book-select { width:12rem; } .hoho-book-chapter-selector { gap:.4rem; } }

.hoho-bible-direct { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

/* Shared WATCH/QUIZ controls retain the canonical terminal palette. */
.hoho-active-chapter-controls { display:grid; gap:.7rem; margin:.8rem 0; }
.hoho-video-language-select { box-sizing:border-box; width:100%; min-height:44px; padding:.5rem .65rem; background:#0b1d2d; color:#eee; border:1px solid #858575; border-radius:6px; font:inherit; }
.hoho-video-language-select option { background:#0b1d2d; color:#eee; }
section[aria-labelledby="bible-quiz-heading"] .hoho-quiz-command-entry { width:100%; }
section[aria-labelledby="bible-quiz-heading"] .hoho-terminal-command { box-sizing:border-box; width:100%; max-width:none; min-height:56px; padding:.7rem .8rem; font-size:1.15rem; }
.hoho-chapter-study select, .hoho-chapter-study select option { background:#0b1d2d; color:#eee; }

/* Keep the chapter context together; narrow screens wrap without horizontal scrolling. */
.hoho-bible-selector-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.4fr) minmax(0,1.7fr) auto; gap:.55rem; align-items:end; position:relative; margin:.8rem 0; }
.hoho-bible-selector-row .hoho-book-chapter-selector,
.hoho-bible-selector-row .hoho-reader-edition-row { display:contents; }
.hoho-bible-selector-row .hoho-book-chapter-selector label,
.hoho-bible-selector-row .hoho-edition-selector { display:flex; flex-direction:column; align-items:stretch; gap:.25rem; font-size:.75rem; margin:0; min-width:0; }
.hoho-bible-selector-row select { box-sizing:border-box; width:100%; max-width:none; min-width:0; flex:none; }
.hoho-bible-selector-row .hoho-edition-notice { min-width:0; }
.hoho-bible-selector-row .hoho-edition-notice-summary { margin:0; }
.hoho-bible-selector-row .hoho-edition-notice-summary button { min-height:44px; padding:.35rem .5rem; font-size:.75rem; white-space:nowrap; }
.hoho-bible-selector-row .hoho-edition-notice-details { position:absolute; inset-inline:0; top:100%; z-index:3; background:#0b1d2d; max-height:60vh; overflow:auto; }
.hoho-chapter-audio:not(:has(audio)) { display:none; }
@media(max-width:700px) {
 .hoho-bible-selector-row { grid-template-columns:minmax(0,1fr) minmax(0,.5fr); }
 .hoho-bible-selector-row .hoho-edition-selector { grid-column:1 / -1; }
 .hoho-bible-selector-row .hoho-edition-notice { grid-column:1 / -1; }
 .hoho-bible-selector-row .hoho-edition-notice-summary button { white-space:normal; }
}

/* Bible context feedback stays beside the view navigation. */
.hoho-header-feedback { grid-column:3; justify-self:end; }
.hoho-header-feedback .passage-feedback { margin:0; }
.hoho-youtube-queue select,.hoho-youtube-queue input { background:#0b2030; color:#ddd; border:1px solid #81795c; border-radius:.4rem; padding:.5rem; max-width:100%; }
.hoho-queue-suggestion { display:flex; align-items:center; gap:.5rem; margin:.5rem 0; flex-wrap:wrap; }
.hoho-queue-suggestion img { width:96px; }
@media(max-width:600px) { .hoho-reader-navigation { grid-template-columns:auto 1fr auto; } .hoho-header-feedback .passage-feedback { gap:0; } }

.hoho-header-feedback [role="status"] { max-width:10rem; overflow-wrap:anywhere; font-size:.75rem; }
@media(max-width:600px) { .hoho-reader-navigation { grid-template-columns:1fr auto; } .hoho-reader-navigation .hoho-chapter-media-tabs { grid-row:2; grid-column:1 / -1; } .hoho-header-feedback { grid-column:2; grid-row:1; } }

/* Compact Bible/media actions retain accessible names and comfortable touch targets. */
.hoho-responsive-action { position: relative; }
.hoho-responsive-label { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.hoho-responsive-icon, .hoho-responsive-tip { display: none; }
@media (max-width: 760px) {
 .hoho-responsive-action { min-width: 44px; min-height: 44px; padding: .5rem !important; }
 .hoho-responsive-icon { display: inline-block; flex-shrink: 0; }
 .hoho-responsive-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .hoho-responsive-action:is(:hover,:focus) .hoho-responsive-tip { display: block; position: absolute; bottom: calc(100% + .4rem); left: 0; z-index: 20; max-width: 220px; width: max-content; padding: .4rem .6rem; border: 1px solid #c7ad68; border-radius: .35rem; background: #0b1d2d; color: #fff; font: 14px/1.3 sans-serif; white-space: normal; pointer-events: none; }
}
/* Keep the selected chapter and player close to the mobile toolbar. */
@media (max-width: 760px) {
 .hoho-chapter-study, .hoho-study-view { gap: .4rem; }
 .hoho-chapter-study p { margin-block: .35rem; }
 .hoho-reader-navigation { margin-block: 0; padding-block: 0; }
 .hoho-bible-selector-row { margin-block: .35rem; gap: .35rem; }
 .hoho-bible-selector-row .hoho-edition-selector { grid-column: 1; }
 .hoho-bible-selector-row .hoho-edition-notice { grid-column: 2; justify-self: end; }
 .hoho-bible-selector-row select { min-height: 44px; padding: .4rem .5rem; font-size: .85rem; }
 .hoho-video-catalog-note { font-size: .75rem; }
 .hoho-chapter-video { padding: .5rem; }
 .hoho-video-playback p { font-size: .75rem; }
 .hoho-video-extra-options { margin-block: .5rem; }
 .hoho-video-extra-options summary { min-height: 44px; cursor: pointer; }
}
@media (max-width: 760px) {
 a.hoho-responsive-action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
}
/* Mobile chapter context: a single toolbar and two compact selector rows. */
@media (max-width: 760px) {
 .hoho-reader-navigation { grid-template-columns: auto minmax(0,1fr) auto; gap:.2rem; }
 .hoho-reader-navigation .hoho-study-view-navigation { grid-column:1; grid-row:1; gap:.2rem; padding:0; }
 .hoho-reader-navigation .hoho-chapter-media-tabs { grid-column:2; grid-row:1; flex-wrap:nowrap; gap:.2rem; }
 .hoho-header-feedback { grid-column:3; grid-row:1; }
 .hoho-reader-navigation .hoho-terminal-action { min-width:44px; padding:.3rem !important; }
 .hoho-bible-selector-row { grid-template-columns:minmax(0,1fr) 64px 44px; }
 .hoho-bible-selector-row .hoho-book-chapter-selector label:first-child { grid-column:1; grid-row:1; }
 .hoho-bible-selector-row .hoho-book-chapter-selector label:last-child { grid-column:2 / 4; grid-row:1; }
 .hoho-bible-selector-row .hoho-edition-selector { grid-column:1 / 3; grid-row:2; font-size:.65rem; }
 .hoho-bible-selector-row .hoho-edition-notice { grid-column:3; grid-row:2; }
 .hoho-bible-selector-row select { font-size:clamp(.65rem,2.2vw,.8rem); padding-inline:.35rem; }
 .hoho-bible-selector-row label { font-size:.65rem !important; }
 .hoho-draft-status { font-size:.7rem; line-height:1.25; }
}
.hoho-mobile-controls-toggle { display:none; }
@media(max-width:760px) {
 .hoho-mobile-controls-toggle { display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start; min-height:44px; margin:0; }
 .hoho-chapter-study:not(.hoho-mobile-controls-open) :is(.hoho-reader-navigation,.hoho-bible-selector-row,.hoho-draft-status,.passage-feedback,.hoho-reader-menus,#chapter-video-language,label[for="chapter-video-language"],.hoho-video-catalog-note) { display:none; }
}
/* Focus layout applies to desktop and tablet as well as phones. */
.hoho-mobile-controls-toggle { display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start; min-height:44px; margin:0; }
.hoho-chapter-study:not(.hoho-mobile-controls-open) :is(.hoho-reader-navigation,.hoho-bible-selector-row,.hoho-draft-status,.passage-feedback,.hoho-reader-menus,#chapter-video-language,label[for="chapter-video-language"],.hoho-video-catalog-note) { display:none; }
@media(min-width:761px) {
 .hoho-chapter-study { max-width:100%; }
 .hoho-chapter-study .hoho-reading-passage { max-height:70vh; }
 .hoho-chapter-video-player { width:100%; }
}

.hoho-focus-heading { display:flex; align-items:center; gap:.75rem; min-width:0; }
.hoho-focus-quiz-title { margin:0; font-size:clamp(.85rem, 2.4vw, 1.5rem); line-height:1.25; }

/* HOHO-BIBLE-COMPACT-CONTROLS-001 */
.hoho-site-navigation { background:#193e63; color:white; }
.hoho-site-navigation > summary { display:flex; justify-content:center; cursor:pointer; height:28px; align-items:center; list-style:none; }
.hoho-site-navigation > summary::-webkit-details-marker { display:none; }
.hoho-main .hoho-content { padding-top:.4rem!important; }
.hoho-chapter-study { position:relative; gap:.4rem!important; }
.hoho-focus-heading { gap:.5rem; min-height:44px; margin:0; }
.hoho-focus-reader-status { margin-left:auto; font-size:.85rem; white-space:nowrap; }
.hoho-player-actions,.hoho-watch-tools,.hoho-video-card-actions { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.hoho-player-actions > * { margin:0!important; align-self:center!important; }
.hoho-video-card-actions .hoho-study-actions,.hoho-video-card-actions .hoho-video-votes { display:flex; margin:0!important; padding:0!important; gap:.4rem; }
.hoho-video-card-actions .hoho-study-actions { justify-content:flex-start; }
.hoho-pause-symbol { display:none; }
.hoho-chapter-study .hoho-quiz-command { display:flex; flex-direction:row; align-items:center; gap:.5rem; margin-top:.3rem; flex-wrap:wrap; }
.hoho-chapter-study .hoho-quiz-command-entry { flex:1; min-width:8rem; }
.hoho-chapter-study .hoho-terminal-command { min-height:36px!important; height:36px; padding:.25rem .5rem!important; font-size:1rem!important; }
.hoho-queue-panel li select { width:4rem; min-height:36px; }
@media(max-width:700px) {
 .hoho-content { padding:.25rem!important; }
 .hoho-chapter-study .hoho-terminal-screen { padding:.5rem; }
 .hoho-focus-heading { padding-right:0; gap:.35rem; }
 .hoho-focus-reader-status { font-size:.7rem; }
 .hoho-focus-quiz-title { font-size:.75rem; max-width:5rem; }
 .hoho-chapter-study:has(#bible-quiz-heading:not([hidden])) .hoho-focus-heading { padding-right:6rem; }
 .hoho-chapter-study .hoho-terminal-statusRight { flex-wrap:nowrap!important; align-items:center; gap:.3rem; }
 .hoho-chapter-study .hoho-terminal-statusRight button { flex-basis:auto!important; margin:0!important; min-width:32px; min-height:32px; padding:.25rem; }
 .hoho-pause-symbol { display:block; } .hoho-pause-label { display:none; }
 .hoho-chapter-study .hoho-terminal-statusRow { gap:.25rem; }
 .hoho-chapter-study .hoho-terminal-statusText { font-size:.8rem; }
 .hoho-video-card-actions { flex-wrap:nowrap; }
 .hoho-video-card-actions button { min-width:36px; min-height:36px; padding:.3rem; }
}

.hoho-chapter-study section[aria-labelledby=bible-quiz-heading] .hoho-terminal-statusRight { position:absolute; top:.4rem; right:.4rem; }
.hoho-focus-heading:has(.hoho-focus-quiz-title) { padding-right:8rem; }
/* Final mobile spacing verified on Azure. */
.hoho-main { padding-top:0!important; }
.hoho-bible-direct { margin-top:.25rem!important; }
.hoho-mobile-controls-toggle { flex-shrink:0; white-space:nowrap; }
.hoho-focus-reader-status { min-width:0; }
.hoho-chapter-study .hoho-focus-heading { padding-right:0; }
.hoho-chapter-study .hoho-focus-heading:has(.hoho-focus-quiz-title) { padding-right:7rem; }
.hoho-watch-tools:has(+ .hoho-video-list .hoho-video-playback) > a { display:none; }
@media(max-width:700px) {
 .hoho-main { padding:0 .25rem!important; }
 .hoho-bible-direct { padding:0 .25rem!important; }
 .hoho-focus-reader-status { font-size:.65rem; }
 .hoho-focus-quiz-title { font-size:.7rem; }
}

/* HOHO-VIDEO-CLICK-AND-QUEUE-002 */
.hoho-video-text { display:block; width:100%; text-align:left; border:0; background:none; color:inherit; font:inherit; padding:0; cursor:pointer; }
.hoho-video-text h3,.hoho-video-text p { margin:.25rem 0; }
.hoho-video-text small { display:block; }
.hoho-video-text:hover h3 { text-decoration:underline; }
.hoho-video-text:focus-visible { outline:2px solid #daba70; outline-offset:3px; }
.hoho-video-card-actions { display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; }
.hoho-video-card-actions .hoho-study-actions { flex-direction:row!important; width:auto!important; align-items:center!important; }
.hoho-queue-toggle[hidden] { display:none!important; }
.hoho-watch-tools:empty { display:none; }

/* HOHO-WATCH-QUEUE-SUBVIEW-003 */
.hoho-reader-navigation { display:grid!important; grid-template-columns:auto minmax(0,1fr) auto!important; align-items:center!important; gap:.4rem!important; }
.hoho-reader-navigation .hoho-chapter-media-tabs { justify-self:center; }
.hoho-toolbar-extras { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.hoho-toolbar-extras .hoho-header-feedback { margin:0!important; }
.hoho-watch-browse { display:flex; flex-direction:column; gap:.5rem; }
.hoho-watch-browse[hidden],.hoho-video-extra-options[hidden],.hoho-study-actions[hidden] { display:none!important; }
.hoho-queue-heading { display:flex; align-items:center; gap:.6rem; }
.hoho-queue-heading h2 { margin:0; font-size:1.1rem; }
.hoho-queue-cards { list-style:none; padding:0; margin:.5rem 0; display:flex; flex-direction:column; gap:.6rem; }
.hoho-queue-card { display:grid; grid-template-columns:1.5rem 80px minmax(0,1fr); align-items:center; gap:.5rem; padding:.6rem; border:1px solid #536270; border-radius:.6rem; background:#0b1d2b; }
.hoho-queue-card img { width:80px; aspect-ratio:16/9; object-fit:cover; border-radius:.25rem; }
.hoho-queue-number { color:#daba70; }
.hoho-queue-title { font-size:.9rem; overflow-wrap:anywhere; }
.hoho-queue-reorder { grid-column:2/-1; display:flex; gap:.4rem; align-items:center; }
.hoho-queue-reorder button,.hoho-queue-reorder select { min-height:44px; min-width:44px; margin:0; }
@media(max-width:700px) {
 .hoho-reader-navigation { gap:.2rem!important; }
 .hoho-reader-navigation button { min-width:32px!important; width:32px; min-height:36px!important; padding:.2rem!important; }
 .hoho-reader-navigation .hoho-chapter-media-tabs,.hoho-toolbar-extras { gap:.2rem!important; }
 .hoho-reader-navigation .hoho-study-navigation { gap:.2rem!important; }
}

.hoho-chapter-study:not(.hoho-mobile-controls-open) .hoho-reader-navigation { display:none!important; }

.hoho-play-queue { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem .75rem; }

/* Keep the queue destination explicit at every viewport width. */
.hoho-reader-navigation .hoho-menu-queue { display: inline-flex; align-items: center; gap: .3rem; width: auto !important; min-width: 0; padding-inline: .45rem; white-space: nowrap; font-size: .85rem; }
.hoho-menu-queue svg { flex: 0 0 auto; }

.hoho-queue-heading { flex-wrap: wrap; align-items: center; gap: .5rem; }
.hoho-queue-heading h2 { margin: 0; }
.hoho-queue-heading .hoho-play-queue { margin-inline: auto; border-color: #d8b66b; color: #f0ce83; }

.hoho-queue-heading { display: grid; grid-template-columns: auto 1fr; }
.hoho-queue-transport { grid-column: 1 / -1; display:flex; justify-content:center; align-items:center; gap:.4rem; }
.hoho-queue-heading .hoho-play-queue { margin:0; }
.hoho-queue-transport > button { min-height:44px; }

.hoho-queue-picker { display:flex; align-items:center; gap:.5rem; margin:.5rem 0; }
.hoho-queue-picker label { white-space:nowrap; font-size:.85rem; }
.hoho-queue-picker select { min-width:0; flex:1; max-width:28rem; font-size:.9rem; min-height:40px; }

/* Keep the verse-reader link and comment action in the same toolbar group. */
.hoho-toolbar-extras{grid-column:3;grid-row:1;flex-wrap:nowrap}
.hoho-verse-reader-link{font-size:.8rem!important;white-space:normal;text-align:center;max-width:150px}
.hoho-header-feedback .passage-feedback>span:empty{display:none}
@media(max-width:650px){.hoho-reader-navigation{grid-template-columns:auto minmax(0,1fr)!important}.hoho-reader-navigation .hoho-toolbar-extras{grid-column:2;grid-row:1}.hoho-reader-navigation .hoho-chapter-media-tabs{grid-column:1 / -1;grid-row:2;justify-self:center}.hoho-verse-reader-link{font-size:.7rem!important;max-width:110px}}

.hoho-reader-navigation .hoho-chapter-media-tabs .hoho-terminal-action{min-height:44px;padding:8px 12px;background:#102332;border:1px solid #8b9ba7;border-radius:8px;font:14px Arial,sans-serif;text-transform:none;}
.hoho-mobile-controls-open .hoho-reader-navigation .hoho-chapter-media-tabs{justify-content:center;justify-self:center;}

.hoho-mobile-controls-open .hoho-chapter-media-tabs{flex-wrap:wrap;}
.hoho-mobile-controls-open .hoho-chapter-media-tabs .hoho-responsive-text{display:inline!important;position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;}
.hoho-mobile-controls-open .hoho-chapter-media-tabs .hoho-responsive-icon{display:none!important;}

.hoho-verse-reader-link{max-width:none;}

/* One shared reader menu row: navigation, comments, reading mode, watch, quiz. */
.hoho-reader-navigation{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:center;gap:.35rem!important}
.hoho-reader-navigation>.hoho-study-view-navigation{order:0;flex:0 0 auto;display:flex;gap:.25rem}
.hoho-reader-navigation>.hoho-toolbar-extras{order:1;flex:0 0 auto;margin:0}
.hoho-reader-navigation>.hoho-chapter-media-tabs{order:2;display:flex;flex:0 1 auto;flex-wrap:nowrap!important;gap:.25rem;min-width:0}
.hoho-reader-navigation .hoho-chapter-media-tabs .hoho-responsive-text{white-space:nowrap!important}
@media(max-width:650px){
 .hoho-reader-navigation{gap:3px!important}
 .hoho-reader-navigation button{min-width:28px!important;width:28px;min-height:44px!important;padding:2px!important}
 .hoho-reader-navigation .hoho-chapter-media-tabs .hoho-terminal-action{width:auto;min-width:32px!important;font-size:11px;padding:3px!important}
 .hoho-reader-navigation .hoho-toolbar-extras{gap:2px!important}
 .hoho-reader-navigation .hoho-verse-reader-link{max-width:none;font-size:11px!important}
 .hoho-reader-navigation .hoho-header-feedback{margin:0}
}

.hoho-focus-heading,.bilingual-heading{flex-wrap:wrap}.hoho-focus-heading .hoho-focus-reader-status{margin-left:auto}.bilingual-heading .reader-strip-tools{margin-left:.5rem}
.hoho-chapter-study:not(.hoho-mobile-controls-open) .reader-strip-tools .passage-feedback{display:inline-flex!important}
/* Chapter header owns one transport; reading/progression belong to its menu. */
.hoho-compact-version{font:12px system-ui!important;max-width:145px!important;min-width:85px!important;padding:5px!important;background:#0b2635;color:white;border:1px solid #78909b;border-radius:5px;height:32px}
.hoho-focus-heading .hoho-audio-line{display:flex;align-items:center;flex:1 1 420px;gap:5px;min-width:0;margin:3px 0;padding:0}
.hoho-focus-heading .hoho-audio-scrub{flex:1 1 130px;min-width:80px;max-width:360px}.hoho-focus-heading .hoho-audio-speed{width:62px;min-width:62px}
.hoho-chapter-menu-progress{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:8px 0}.hoho-chapter-menu-progress .reading-history{margin:0}
@media(max-width:600px){.hoho-focus-heading .hoho-audio-line{flex-basis:100%;flex-wrap:nowrap}.hoho-focus-heading .hoho-focus-reader-status{margin-left:0}.hoho-focus-heading .hoho-audio-time{font-size:11px}.hoho-focus-heading .hoho-audio-verse-select{max-width:52px;min-width:45px}.hoho-focus-heading .hoho-audio-verse-label{display:none}}
@media(max-width:600px){.hoho-focus-heading .hoho-audio-line{flex-wrap:nowrap!important;gap:3px}.hoho-focus-heading .hoho-audio-speed{min-width:48px;width:48px}.hoho-focus-heading .hoho-audio-scrub{min-width:55px;flex-basis:65px}.hoho-focus-heading .hoho-audio-line .hoho-terminal-action{padding:3px;min-width:27px}.hoho-focus-heading .hoho-audio-verse-select{max-width:43px;min-width:40px}}

/* Reader selectors share the same arrowless treatment in chapter/verse views. */
.hoho-terminal-screen select,.hoho-bible-selector-row select,.bilingual-reader select{appearance:none!important;-webkit-appearance:none!important;background-image:none!important}
.hoho-focus-heading select.hoho-compact-version{min-width:0!important;width:78px!important;max-width:95px!important;border:0;background:transparent;padding:2px!important}
.hoho-focus-heading .hoho-audio-speed{appearance:none;background:transparent;border:0;box-shadow:none;min-width:38px!important;width:38px!important;padding:2px!important;font:12px system-ui;color:inherit}
.hoho-focus-heading .hoho-audio-line .hoho-terminal-action{border:0;background:transparent;box-shadow:none;min-width:26px;padding:3px}
.hoho-focus-heading .hoho-audio-line{gap:3px;flex-wrap:nowrap}
.hoho-audio-line input[type=range],.bilingual-transport input[type=range]{accent-color:#e7bd67}
select.hoho-compact-version,select.hoho-audio-speed,select.hoho-audio-verse-select{appearance:none!important;-webkit-appearance:none!important;background-image:none!important}
.hoho-focus-heading .hoho-audio-line .hoho-terminal-action{border:0!important;box-shadow:none!important;background:transparent!important}
.hoho-focus-heading .hoho-audio-line{width:100%!important}
.hoho-focus-heading .hoho-audio-scrub{max-width:none!important;min-width:30px!important;flex:1 1 0!important}
/* Reader header is one chapter/actions row followed by its transport row. */
.hoho-focus-heading{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:5px!important}
.hoho-focus-heading .hoho-mobile-controls-toggle{font:13px Arial,sans-serif!important;padding:6px!important;min-height:40px!important;width:auto!important;max-width:125px}
.hoho-focus-heading .reader-strip-tools{flex-wrap:nowrap!important;gap:3px!important;margin:0!important;flex:0 1 auto!important}
.hoho-focus-heading .hoho-audio-line{flex-basis:100%!important}
.hoho-reader-edition-row{display:flex;align-items:center;gap:4px}
.hoho-reader-edition-row .hoho-edition-selector select{width:auto;max-width:150px;min-width:70px}
.hoho-reader-edition-row .hoho-edition-notice-summary button{min-width:28px;padding:3px;font:18px Arial,sans-serif}
.hoho-reader-edition-row .hoho-edition-notice{position:relative}
.hoho-reader-edition-row .hoho-edition-notice-details{position:absolute;right:0;z-index:30;min-width:260px;max-width:calc(100vw - 40px);background:#102332;padding:12px;border:1px solid #8fa5b5;border-radius:8px}
.hoho-bible-selector-row .hoho-book-chapter-selector{display:flex!important;gap:12px;align-items:center;flex-wrap:wrap}
.hoho-bible-selector-row .hoho-book-chapter-selector>label{flex:1 1 150px}
.reader-audio-time{font:11px system-ui;white-space:nowrap}
@media(max-width:420px){
 .hoho-focus-heading .reader-strip-tools,.bilingual-heading .reader-strip-tools{gap:1px!important}
 .hoho-focus-heading .reader-strip-tools>a,.hoho-focus-heading .reader-strip-tools>button,.bilingual-heading .reader-strip-tools>a,.bilingual-heading .reader-strip-tools>button{width:24px!important;min-width:24px!important;padding:2px!important}
 .hoho-focus-heading .reader-strip-tools .passage-feedback button,.bilingual-heading .reader-strip-tools .passage-feedback button{width:24px!important;min-width:24px!important;padding:2px!important;border:0!important}
 .hoho-focus-heading .reader-strip-tools svg,.bilingual-heading .reader-strip-tools svg{width:18px!important;height:18px!important}
 .hoho-focus-heading .reader-mode-switch,.bilingual-heading .reader-mode-switch{width:65px!important;min-width:65px!important;padding:2px!important;gap:2px!important}
}
@media(max-width:420px){
 .bilingual-heading .reader-strip-tools>a.reader-mode-switch,.hoho-focus-heading .reader-strip-tools>a.reader-mode-switch{width:65px!important;min-width:65px!important;flex:0 0 65px!important;font-size:11px!important;gap:2px!important;padding:2px!important}
 .reader-strip-tools>a.reader-mode-switch .mode-track{width:28px;min-width:28px;flex-shrink:0}
}
@media(max-width:360px){
 .bilingual-heading .bilingual-menu,.hoho-focus-heading .hoho-mobile-controls-toggle{flex:0 1 80px!important;max-width:80px!important;min-width:0!important;font-size:11px!important;overflow:hidden}
 .bilingual-heading .bilingual-menu span,.hoho-focus-heading .hoho-mobile-controls-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bilingual-heading .reader-strip-tools>a:not(.reader-mode-switch),.bilingual-heading .reader-strip-tools>button,.bilingual-heading .reader-strip-tools .passage-feedback button{width:22px!important;min-width:22px!important}
}
.hoho-focus-heading:has(.hoho-audio-line){display:grid!important;grid-template-columns:max-content minmax(0,1fr);gap:5px!important}
.hoho-focus-heading:has(.hoho-audio-line)>.hoho-mobile-controls-toggle{grid-column:1;grid-row:1}
.hoho-focus-heading:has(.hoho-audio-line)>.reader-strip-tools{grid-column:2;grid-row:1;min-width:0;width:max-content;max-width:100%}
.hoho-focus-heading:has(.hoho-audio-line)>.hoho-audio-line{grid-column:1 / -1;grid-row:2}
.hoho-bible-selector-row .hoho-reader-edition-row{display:flex!important;grid-column:1 / -1;justify-content:flex-start!important;align-items:center;gap:4px;flex-wrap:wrap}
.hoho-bible-selector-row .hoho-reader-edition-row .hoho-edition-selector{flex:0 1 auto!important;width:auto!important}
.hoho-bible-selector-row .hoho-reader-edition-row .hoho-edition-notice{flex:0 0 auto!important;justify-self:start!important}
/* Menu selectors advertise expansion; transport selectors remain arrowless. */
.hoho-bible-selector-row select,.bilingual-controls select,.reader-menu-chapter select{appearance:auto!important;-webkit-appearance:menulist!important;background-image:none!important}
.hoho-reader-edition-row{align-items:flex-end!important}
.hoho-reader-edition-row .hoho-edition-notice-summary{align-items:center;display:flex}
.hoho-reader-edition-row .hoho-edition-notice-summary button{min-height:44px;margin:0!important}
.reader-visible-progression{grid-column:1 / -1;grid-row:3;margin:0 0 4px}
.hoho-chapter-study .hoho-study-view,.hoho-chapter-study .hoho-reading-card{margin-top:4px!important;padding-top:0!important}
.hoho-chapter-study .hoho-chapter-audio:empty{display:none}
.hoho-chapter-study .hoho-reader-menus{margin-block:4px!important;padding-block:0!important}
.hoho-chapter-study .hoho-bible-selector-row{margin-block:4px!important;row-gap:6px!important}
.hoho-chapter-study:not(.hoho-mobile-controls-open) .hoho-chapter-menu-progress{display:none!important}
.hoho-mobile-controls-open .hoho-mobile-controls-toggle>svg,.bilingual-heading.is-expanded .bilingual-menu>svg{animation:reader-collapse-cue 1.5s ease-in-out 4}
@keyframes reader-collapse-cue{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.hoho-mobile-controls-open .hoho-mobile-controls-toggle>svg,.bilingual-heading.is-expanded .bilingual-menu>svg{animation:none}}
.hoho-chapter-study .hoho-study-view{gap:4px!important}
.hoho-chapter-study .hoho-study-view [hidden]{display:none!important}
.hoho-chapter-audio:has(audio):not(:has(.hoho-audio-line)){padding:0!important;margin:0!important;gap:0!important;min-height:0!important}
.hoho-chapter-study:not(.hoho-mobile-controls-open) .hoho-saved-timing-optin{display:none!important}
.hoho-focus-heading:has(.hoho-audio-line){row-gap:0!important}
.reader-visible-progression{margin:0!important}
.hoho-chapter-audio:has(audio):not(:has(.hoho-audio-line)){display:contents!important}
.hoho-chapter-study .hoho-study-view,.hoho-chapter-study .hoho-reading-card{margin-top:0!important}
.hoho-mobile-controls-open .hoho-mobile-controls-toggle>svg,.bilingual-heading.is-expanded .bilingual-menu>svg{animation:reader-collapse-cue 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hoho-mobile-controls-open .hoho-mobile-controls-toggle>svg,.bilingual-heading.is-expanded .bilingual-menu>svg{animation:none;filter:drop-shadow(0 0 2px #e7bd67)}}

/* Invite the quiz only while the reader is on the final verse. */
@keyframes reader-quiz-cue{0%,100%{opacity:1;filter:none}50%{opacity:.55;filter:drop-shadow(0 0 5px #eac36b)}}
.hoho-chapter-study.reader-last-verse:has(.hoho-study-view:not([hidden])) [data-reader-quiz],.bilingual-reader.reader-last-verse [data-reader-quiz]{animation:reader-quiz-cue 2s ease-in-out infinite;color:#eac36b}
@media(prefers-reduced-motion:reduce){.hoho-chapter-study.reader-last-verse:has(.hoho-study-view:not([hidden])) [data-reader-quiz],.bilingual-reader.reader-last-verse [data-reader-quiz]{animation:none;filter:drop-shadow(0 0 3px #eac36b)}}
/* Pair the WATCH footer's existing reader switch with its matching header control. */
.hoho-chapter-study:has(.hoho-watch-read-mode:hover) .hoho-focus-heading .reader-mode-switch,
.hoho-chapter-study:has(.hoho-watch-read-mode:focus-within) .hoho-focus-heading .reader-mode-switch{animation:hoho-mode-pulse .6s ease-in-out 3}
@keyframes hoho-mode-pulse{50%{filter:brightness(1.8);outline:2px solid #e7bd67}}
@media(prefers-reduced-motion:reduce){.hoho-chapter-study:has(.hoho-watch-read-mode:hover) .hoho-focus-heading .reader-mode-switch,.hoho-chapter-study:has(.hoho-watch-read-mode:focus-within) .hoho-focus-heading .reader-mode-switch{animation:none;outline:2px solid #e7bd67}}

/* Shared library buttons: queue and viewing history use the same responsive treatment. */
.hoho-library-action{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:6px 10px;box-sizing:border-box;border-radius:6px;text-decoration:none;background:linear-gradient(to right,#9f2020 0 var(--library-fill,0%),#102332 var(--library-fill,0%) 100%)}
.hoho-sign-in-guide{outline:2px solid #e7bd67;outline-offset:3px;animation:hoho-sign-in-blink .6s ease-in-out 4}
@keyframes hoho-sign-in-blink{50%{background:#e7bd67;color:#102332}}
@media(prefers-reduced-motion:reduce){.hoho-sign-in-guide{animation:none;background:#e7bd67;color:#102332}}

/* Keep the rightmost search hint inside narrow viewports, to the left of its button. */
@media(max-width:760px){.hoho-video-search button.hoho-responsive-action:is(:hover,:focus) .hoho-responsive-tip{left:auto;right:calc(100% + .25rem);max-width:min(220px,calc(100vw - 7rem));}}

/* HOHO Test controls share the compact reader vocabulary. */
.hoho-test-heading { display:flex; align-items:center; gap:.5rem; color:#d7ba7d; }
.hoho-test-heading .hoho-terminal-title { margin:0; min-width:0; }
.hoho-test-heading .passage-feedback { margin:0; }
.hoho-test-heading .hoho-terminal-action, .hoho-test-heading .share-launch { color:#d7ba7d; background:#163b63; border:1px solid #d7ba7d; width:40px; height:40px; padding:.4rem; }
@media(max-width:760px) {
 .hoho-test-question-share .hoho-terminal-statusRight { flex-wrap:nowrap; align-items:center; gap:.3rem; }
 .hoho-test-question-share .hoho-terminal-statusRight > button.hoho-terminal-action { flex-basis:auto; margin:0; width:36px; min-width:36px; height:36px; padding:.3rem; }
 .hoho-test-question-share .hoho-pause-symbol { display:block; }
 .hoho-test-question-share .hoho-pause-label { display:none; }
}

.hoho-test-heading{--hoho-feedback-action-color:#d7ba7d}

.hoho-test-elapsed{margin-left:auto;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:#d7ba7d;font:14px ui-monospace,monospace;font-variant-numeric:tabular-nums}
.hoho-time-compact{display:none}
@media(max-width:760px){
 .hoho-test-question-share .hoho-test-heading{gap:4px;flex-wrap:nowrap}
 .hoho-test-question-share .hoho-test-heading .hoho-terminal-title{font-size:clamp(.8rem,3.5vw,1rem);letter-spacing:.08em}
 .hoho-test-question-share .hoho-test-heading .hoho-terminal-action,.hoho-test-question-share .hoho-test-heading .share-launch{width:32px;height:32px;min-width:32px;min-height:32px;padding:4px}
 .hoho-test-elapsed{font-size:12px;gap:3px}
 .hoho-test-question-share .hoho-terminal-statusRow{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
 .hoho-test-question-share .hoho-terminal-statusRow>.hoho-terminal-statusText{flex:0 1 auto;min-width:0;white-space:nowrap;font-size:clamp(12px,3.5vw,14px)}
 .hoho-test-question-share .hoho-terminal-statusRight{margin-left:0;gap:5px}
 .hoho-test-question-share .hoho-question-time{font-size:11px!important;white-space:nowrap}
 .hoho-test-question-share .hoho-question-time:has(.hoho-time-compact) .hoho-time-full{display:none}
 .hoho-test-question-share .hoho-time-compact{display:inline}
}
.hoho-test-question-share .hoho-terminal-statusRow{justify-content:flex-start;align-items:center}
.hoho-test-question-share .hoho-terminal-statusRow>.hoho-terminal-statusText{flex:0 1 auto;min-width:0}
.hoho-test-question-share .hoho-terminal-statusRight{margin-left:0;align-items:center}

.hoho-test-question-share .hoho-terminal-statusRight{margin-left:auto}
@media(max-width:760px){.hoho-test-question-share .hoho-question-time{white-space:normal;max-width:14ch;text-align:right;line-height:1.25}.hoho-test-question-share .hoho-terminal-statusRight{flex:none}.hoho-test-question-share .hoho-terminal-statusRow>.hoho-terminal-statusText{font-size:12px}}
@media(max-width:360px){.hoho-test-question-share .hoho-test-heading .hoho-terminal-title{font-size:11px;letter-spacing:.04em;white-space:nowrap}}

.hoho-site-feedback-actions{display:flex;align-items:center;gap:8px;color:#d7ba7d;--hoho-feedback-action-color:#d7ba7d}.hoho-site-feedback-actions .passage-feedback{margin:0}.hoho-site-feedback-actions .share-launch{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#d7ba7d}

@media(max-width:760px){.hoho-assessment[data-hoho-test-introduction]{margin-top:0;padding-top:0}}

/* Compact hosted workspace; native Teams owns video/call controls. */
body.hoho-teams-document .hoho-page { min-width:0; background:#080d13; }
body.hoho-teams-document .hoho-main { padding:.25rem; width:100%; min-width:0; }
body.hoho-teams-document .hoho-content,.hoho-teams-document .hoho-bible-direct { width:100%; max-width:none; min-width:0; box-sizing:border-box; }
body.hoho-teams-document .hoho-nav-links { flex-wrap:wrap; gap:.15rem; }
body.hoho-teams-document .hoho-nav-links a { font-size:.8rem; padding:.35rem .45rem; min-height:32px; }
body.hoho-teams-document .reader-visible-progression { display:none; }
body.hoho-teams-document .hoho-focus-heading { gap:.2rem; margin-bottom:.25rem; padding:.15rem; }
body.hoho-teams-document .hoho-focus-heading button,.hoho-teams-document .hoho-focus-heading select { min-height:32px; }

@media(max-width:650px) {
 body.hoho-teams-document .hoho-navigation-strip { display:grid; grid-template-columns:minmax(0,1fr) auto; }
 body.hoho-teams-document .hoho-history-actions { position:static; padding-left:4px; }
 body.hoho-teams-document .hoho-strip-account { position:static; grid-column:1 / -1; max-width:none; width:100%; justify-content:flex-end; padding:0 6px; box-sizing:border-box; }
 body.hoho-teams-document .hoho-strip-account .hoho-account-actions { flex-direction:row; align-items:center; font-size:12px; gap:8px; }
 body.hoho-teams-document .hoho-strip-account .hoho-account-actions a,.hoho-teams-document .hoho-strip-account .hoho-account-actions button { max-width:120px; line-height:32px; min-height:32px; }
 body.hoho-teams-document .hoho-reader-strip-actions { position:static; grid-column:1 / -1; padding:0; }
 body.hoho-teams-document .hoho-site-navigation { grid-column:1 / -1; min-width:0; }
 body.hoho-teams-document .hoho-site-navigation > summary { top:0; left:auto; right:6px; transform:none; }
 body.hoho-teams-document .hoho-header { display:block; padding:0 .15rem; }
 body.hoho-teams-document .hoho-nav-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin:0; }
 body.hoho-teams-document .hoho-nav-links a { display:flex; align-items:center; justify-content:center; white-space:normal; text-align:center; min-width:0; font-size:.75rem; padding:.2rem; line-height:1.2; }
}

/* Reuse the established HOHO cue for the current account input or action. */
[data-account-guidance] .is-attention { outline:2px solid #e7bd67; outline-offset:2px; }
.hoho-account-field.is-attention { animation:hoho-continue-blink 1.05s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
 [data-account-guidance] .is-attention { animation:none !important; }
}