/* Interview bank — personalised rails + sidebar.
   Mirrors the .courses-layout pattern on /courses/courses so the two browse
   pages behave the same: 1fr + fixed sidebar, sticky, sidebar dropped on
   narrow screens. */

.ib-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
}

.ib-layout {
    display: grid;
    grid-template-columns: 1fr 288px;
    gap: 26px;
    align-items: start;
}
.ib-main { min-width: 0; }   /* long question text must not blow out the grid */

.ib-side {
    position: sticky;
    top: calc(var(--header-height, 56px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: flex-start;
}

/* ── Rails ─────────────────────────────────────────────────────────────── */
.ib-rail { margin-bottom: 26px; }
.ib-rail-head { margin-bottom: 12px; }
.ib-rail-head h2 {
    font-size: 16px; font-weight: 800; margin: 0 0 3px;
    color: var(--gray-900, #111827); letter-spacing: -.01em;
}
.ib-rail-head p { margin: 0; font-size: 12.5px; color: var(--gray-500, #6B7280); line-height: 1.5; }

/* The personal rail is the one thing on the page that is about THIS reader, so
   it gets the accent rule. Everything else stays neutral. */
.ib-rail-you {
    background: #F7FAFF;
    border: 1px solid #DBEAFE;
    border-left: 3px solid var(--primary, #2563EB);
    border-radius: 12px;
    padding: 16px 18px;
}
.ib-rail-you .ib-rail-head h2 { color: var(--primary, #2563EB); font-size: 13px;
    text-transform: uppercase; letter-spacing: .08em; }
.ib-rail-you .ib-rail-head p { font-size: 15px; color: var(--gray-900, #111827); margin-top: 4px; }

.ib-sub {
    margin: 0 0 12px; padding: 8px 11px; border-radius: 8px;
    background: #FFFBEB; border: 1px solid #FDE68A;
    font-size: 12.5px; color: #92400E; line-height: 1.5;
}

.ib-qs { display: flex; flex-direction: column; gap: 8px; }

.ib-q {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 13px 15px;
    display: flex; gap: 12px; align-items: flex-start;
    text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s;
}
.ib-q:hover { border-color: var(--primary, #2563EB); transform: translateY(-1px); }
.ib-q-cat {
    flex-shrink: 0; font-size: 9px; font-weight: 700; padding: 3px 8px;
    border-radius: 5px; text-transform: uppercase; letter-spacing: .03em;
}
.ib-q-body { display: block; min-width: 0; flex: 1; }
.ib-q-text {
    display: block; font-size: 13.5px; font-weight: 500; line-height: 1.5;
    color: var(--gray-900, #111827); margin-bottom: 5px; overflow-wrap: anywhere;
}
.ib-q-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--gray-400, #9CA3AF); }

.ib-more {
    display: inline-block; margin-top: 11px; font-size: 12.5px; font-weight: 700;
    color: var(--primary, #2563EB); text-decoration: none;
}
.ib-more:hover { text-decoration: underline; }

/* Visitor entry points */
.ib-starts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ib-start {
    background: var(--white, #fff); border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px; padding: 14px; text-align: center;
    text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.ib-start:hover { border-color: var(--primary, #2563EB); transform: translateY(-1px); }
.ib-start b { display: block; font-size: 13.5px; font-weight: 700; color: var(--gray-900, #111827); }
.ib-start span { font-size: 11.5px; color: var(--gray-400, #9CA3AF); }

.ib-browse-h {
    font-size: 16px; font-weight: 800; margin: 30px 0 14px;
    padding-top: 20px; border-top: 1px solid var(--border, #E5E7EB);
    color: var(--gray-900, #111827);
}

/* ── Sidebar cards ─────────────────────────────────────────────────────── */
.ib-card {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    padding: 15px 16px;
}
.ib-card-cta { background: #F7FAFF; border-color: #DBEAFE; }
.ib-card h3 {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-500, #6B7280); margin: 0 0 10px;
}
.ib-side-lead { margin: 0 0 10px; font-size: 13px; color: var(--gray-700, #374151); line-height: 1.55; }
.ib-side-lead b { color: var(--gray-900, #111827); }

.ib-side-list { list-style: none; margin: 0; padding: 0; }
.ib-side-list li {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--gray-100, #F3F4F6);
    font-size: 12.5px;
}
.ib-side-list li:last-child { border-bottom: 0; }
.ib-side-list a { color: var(--gray-800, #1F2937); text-decoration: none; flex: 1; min-width: 0; }
.ib-side-list a:hover { color: var(--primary, #2563EB); }
.ib-side-list span { flex-shrink: 0; font-size: 11px; color: var(--gray-400, #9CA3AF);
                     font-variant-numeric: tabular-nums; }
.ib-side-threads li { display: block; }
.ib-side-threads span { display: block; margin-top: 2px; }

.ib-side-cta {
    display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700;
    color: var(--primary, #2563EB); text-decoration: none;
}
.ib-side-cta:hover { text-decoration: underline; }

/* Sidebar is reference material; below this width the main column takes over.
   Matches the /courses/courses breakpoint exactly. */
@media (max-width: 1023px) {
    .ib-layout { grid-template-columns: 1fr; gap: 0; }
    .ib-side { display: none; }
}
@media (max-width: 560px) {
    .ib-shell { padding: 16px; }
    .ib-starts { grid-template-columns: 1fr; }
    .ib-rail-you { padding: 14px; }
}

/* ── Ask a question ────────────────────────────────────────────────────── */
.ib-ask {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px;
    padding: 18px;
    margin: 26px 0;
}
.ib-ask-head h2 { font-size: 15px; font-weight: 800; margin: 0 0 3px; color: var(--gray-900, #111827); }
.ib-ask-head p  { margin: 0 0 12px; font-size: 12.5px; color: var(--gray-500, #6B7280); line-height: 1.5; }

.ib-ask-open {
    background: var(--primary, #2563EB); color: #fff; border: 0;
    padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.ib-ask-open:hover { background: #1D4ED8; }

.ib-ask-form { display: grid; gap: 9px; margin-top: 13px; }
/* Author display beats the UA stylesheet's [hidden] { display: none }. */
.ib-ask-form[hidden] { display: none; }
.ib-ask-form textarea, .ib-ask-form input, .ib-ask-form select {
    width: 100%; padding: 9px 11px; border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.6;
    box-sizing: border-box; background: var(--white, #fff); color: var(--gray-900, #111827);
}
.ib-ask-form textarea { resize: vertical; min-height: 72px; }
.ib-ask-row { display: grid; grid-template-columns: 160px 1fr; gap: 9px; }
.ib-ask-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ib-ask-send {
    background: var(--primary, #2563EB); color: #fff; border: 0;
    padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.ib-ask-send:disabled { opacity: .6; cursor: default; }
.ib-ask-msg { font-size: 12.5px; color: var(--gray-500, #6B7280); }
.ib-ask-msg.is-ok  { color: #059669; }
.ib-ask-msg.is-bad { color: #B91C1C; }

@media (max-width: 560px) { .ib-ask-row { grid-template-columns: 1fr; } }

/* ── Question detail: nudge, credit, discussion ────────────────────────── */
.qd-nudge {
    background: #FFFBEB; border: 1px solid #FDE68A; border-left: 3px solid #F59E0B;
    border-radius: 0 10px 10px 0; padding: 11px 14px; margin-bottom: 14px;
}
.qd-nudge b { display: block; font-size: 13.5px; color: #92400E; margin-bottom: 2px; }
.qd-nudge span { font-size: 12.5px; color: #A16207; line-height: 1.5; }

.qd-asker { margin: 6px 0 0; font-size: 12px; color: var(--gray-500, #6B7280); }
.qd-asker b { color: var(--gray-700, #374151); }

.qd-thread {
    background: var(--white, #fff); border: 1px solid var(--border, #E5E7EB);
    border-radius: 12px; padding: 18px; margin-top: 18px;
}
.qd-thread-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.qd-thread-head h2 { font-size: 15px; font-weight: 800; margin: 0; color: var(--gray-900, #111827); }
.qd-thread-head h2 span { color: var(--gray-400, #9CA3AF); font-weight: 700; }
.qd-thread-head a { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary, #2563EB); text-decoration: none; }
.qd-thread-head a:hover { text-decoration: underline; }

.qd-empty { margin: 0 0 14px; font-size: 13px; color: var(--gray-500, #6B7280); line-height: 1.6; }

.qd-comments { display: flex; flex-direction: column; gap: 13px; margin-bottom: 15px; }
.qd-comment { display: flex; gap: 10px; align-items: flex-start; }
.qd-comment img, .qd-ci {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; background: var(--gray-200, #E5E7EB);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--gray-500, #6B7280);
}
.qd-cmeta { font-size: 12px; color: var(--gray-400, #9CA3AF); margin-bottom: 3px; }
.qd-cmeta b { color: var(--gray-900, #111827); font-size: 12.5px; margin-right: 7px; }
/* pre-wrap alone handles the newlines — nl2br here would double every one. */
.qd-cbody { font-size: 13px; color: var(--gray-700, #374151); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

.qd-reply textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--border, #E5E7EB);
    border-radius: 9px; font-family: inherit; font-size: 13px; line-height: 1.65;
    resize: vertical; box-sizing: border-box;
}
.qd-reply-actions { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.qd-reply-actions button {
    background: var(--primary, #2563EB); color: #fff; border: 0;
    padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.qd-reply-actions button:disabled { opacity: .6; cursor: default; }
.qd-reply-msg { font-size: 12.5px; color: var(--gray-500, #6B7280); }

.qd-reply-login {
    background: none; border: 1px solid var(--border, #E5E7EB); color: var(--gray-700, #374151);
    padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.qd-reply-login:hover { border-color: var(--primary, #2563EB); color: var(--primary, #2563EB); }

.qd-edit-form[hidden] { display: none; }

/* ── Stats + filter bar ────────────────────────────────────────────────────
   These replace inline styles that could not be overridden at a breakpoint,
   which is why the bar had no mobile behaviour at all. Desktop values below
   reproduce exactly what the inline styles did. */
.ib-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.ib-stat { text-align: center; }
.ib-stat b { display: block; font-size: 22px; font-weight: 700; color: var(--primary, #2563EB); }
.ib-stat span { display: block; font-size: 11px; color: var(--gray-400, #9CA3AF); }

.ib-filters-top { height: 1px; }
.ib-filters {
    display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;
    /* Sticks below the site header, the same convention page-meet-offline.css
       uses. It was position:static, so it scrolled away on every page. */
    position: sticky;
    top: calc(var(--header-height, 56px) + 8px);   /* JS overrides with the measured header */
    z-index: 20;
    background: var(--gray-100, #F3F4F6);
    padding: 8px 0;
    transition: box-shadow .18s ease;
}
.ib-filters.is-stuck {
    box-shadow: 0 6px 20px rgba(15, 23, 42, .10);
}
@media (prefers-reduced-motion: reduce) { .ib-filters { transition: none; } }

.ib-cats {
    display: flex; gap: 4px; background: var(--gray-100, #F3F4F6);
    padding: 3px; border-radius: 8px; border: 1px solid var(--border, #E5E7EB);
}
/* Wrappers vanish on desktop so their children stay direct flex children of
   .ib-filters — the layout the inline styles produced. */
.ib-searchwrap, .ib-filter-adv { display: contents; }

.ib-role-select {
    padding: 7px 10px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px;
    font-size: 12px; font-family: var(--font-family); background: var(--white, #fff);
    color: var(--gray-700, #374151); max-width: 240px;
}
.ib-search { flex: 1; min-width: 180px; position: relative; }
.ib-search i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--gray-400, #9CA3AF); font-size: 12px;
}
.ib-search input {
    width: 100%; padding: 7px 10px 7px 30px; border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px; font-size: 12px; font-family: var(--font-family);
}
.ib-filter-toggle { display: none; }   /* phones only */

@media (max-width: 640px) {
    .ib-filters {
        gap: 7px; padding: 8px; background: var(--white, #fff);
        border: 1px solid var(--border, #E5E7EB); border-radius: 11px;
        flex-wrap: nowrap; flex-direction: column; align-items: stretch;
    }

    /* Search first, categories under it — the reverse of source order. */
    .ib-searchwrap { display: flex; gap: 7px; align-items: center; order: 1; }
    .ib-search { min-width: 0; }        /* 180px would force the button to wrap */
    .ib-cats   { order: 2; }
    .ib-filter-adv { order: 3; }

    .ib-filter-toggle {
        display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
        padding: 8px 12px; border-radius: 8px;
        background: var(--white, #fff); border: 1px solid var(--border, #E5E7EB);
        color: var(--gray-700, #374151);
        font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    .ib-filter-toggle[aria-expanded="true"] { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
    .ib-filter-n {
        background: var(--primary, #2563EB); color: #fff; border-radius: 999px;
        font-size: 9.5px; font-weight: 800; padding: 1px 5px;
    }

    /* One scrolling row instead of wrapping. "Tất cả" and "Culture Fit" were
       breaking onto two lines INSIDE their own pill, which is what made the
       bar look broken. */
    .ib-cats {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; flex-wrap: nowrap;
        background: none; border: 0; padding: 0;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .ib-cats::-webkit-scrollbar { display: none; }
    .ib-cats .qb-pill { white-space: nowrap; flex: 0 0 auto; }

    .ib-filter-adv { display: none; }
    .ib-filter-adv.is-open { display: block; }
    .ib-role-select { width: 100%; max-width: none; padding: 9px 10px; }

    /* Four centred stats became a single readable line. "Điểm TB" is dropped —
       an average AI score means nothing to a first-time visitor. */
    .ib-stats {
        gap: 0; margin-bottom: 12px; justify-content: flex-start;
        flex-wrap: wrap; font-size: 12px; color: var(--gray-500, #6B7280);
    }
    .ib-stat { display: inline; text-align: left; }
    .ib-stat + .ib-stat::before { content: ' · '; color: var(--gray-300, #D1D5DB); }
    .ib-stat b { display: inline; font-size: 13px; color: var(--gray-900, #111827); }
    .ib-stat span { display: inline; font-size: 12px; color: var(--gray-500, #6B7280); margin-left: 3px; }
    .ib-stat-score { display: none; }

    /* Three stacked full-width cards cost 242px for three links. */
    .ib-starts {
        display: flex; grid-template-columns: none; gap: 7px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 2px;
    }
    .ib-starts::-webkit-scrollbar { display: none; }
    .ib-start {
        flex: 0 0 auto; padding: 9px 13px; text-align: left; white-space: nowrap;
        display: flex; align-items: baseline; gap: 6px;
    }
    .ib-start b { font-size: 12.5px; }
    .ib-start span { font-size: 11px; }

    .ib-shell { padding: 14px; }
    .ib-rail { margin-bottom: 18px; }

    /* "Bạn từng được hỏi câu nào chưa có ở đây?" is a contribution prompt, not
       what people came for — 142px of it sat between the reader and the first
       question. On a phone it goes after the list instead. */
    .ib-main { display: flex; flex-direction: column; }
    .ib-ask { order: 99; margin: 22px 0 0; }
    .ib-browse-h { font-size: 14px; margin: 14px 0 10px; padding-top: 14px; }
}