/* =========================================================
   VBQ — Video-Based Qualification Questions
   Shared styles for term_details.html and vbq_videos.html
   ========================================================= */

.vbq-thumb-wrap {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

.vbq-thumb-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}

/* term_details uses a fixed-width layout — override aspect-ratio there */
.vbq-thumb-wrap.vbq-inline video {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    opacity: 0.85;
}

.vbq-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.22);
    border-radius: 50%;
    /* Colour lives on the disc, not the glyph: Font Awesome's JS build replaces
       <i> with <svg>, so an `.vbq-play-btn i` rule stops matching and the mark
       falls back to inheriting the body colour (slate). Inheriting from here
       works for <i>, for the replaced <svg> (fill: currentColor), and for a
       plain character. */
    color: #007bff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* The triangle carries the colour; the disc stays white. Set from CSS rather
   than inline on each <i>, so every play button matches from one place. */
.vbq-play-btn i,
.vbq-play-btn svg,
.vbq-play-btn svg path {
    color: #007bff;
    fill: currentColor;
}

.vbq-thumb-wrap:hover .vbq-play-btn {
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.30);
    transform: translate(-50%, -50%) scale(1.06);
}

/* ── Discrete corner play button ───────────────────────────────────────────
   The big centred disc sat squarely on the speaker's face. The mark moves to
   the lower-left corner and shrinks; the whole thumbnail stays clickable (the
   click handler is bound to .vbq-thumb-wrap / the card, not to this button),
   so nothing is lost by making it small. `transform: none` cancels the
   centring translate from .vbq-play-btn above. */
.vbq-play-btn.vbq-play-corner {
    top: auto;
    left: 8px;
    bottom: 8px;
    transform: none;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.28);
}

.vbq-thumb-wrap:hover .vbq-play-btn.vbq-play-corner {
    transform: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.34);
}

/* ── VBQ card ──────────────────────────────────────────────────────────────
   The width used to sit INLINE on the card that add_profile_inline.js builds,
   where no stylesheet could reach it. The shared builder no longer writes
   inline geometry, so the size lives here — one place, reachable by a media
   query. (_featured_candidate_chart.html sizes its own .fcc-vid-card.) */
.vbq-profile-card {
    width: 220px;
    flex: 0 0 220px;
}

/* ── VBQ card: header + question above the thumbnail ───────────────────── */
.vbq-card-head {
    font-size: 0.68rem;
    font-weight: 700;
    color: #14274e;
    line-height: 1.3;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbq-card-q {
    font-size: 0.72rem;
    font-weight: 600;
    color: #555;
    line-height: 1.3;
    margin-bottom: 6px;
    min-height: 2.4em;
}

/* ── Score + difficulty, two lines under the thumbnail ─────────────────────
   These are the point of the card — they read larger than the question above
   the image, and Score sits on top of Difficulty. Deliberately NOT overlaid on
   the thumbnail any more: an overlay competes with the video frame. */
.vbq-grade-lines {
    padding: 8px 10px 4px;
}

/* Difficulty is set in the SAME type as Score (Lloyd, 2026-08-19). It used to
   be a step smaller, lighter and grey, which read as a caption hanging off the
   score rather than the second half of the result. One grouped rule so the two
   cannot drift apart again. */
.vbq-score-line,
.vbq-diff-line {
    font-size: 0.86rem;
    font-weight: 700;
    color: #14274e;
    line-height: 1.35;
}

/* Ungraded is the one case that stays quieter — it is the absence of a score,
   not a score. Difficulty keeps the rule above. */
.vbq-score-line.vbq-ungraded {
    font-size: 0.76rem;
    font-weight: 600;
    color: #6c757d;
}

/* ── Hover panel: full question + term, for cards that truncate them ─────── */
.vbq-hover-host {
    position: relative;
}

.vbq-hover-modal {
    display: none;
    position: absolute;
    z-index: 1080;
    bottom: calc(100% + 8px);
    left: 0;
    width: 260px;
    background: #fff;
    color: #14274e;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.22);
    padding: 10px 12px;
    text-align: left;
    pointer-events: none;
}

.vbq-hover-host:hover .vbq-hover-modal {
    display: block;
}

.vbq-hover-modal .vbq-hover-term {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0b73e2;
    margin-bottom: 4px;
}

.vbq-hover-modal .vbq-hover-q {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Unpublished video — dimmed for owner view */
.vbq-unpublished {
    opacity: 0.55;
}

.vbq-unpublished .vbq-play-btn {
    background: rgba(100, 100, 100, 0.85);
}

/* Modal video player */
#videoPlayerModal .modal-content {
    background: #000;
    border: none;
}

#videoPlayerModal .modal-header {
    border: none;
    padding: 0.5rem 1rem;
}

#modalVideoPlayer {
    width: 100%;
    max-height: 70vh;
    display: block;
    background: #000;
}

/* Info banner — green accent, no Bootstrap blue */
.vbq-info-banner {
    background: #f0faf6;
    border-left: 4px solid #017bfe;
    border-radius: 6px;
    padding: 10px 16px;
    color: #14274e;
    font-size: 0.88rem;
}

/* ─── VBQ card popup: the recording plus its result ─────────────────────────
   #vbqPlayerModal on the profile page (add_profile.html). Only the modal
   CHROME is styled here — the score row and the two accordions inside it reuse
   the recording modal's classes (.score-row, .rating-stars, .card-header,
   .card-body-accordian), which are already loaded on this page, so both
   surfaces stay identical without a second copy of those rules. The old
   .vbq-result-panel styles were removed with the markup they dressed. */
.vbq-result-modal {
    background: #fff;
    border: none;
}

.vbq-result-modal .modal-header {
    border-bottom: 1px solid #eef2f7;
    padding: 0.6rem 1rem;
}

.vbq-result-modal .modal-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #14274e;
    line-height: 1.35;
}

.vbq-result-modal .modal-footer {
    border-top: 1px solid #eef2f7;
    padding: 0.5rem 1rem;
}

/* Both headers toggle a collapse, so both need to look clickable. */
.vbq-result-modal .card-header {
    cursor: pointer;
}

/* The transcript is the longest thing in the popup and the least often read —
   cap it so opening it cannot push the feedback above it out of view. */
.vbq-result-modal .transcript_accordion .card-body {
    max-height: 240px;
    overflow-y: auto;
}