/* ============================================================================
   Questions module; shared layout primitives
   ----------------------------------------------------------------------------
   Global (unscoped) on purpose: these rules are shared by the FrontEnd host
   pages and by several components, and they reach into MudBlazor's rendered
   markup. Component-private rules stay in that component's .razor.css.
*/
/* ── Bounded page shell ──────────────────────────────────────────────────────
   The app shell only ever declares `min-height`, so its height is indefinite:
   a percentage height or a flex-grow inside it has nothing to resolve against
   and collapses to auto — which is why the page kept growing and the document
   scrolled.

   `:has()` binds a definite height, but only on the routes that actually host a
   .qm-page. Every other page in the app is left exactly as it was, and browsers
   without :has() simply fall back to the old scrolling behaviour. */
.layout-container:has(.qm-page) {
    height: 100dvh;
}

.layout-container:has(.qm-page) .content-container,
.layout-container:has(.qm-page) .layout-responsive {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Below 700px the shell puts margin-top:10px on both wrappers. Margins sit
   outside the border box, so against a definite height they push the document
   20px past the viewport and reintroduce the scrollbar. The equivalent offset
   is applied inside .qm-page instead (see its phone rule below). */
@media (max-width: 700px) {
    .layout-container:has(.qm-page) .content-container,
    .layout-container:has(.qm-page) .layout-responsive {
        margin-top: 0;
    }

    /* Stack the shell on phones so the nav toggle sits above the page instead
       of beside it, which puts the tab strip below the toggle and directly
       above the table — matching the desktop order. Previously the tab strip
       was level with the toggle and needed a hardcoded margin-top to clear it. */
    .layout-container:has(.qm-page) {
        flex-direction: column;
    }
}

/* The page fills that height and never scrolls itself: one region inside it
   (the grid / question area) owns the scrolling, so the header and the action
   buttons stay visible. */
.qm-page {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--spacing-6xl, 50px) var(--spacing-6xl, 50px) var(--spacing-3xl, 30px);
    box-sizing: border-box;
}

/* Everything that must stay put. */
.qm-page-header,
.qm-actions {
    flex: 0 0 auto;
}

@media (max-width: 1200px) {
    .qm-page {
        padding-inline: var(--spacing-xl, 20px);
    }
}

@media (max-width: 700px) {
    /* Carries the offset the shell's margin-top used to provide, but inside the
       bounded box so it cannot push the document past the viewport. */
    .qm-page {
        padding: var(--spacing-sm, 8px) 0 var(--spacing-xl, 20px);
    }
}

/* Very short viewports (landscape phones): containing the layout would leave
   the scroll region unusably small, so let the page flow instead. */
@media (max-height: 520px) {
    .layout-container:has(.qm-page) {
        height: auto;
    }

    .qm-page {
        overflow: visible;
    }
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.qm-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-lg, 16px);
    padding: var(--spacing-3xl, 30px) var(--spacing-sm, 8px) var(--spacing-lg, 16px);
}

.qm-page-header-title {
    margin: 0;
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-3xl, 20px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-dark, #1A2338);
}

.qm-page-header-subtitle {
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-2xl, 18px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-navy, #263E78);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.qm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 12px);
    min-width: 150px;
    min-height: 40px;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    border: 1px solid transparent;
    border-radius: var(--radius-xs, 4px);
    cursor: pointer;
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-lg, 15px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
    transition: opacity var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out),
                box-shadow var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out);
}

.qm-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.qm-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.qm-btn:focus-visible {
    outline: 2px solid var(--Dark-Blue, #3183F5);
    outline-offset: 2px;
}

/* Primary action (start quiz / start exam) */
.qm-btn--primary {
    background: var(--color-navy, #263E78);
    color: var(--color-white, #FFF);
}

/* Secondary action (view questions) */
.qm-btn--secondary {
    background: var(--Dark-Blue, #3183F5);
    color: var(--color-white, #FFF);
}

/* Tertiary action (open filters) */
.qm-btn--ghost {
    background: var(--color-surface, #FFF);
    border-color: var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    color: var(--color-dark, #1A2338);
}

.qm-btn--ghost:hover:not(:disabled) {
    opacity: 1;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

/* Full-width action inside the filter panel */
.qm-btn--block {
    width: 100%;
    min-height: 45px;
}

/* ── Action row under a grid ─────────────────────────────────────────────── */
.qm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 12px);
    padding: var(--spacing-3xl, 30px) var(--spacing-sm, 8px) 0;
}

.qm-actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 12px);
}

/* ── Knowledge-level icon ────────────────────────────────────────────────── */
.qm-knowledge-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-xs, 4px);
    filter: var(--filter-rating-image);
}

/* ============================================================================
   Dialog containment
   ----------------------------------------------------------------------------
   Same rule as the page shell: the dialog is bounded, and one region inside it
   scrolls, so the navigation and action buttons stay visible. This replaces the
   per-dialog guesses (min-height:530px, height:74vh, 75vh, 80vh, 52vh) whose
   comments read "so that footer is visible without scroll".
*/
.qm-dialog {
    height: 90dvh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
}

.qm-dialog .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* MudPaper wrapper inside the exam/quiz dialogs. */
.qm-dialog .mud-dialog-content > .mud-paper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* The settings form is short: let it size to its content instead. */
.qm-dialog--compact {
    height: auto;
    max-height: 90dvh;
}

.qm-dialog--compact .mud-dialog-content {
    overflow-y: auto;
}

@media (max-width: 700px) {
    .qm-dialog {
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}

/* ============================================================================
   Result screen (quiz report + exam report)
   ----------------------------------------------------------------------------
   Shared by AbfragenAuswertungComponent and ExamDialog, which previously each
   carried their own ~180-line copy. The two differ in data (three buckets vs
   four, plus the exam's per-section breakdown), so the markup stays separate
   and only the presentation is shared.

   Named qz-result-* rather than reusing .stat-card: that name already means
   "the whole statistics panel" in StatisticComponent, and these rules are
   global, so the two would collide.
*/
.qz-result {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: var(--spacing-xl, 20px);
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    color: var(--color-text-primary, #1a1916);
}

.qz-result-head {
    flex: 0 0 auto;
}

.qz-result-title {
    margin: 0 0 var(--spacing-lg, 16px);
    font-size: var(--font-size-3xl, 20px);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #1a1916);
}

.qz-result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-lg, 16px);
}

.qz-result-stat {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-lg, 16px);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface, #FFF);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    text-align: center;
}

/* Accent bar. Explicit modifiers rather than :nth-child(), which silently
   mismatched when the exam report added a fourth bucket. */
.qz-result-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-xs, 4px) 0 0 var(--radius-xs, 4px);
    background: var(--color-gray-400, #9ca3af);
}

.qz-result-stat--good::before { background: var(--color-success, #10b981); }
.qz-result-stat--middle::before { background: var(--color-warning, #f59e0b); }
.qz-result-stat--wrong::before { background: var(--color-error, #ef4444); }

.qz-result-stat-label {
    margin-bottom: var(--spacing-sm, 8px);
    font-size: var(--font-size-md, 14px);
    color: var(--color-text-secondary, #7a7670);
}

.qz-result-stat-value {
    font-size: var(--font-size-3xl, 20px);
    font-weight: var(--font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

/* The only scrolling region of the report. */
.qz-result-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 16px);
    padding-right: var(--spacing-xs, 4px);
}

.qz-result-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg, 16px);
    padding: var(--spacing-lg, 16px);
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-surface, #FFF);
}

.qz-result-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-xs, 4px) 0 0 var(--radius-xs, 4px);
    background: var(--color-gray-400, #9ca3af);
}

.qz-result-item--good::before { background: var(--color-success, #10b981); }
.qz-result-item--middle::before { background: var(--color-warning, #f59e0b); }
.qz-result-item--wrong::before { background: var(--color-error, #ef4444); }

.qz-result-item-text {
    flex: 1;
    font-size: var(--font-size-lg, 15px);
    color: var(--color-text-secondary, #7a7670);
}

.qz-result-goto {
    flex-shrink: 0;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    border: none;
    border-radius: var(--radius-xs, 4px);
    background: var(--Dark-Blue, #3183F5);
    color: var(--color-white, #FFF);
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-md, 14px);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--transition-duration-base, 0.2s) ease;
}

.qz-result-goto:hover {
    opacity: 0.8;
}

@media (max-width: 600px) {
    .qz-result-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .qz-result-goto {
        width: 100%;
    }
}

/* Answer text inside the quiz shell (MudBlazor renders the option labels). */
.question-mcq-wrap .mud-typography-body1 {
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-lg, 15px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-dark, #1A2338);
}

/* ============================================================================
   Selection table (question selection + exam selection)
   ----------------------------------------------------------------------------
   Plain semantic <table> instead of MudDataGrid, which was rendering with
   sorting, filtering and grouping all switched off — a list in a table's
   clothing — and whose markup forced ~90 lines of overrides fighting
   MudBlazor's own table CSS.

   The whole row is a hit target, not just the checkbox. The layout switches
   from real columns to a two-row grid on phones via grid-template-areas.
*/
.qm-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    border-radius: var(--radius-md, 10px);
    background: var(--color-bg-default, #F8FBFF);
}

.qm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
}

/* Sticky header: column labels stay put while the rows scroll. */
.qm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--spacing-lg, 16px);
    text-align: left;
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-wide, 0.5px);
    text-transform: uppercase;
    color: var(--color-text-secondary, #7a7670);
    background: var(--color-bg-default, #F8FBFF);
    border-bottom: 1px solid var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    white-space: nowrap;
}

.qm-table tbody tr {
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-subtle, rgba(127, 141, 162, 0.30));
    transition: background var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out);
}

.qm-table tbody tr:last-child {
    border-bottom: none;
}

.qm-table tbody tr:hover {
    background: var(--color-surface-hover, #f7f5f2);
}

.qm-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--Dark-Blue, #3183F5) 8%, transparent);
}

/* Keyboard focus lands on the control inside the row; mirror it on the row. */
.qm-table tbody tr:focus-within {
    outline: 2px solid var(--Dark-Blue, #3183F5);
    outline-offset: -2px;
}

.qm-table td {
    padding: var(--spacing-lg, 16px);
    vertical-align: middle;
}

.qm-table-select {
    width: 1%;
    white-space: nowrap;
}

.qm-table-select-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
}

.qm-table-input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--Dark-Blue, #3183F5);
    cursor: pointer;
}

.qm-table-title {
    font-size: var(--font-size-lg, 15px);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-dark, #1A2338);
}

.qm-table-desc {
    font-size: var(--font-size-lg, 15px);
    font-weight: var(--font-weight-normal, 400);
    color: var(--color-text-secondary, #7a7670);
}

.qm-table-empty {
    padding: var(--spacing-5xl, 40px);
    text-align: center;
    color: var(--color-text-muted, #9ca3af);
}

@media (max-width: 700px) {
    /* Column headers make no sense once the row is stacked. */
    .qm-table thead {
        display: none;
    }

    .qm-table,
    .qm-table tbody {
        display: block;
    }

    .qm-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "select title"
            "desc   desc";
        gap: var(--spacing-xs, 4px) var(--spacing-md, 12px);
        align-items: center;
        padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
    }

    .qm-table td {
        padding: 0;
    }

    .qm-table-select { grid-area: select; width: auto; }
    .qm-table-title  { grid-area: title; }
    .qm-table-desc   { grid-area: desc; }

    .qm-knowledge-icon {
        width: 25px;
        height: 25px;
    }

    .qm-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs, 4px);
        padding: var(--spacing-lg, 16px) var(--spacing-lg, 16px) 0;
    }

    .qm-page-header-title {
        font-size: var(--font-size-xl, 16px);
    }

    .qm-actions {
        justify-content: center;
        padding-inline: var(--spacing-lg, 16px);
    }

    .qm-actions-group {
        flex: 1 1 auto;
        justify-content: center;
    }

    .qm-btn {
        flex: 1 1 auto;
    }
}

.vq {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
}


.vq-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    border-radius: var(--radius-lg, 12px);
    background: var(--vq-card-bg, var(--color-surface, #FFF));
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.vq-card--tinted {
    --vq-card-bg: var(--color-bg-sp, #ecf3fd);
}


.vq-eyebrow {
    margin: 0;
    color: var(--color-navy, #263E78);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-medium, 500);
}

/* Top strip of the prompt card: the question-number badge on the left, then the
   eyebrow — contextual info stays left-aligned like the rest of the app. Merges
   the number into the card so it no longer needs its own row in the shell. */
.vq-card-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md, 12px);
}

/* Left cluster on the word row (badge + word) for the learning card, which has
   no eyebrow strip. Keeps the number on the same line, to the left of the word. */
.vq-word-row-start {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    min-width: 0;
}

/* Question-number badge — a slim, tall rounded rectangle rather than a wide pill.
   Small footprint, strong typography, filled accent to mark the current (active)
   question. Kept visually identical to .qz-question-nr in the SRC/UBI dialogs. */
.vq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 24px;
    padding: var(--spacing-sm, 8px) var(--spacing-xs, 4px);
    border-radius: var(--radius-sm, 8px);
    background: var(--Dark-Blue, #3183F5);
    color: var(--color-white, #FFF);
    font-size: var(--font-size-lg, 15px);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vq-word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 12px);
}

.vq-word {
    margin: 0;
    color: var(--color-dark, #1A2338);
    font-size: 32px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.15;
    overflow-wrap: anywhere;
}


.vq-speaker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface, #FFF);
    color: var(--Dark-Blue, #3183F5);
    cursor: pointer;
    transition: background var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out),
                color var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out),
                box-shadow var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out);
}

.vq-speaker:hover {
    background: var(--Dark-Blue, #3183F5);
    color: var(--color-white, #FFF);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.vq-speaker:focus-visible {
    outline: 2px solid var(--Dark-Blue, #3183F5);
    outline-offset: 2px;
}

/* Borderless variant used inside example rows (icon only, subtle hover). */
.vq-speaker--bare {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
}

.vq-speaker--bare:hover {
    background: transparent;
    color: var(--color-navy, #263E78);
    box-shadow: none;
}

/* Off-screen, so the native controls never show up in the layout. Playback is
   driven from vocAudioPlayer.js and does not depend on these rules - the audio
   elements carry no controls attribute and are therefore display:none via the
   UA stylesheet anyway, which author CSS cannot override. */
.vq-audio-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* ── Input ───────────────────────────────────────────────────────────────── */
.vq-label {
    color: var(--Dark-Blue, #3183F5);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-medium, 500);
}

.vq-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--Dark-Blue, #3183F5);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface, #FFF);
    color: var(--color-dark, #1A2338);
    font-family: var(--font-family-heading, 'Urbanist', sans-serif);
    font-size: var(--font-size-lg, 15px);
    line-height: 1.4;
    transition: box-shadow var(--transition-duration-base, 0.2s) var(--transition-timing-ease, ease-in-out);
}

.vq-input::placeholder {
    color: var(--color-text-muted, #9CA3AF);
}

.vq-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--Dark-Blue, #3183F5) 20%, transparent);
}

.vq-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-md, 12px);
}

/* ── Reveal / answer ─────────────────────────────────────────────────────── */
.vq-reveal {
    animation: vq-reveal var(--transition-duration-slower, 0.3s) var(--transition-timing-ease, ease-in-out);
}

@keyframes vq-reveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vq-reveal {
        animation: none;
    }
}

.vq-answer-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    color: var(--Dark-Blue, #3183F5);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-medium, 500);
}

.vq-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--Dark-Blue, #3183F5);
    color: var(--color-white, #FFF);
    font-size: 12px;
    line-height: 1;
}

.vq-answer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 12px);
}

.vq-answer-word {
    margin: 0;
    color: var(--Dark-Blue, #3183F5);
    font-size: 25px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vq-your-answer {
    margin: 0;
    color: var(--color-text-secondary, #7a7670);
    font-size: var(--font-size-md, 14px);
}

.vq-your-answer b {
    color: var(--color-dark, #1A2338);
    font-weight: var(--font-weight-semibold, 600);
}

/* ── Examples ────────────────────────────────────────────────────────────── */
.vq-examples {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 12px);
}

.vq-examples-title {
    color: var(--Dark-Blue, #3183F5);
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-medium, 500);
}

.vq-example {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 12px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    border: 1px solid var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface, #FFF);
}

.vq-example-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 38px;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-sp, #ecf3fd);
    color: var(--color-navy, #263E78);
    font-size: var(--font-size-sm, 11px);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: var(--letter-spacing-wide, 0.5px);
}

.vq-example-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-dark, #1A2338);
    font-size: var(--font-size-md, 14px);
    line-height: 1.5;
}

.vq-example-divider {
    align-self: stretch;
    width: 1px;
    flex-shrink: 0;
    background: var(--color-border-stroke, rgba(70, 125, 206, 0.24));
    margin: calc(-1 * var(--spacing-xs, 4px)) 0;
}

/* Scale the shared action button down inside the vocabulary cards only, so the
   denser card scale carries through to the CTA without touching .qm-btn on the
   selection tables, exam, or quiz surfaces. */
.vq .qm-btn {
    min-width: 124px;
    min-height: 32px;
    padding: var(--spacing-xs, 4px) var(--spacing-md, 12px);
    font-size: var(--font-size-md, 14px);
}

@media (max-width: 700px) {
    .vq {
        gap: var(--spacing-md, 12px);
    }

    .vq-card {
        padding: var(--spacing-md, 12px);
    }

    .vq-word {
        font-size: 26px;
    }

    .vq-answer-word {
        font-size: 22px;
    }

    .vq-input {
        font-size: var(--font-size-lg, 15px);
    }

    .vq-actions .qm-btn {
        flex: 1 1 auto;
    }
}