/* ============================================================
   Q/A REPOSITORY — FRONTEND STYLES
   Design direction: "Examination Record"

   The visual language of an official GCE marking scheme and
   answer booklet, modernised for the web. Cool paper tones,
   a navy "seal" primary colour, gold/ochre accents that read
   as certification rather than decoration, and a signature
   "margin rule" on the detail panel — echoing the examiner's
   annotation margin on a real exam booklet.

   Subject identity colours mirror the way GCE past-paper
   booklet covers are colour-coded by subject.
   ============================================================ */

/* ── Web fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
.qa-repository-container {
    --qa-ink:          #1a2332;
    --qa-ink-soft:     #50607a;
    --qa-ink-faint:    #8a98ad;
    --qa-paper:        #EFF6FF;
    --qa-surface:      #ffffff;
    --qa-border:       #DCE7F5;
    --qa-border-soft:  #E8F0FC;

    --qa-primary:      #2563EB; /* may be overridden inline via admin settings */
    --qa-primary-soft: #DBEAFE;
    --qa-primary-dark: #1D4ED8;

    --qa-accent:       #DB9A0C;
    --qa-accent-soft:  #FDF3DC;

    --qa-success:      #16A34A;
    --qa-success-soft: #DCFCE7;
    --qa-danger:       #b3261e;
    --qa-danger-soft:  #fceceb;

    --qa-radius:    12px;
    --qa-radius-sm: 8px;
    --qa-radius-lg: 16px;

    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-family: var(--font-body);
    color: var(--qa-ink);
    -webkit-font-smoothing: antialiased;
}

.qa-repository-container * {
    box-sizing: border-box;
}

/* ============================================================
   DARK MODE
   Same semantic tokens, dark-appropriate values — every existing
   rule in this file already reads colour through var(--qa-*), so
   redefining them here on a more specific selector for the same
   element is the entire mechanism. Nothing else in this file
   needed to change for dark mode to work.
   ============================================================ */
.qa-repository-container[data-theme="dark"],
html[data-theme="dark"] .qa-repository-container {
    --qa-ink:          #E8ECF2;
    --qa-ink-soft:     #A8B4C7;
    --qa-ink-faint:    #6B7A94;
    --qa-paper:        #12181F;
    --qa-surface:      #1B232E;
    --qa-border:       #2C3846;
    --qa-border-soft:  #232D3A;

    --qa-primary:      #5B8DEF;
    --qa-primary-soft: #1E3A5C;
    --qa-primary-dark: #8FB4F5;

    --qa-accent:       #E0A428;
    --qa-accent-soft:  #3A2E14;

    --qa-success:      #3DAA6A;
    --qa-success-soft: #16301F;
    --qa-danger:       #E5564C;
    --qa-danger-soft:  #3A1613;
}

.qa-repository-container {
    background: var(--qa-paper);
    transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .qa-repository-container {
        transition: none;
    }
}

/* ============================================================
   THEME TOGGLE — a genuine switch, not an icon button. A pill
   track with a sliding thumb is the shape people actually
   recognise as "this is a toggle," which a plain icon circle
   doesn't communicate on its own.
   ============================================================ */
.qa-theme-toggle {
    position: absolute;
    top: 2px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    width: 44px;
    height: 24px;
    padding: 3px;
    border: 1.5px solid var(--qa-border);
    background: var(--qa-surface);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.qa-theme-toggle[aria-pressed="true"] {
    background: var(--qa-primary);
    border-color: var(--qa-primary);
}

.qa-theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 1;
    background: var(--qa-ink-faint);
    color: var(--qa-surface);
    border-radius: 50%;
    transform: translateX(0);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.qa-theme-toggle[aria-pressed="true"] .qa-theme-toggle-icon {
    background: var(--qa-surface);
    color: var(--qa-primary);
    transform: translateX(20px);
}

.qa-theme-toggle:hover {
    border-color: var(--qa-primary);
}

.qa-theme-toggle:focus-visible {
    outline: 2px solid var(--qa-primary);
    outline-offset: 2px;
}

/* ============================================================
   TRUST HEADER
   ============================================================ */
.qa-trust-header {
    position: relative;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 32px;
    padding: 0 12px;
}

.qa-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--qa-success);
    background: var(--qa-success-soft);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.qa-trust-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--qa-ink);
    margin: 0 0 10px;
}

.qa-trust-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--qa-ink-soft);
    margin: 0;
}

/* ── Hero decorative flourishes ──────────────────────────────
   Purely decorative (aria-hidden), soft/low-opacity, positioned
   to flank the headline without competing with it. currentColor
   so they automatically pick up dark mode via the same --qa-*
   system as everything else — no separate dark-mode rule needed. */
.qa-hero-deco {
    position: absolute;
    top: 8px;
    opacity: 0.4;
    pointer-events: none;
}

.qa-hero-deco-left {
    left: -8px;
}

.qa-hero-deco-right {
    right: -12px;
    top: 20px;
}

@media (max-width: 760px) {
    .qa-hero-deco {
        display: none;
    }
}

/* ============================================================
   SEARCH SECTION
   ============================================================ */
.qa-search-section {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(26, 35, 50, 0.04), 0 8px 24px rgba(26, 35, 50, 0.04);
}

.qa-search-box {
    margin-bottom: 16px;
}

.qa-search-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--qa-ink-faint);
    margin-bottom: 8px;
}

/* Auto-expanding textarea search input.
   JS (frontend-scripts.js) grows the height as the student types;
   CSS provides sensible min/max so it behaves before JS loads. */
.qa-search-input {
    width: 100%;
    min-height: 64px;
    max-height: 240px;
    resize: vertical;
    padding: 16px 18px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--qa-ink);
    border: 1.5px solid var(--qa-border);
    border-radius: var(--qa-radius);
    background: var(--qa-paper);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.qa-search-input::placeholder {
    color: var(--qa-ink-faint);
}

.qa-search-input:focus {
    outline: none;
    border-color: var(--qa-primary);
    background: var(--qa-surface);
    box-shadow: 0 0 0 4px var(--qa-primary-soft);
}

.qa-search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
}

.qa-char-count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--qa-ink-faint);
}

.qa-char-count.qa-char-warn {
    color: var(--qa-accent);
}

.qa-char-count.qa-char-limit {
    color: var(--qa-danger);
}

/* Diagram toggle button — styled like a small certification stamp */
.qa-diagram-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qa-surface);
    border: 1.5px dashed var(--qa-border);
    color: var(--qa-ink-soft);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-diagram-toggle:hover {
    border-color: var(--qa-primary);
    color: var(--qa-primary);
    background: var(--qa-primary-soft);
}

.qa-diagram-toggle[aria-expanded="true"] {
    border-style: solid;
    border-color: var(--qa-primary);
    color: var(--qa-primary);
    background: var(--qa-primary-soft);
}

.qa-diagram-toggle-icon {
    font-size: 14px;
    line-height: 1;
}

/* ============================================================
   SCAN A PHOTO (OCR)
   ============================================================ */
.qa-scan-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qa-surface);
    border: 1.5px dashed var(--qa-border);
    color: var(--qa-ink-soft);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-scan-photo-btn:hover {
    border-color: var(--qa-primary);
    color: var(--qa-primary);
    background: var(--qa-primary-soft);
}

.qa-scan-photo-icon {
    font-size: 14px;
    line-height: 1;
}

.qa-scan-photo-status {
    width: 100%;
    margin-top: 8px;
    font-size: 12px;
    color: var(--qa-ink-soft);
}

.qa-scan-photo-status.qa-scan-photo-error {
    color: #b3261e;
}

/* ============================================================
   DIAGRAM QUERY BUILDER
   ============================================================ */
.qa-diagram-builder {
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--qa-paper);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius);
    animation: qa-slide-down 0.25s ease;
}

@keyframes qa-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qa-diagram-builder-header h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--qa-ink);
}

.qa-diagram-builder-header p {
    font-size: 13px;
    color: var(--qa-ink-soft);
    line-height: 1.55;
    margin: 0 0 16px;
}

.qa-diagram-group {
    border-top: 1px solid var(--qa-border-soft);
    padding-top: 16px;
    margin-top: 4px;
}

.qa-diagram-group.qa-diagram-generic {
    border-top: 1px solid var(--qa-border-soft);
}

.qa-diagram-field {
    margin-bottom: 14px;
}

.qa-diagram-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--qa-ink);
    margin-bottom: 6px;
}

.qa-diagram-select,
.qa-diagram-text,
.qa-diagram-text-small {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--qa-ink);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-sm);
    background: var(--qa-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qa-diagram-select:focus,
.qa-diagram-text:focus,
.qa-diagram-text-small:focus {
    outline: none;
    border-color: var(--qa-primary);
    box-shadow: 0 0 0 3px var(--qa-primary-soft);
}

.qa-diagram-generic-description {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}

.qa-diagram-text-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.qa-diagram-text-small {
    font-family: var(--font-mono);
    font-size: 13px;
}

/* Checkbox / radio groups — "tick the labels you see" style,
   styled as tag-like toggle chips */
.qa-diagram-checkbox-group,
.qa-diagram-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qa-diagram-checkbox,
.qa-diagram-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--qa-ink-soft);
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.qa-diagram-checkbox:hover,
.qa-diagram-radio:hover {
    border-color: var(--qa-primary);
    color: var(--qa-primary);
}

.qa-diagram-checkbox input,
.qa-diagram-radio input {
    accent-color: var(--qa-primary);
    margin: 0;
    width: 14px;
    height: 14px;
}

.qa-diagram-checkbox:has(input:checked),
.qa-diagram-radio:has(input:checked) {
    background: var(--qa-primary);
    border-color: var(--qa-primary);
    color: #fff;
}

.qa-diagram-find {
    border-left: 3px solid var(--qa-accent) !important;
}

.qa-diagram-hint {
    font-size: 12px;
    color: var(--qa-ink-faint);
    font-style: italic;
    margin: 8px 0 0;
}

.qa-diagram-builder-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--qa-border-soft);
}

.qa-diagram-clear {
    background: none;
    border: none;
    color: var(--qa-ink-faint);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

.qa-diagram-clear:hover {
    color: var(--qa-danger);
}

.qa-diagram-status {
    font-size: 12px;
    color: var(--qa-success);
    font-weight: 500;
}

/* ============================================================
   FILTERS BAR
   ============================================================ */
.qa-filters-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--qa-border-soft);
}

.qa-filter-group {
    display: flex;
    flex-direction: column;
}

.qa-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--qa-ink-faint);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qa-filter-label::before {
    font-size: 12px;
    line-height: 1;
}

.qa-filter-label-year::before    { content: '\1F4C5'; } /* calendar */
.qa-filter-label-subject::before { content: '\1F4D6'; } /* open book */
.qa-filter-label-topic::before   { content: '\1F3F7\FE0F'; } /* tag */

.qa-filter-select {
    padding: 10px 12px;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--qa-ink);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-sm);
    background: var(--qa-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2350607a' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.qa-filter-select:focus {
    outline: none;
    border-color: var(--qa-primary);
    box-shadow: 0 0 0 3px var(--qa-primary-soft);
}

.qa-filter-select:disabled {
    background-color: var(--qa-border-soft);
    color: var(--qa-ink-faint);
    cursor: not-allowed;
}

.qa-filter-buttons {
    display: flex;
    gap: 10px;
}

.qa-apply-filters,
.qa-clear-filters {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--qa-radius-sm);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qa-apply-filters {
    background: var(--qa-primary);
    color: #fff;
}

.qa-apply-filters:hover {
    background: var(--qa-primary-dark);
}

.qa-clear-filters {
    background: var(--qa-surface);
    border-color: var(--qa-border);
    color: var(--qa-ink-soft);
}

.qa-clear-filters:hover {
    border-color: var(--qa-ink-faint);
    color: var(--qa-ink);
}

.qa-filter-icon {
    font-size: 15px;
}

/* Active filter chips */
.qa-active-filters {
    margin-top: 12px;
}

.qa-active-filters:empty {
    display: none;
}

.qa-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qa-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qa-primary-soft);
    color: var(--qa-primary);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    line-height: 1.3;
}

.qa-filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(31, 58, 99, 0.12);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background 0.15s ease;
}

.qa-filter-tag-remove:hover {
    background: var(--qa-primary);
    color: #fff;
}

/* Mobile filters toggle (hidden on desktop) */
.qa-mobile-filters-toggle {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    background: var(--qa-paper);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--qa-ink-soft);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ============================================================
   RESULTS SUMMARY
   ============================================================ */
.qa-results-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.qa-count-number {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--qa-primary);
    margin-right: 6px;
}

.qa-count-label {
    font-size: 13px;
    color: var(--qa-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.qa-loading-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--qa-ink-faint);
}

.qa-loading-indicator .qa-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--qa-border);
    border-top: 2px solid var(--qa-primary);
    border-radius: 50%;
    animation: qa-spin 0.8s linear infinite;
}

/* ============================================================
   SPLIT VIEW LAYOUT
   ============================================================ */
.qa-split-view {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

/* ── Questions list panel ──────────────────────────────────── */
.qa-questions-panel {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(26, 35, 50, 0.04);
    position: sticky;
    top: 20px;
}

.qa-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--qa-border-soft);
    background: var(--qa-paper);
}

.qa-list-header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--qa-ink);
}

.qa-refresh-list {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--qa-ink-faint);
    padding: 4px 6px;
    border-radius: var(--qa-radius-sm);
    transition: all 0.3s ease;
}

.qa-refresh-list:hover {
    color: var(--qa-primary);
    transform: rotate(180deg);
    background: var(--qa-primary-soft);
}

.qa-questions-list {
    max-height: 640px;
    overflow-y: auto;
}

/* Question list item — left edge carries the subject colour,
   echoing the colour-coded spine of a GCE past-paper booklet */
.qa-question-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 14px 14px;
    border-bottom: 1px solid var(--qa-border-soft);
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-left-color 0.15s ease;
}

.qa-question-item:hover {
    background: var(--qa-paper);
}

.qa-question-item.active {
    background: var(--qa-primary-soft);
    border-left-color: var(--qa-primary);
}

.qa-question-item.active .qa-question-title {
    color: var(--qa-primary);
}

/* Subject colour dot */
.qa-question-subject-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--qa-question-subject-color, var(--qa-ink-faint));
}

.qa-question-body {
    flex: 1;
    min-width: 0;
}

.qa-question-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--qa-ink);
    margin: 0 0 5px;
    line-height: 1.45;
}

.qa-question-excerpt {
    font-size: 13px;
    color: var(--qa-ink-soft);
    margin: 0 0 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qa-question-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.qa-has-image-icon {
    font-size: 13px;
}

.qa-topic-tag,
.qa-multipart-tag {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qa-topic-tag {
    background: var(--qa-border-soft);
    color: var(--qa-ink-soft);
}

.qa-multipart-tag {
    background: var(--qa-accent-soft);
    color: var(--qa-accent);
}

/* ── Detail panel ───────────────────────────────────────────── */
.qa-detail-panel {
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius-lg);
    box-shadow: 0 1px 2px rgba(26, 35, 50, 0.04);
    position: relative;
    min-height: 480px;
    overflow: hidden;
}

/* ============================================================
   TRUST BADGES
   ============================================================ */
.qa-trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
    padding: 20px;
    background: var(--qa-paper);
    border-radius: var(--qa-radius-lg);
}

.qa-trust-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.qa-trust-badge-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.3;
}

.qa-trust-badge strong {
    display: block;
    font-size: 13px;
    color: var(--qa-ink);
    margin-bottom: 2px;
}

.qa-trust-badge span {
    display: block;
    font-size: 12px;
    color: var(--qa-ink-soft);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .qa-trust-badges {
        grid-template-columns: 1fr;
    }
}

/* SIGNATURE ELEMENT — the examiner's margin rule.
   A 28px reserved strip on the left of the answer area with a
   vertical hairline, echoing the annotation margin printed on
   real GCE exam booklets. Confidence / source badges anchor here. */
.qa-margin-rule {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 28px;
    border-right: 1px solid var(--qa-border-soft);
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 39px,
            var(--qa-border-soft) 39px,
            var(--qa-border-soft) 40px
        );
    display: none; /* shown only when content is loaded, via JS adding .qa-has-content */
}

.qa-detail-panel.qa-has-content .qa-margin-rule {
    display: block;
}

.qa-detail-content {
    padding: 28px 30px 30px;
}

.qa-detail-panel.qa-has-content .qa-detail-content {
    padding-left: 50px;
}

/* ── Detail header ──────────────────────────────────────────── */
.qa-detail-header {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--qa-border-soft);
}

.qa-detail-subject-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
    color: #fff;
    background: var(--qa-question-subject-color, var(--qa-primary));
}

.qa-detail-title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--qa-ink);
    margin: 0 0 12px;
}

.qa-detail-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--qa-ink-faint);
}

.qa-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.qa-meta-item strong {
    color: var(--qa-ink-soft);
    font-weight: 600;
}

/* ── Multi-part breadcrumb / tabs ───────────────────────────── */
.qa-parts-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 4px;
    background: var(--qa-paper);
    border-radius: var(--qa-radius);
    border: 1px solid var(--qa-border-soft);
}

.qa-parts-nav-item {
    flex: 1;
    min-width: 64px;
    text-align: center;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--qa-ink-soft);
    border-radius: var(--qa-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    font-family: var(--font-mono);
}

.qa-parts-nav-item:hover {
    background: var(--qa-surface);
    color: var(--qa-primary);
}

.qa-parts-nav-item.active {
    background: var(--qa-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(26, 35, 50, 0.15);
}

.qa-parts-nav-item .qa-parts-nav-check {
    display: none;
}

.qa-parts-nav-item.active .qa-parts-nav-check {
    display: inline;
    margin-left: 4px;
}

/* Context note when viewing a part that depends on a previous part */
.qa-part-context-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--qa-accent-soft);
    border: 1px solid rgba(200, 134, 10, 0.25);
    border-radius: var(--qa-radius);
    padding: 12px 14px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #8a5d05;
    line-height: 1.55;
}

.qa-part-context-note .qa-context-icon {
    flex-shrink: 0;
    font-size: 16px;
}

/* ── Question / Answer content ─────────────────────────────── */
.qa-question-content {
    background: var(--qa-paper);
    border: 1px solid var(--qa-border-soft);
    border-radius: var(--qa-radius);
    padding: 18px 20px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--qa-ink);
}

/* KaTeX's own rendered output doesn't hardcode a text color by
   default -- it inherits from its surrounding element, so this is
   defensive reinforcement (guarding against content that happens to
   use an explicit \color{} command) rather than a fix for a known
   issue. Deliberately does NOT touch anything else about KaTeX's
   output -- positioning-critical inline styles KaTeX sets for
   correct glyph alignment are left completely alone; only color is
   touched, and only on the outer wrapper, not forced onto every
   descendant the way the Notes page's readability fix does (that
   one exists to counter raw pasted HTML with baked-in inline
   styles, which KaTeX's own generated markup never does). */
.qa-question-content .katex,
.qa-answer-text .katex {
    color: inherit;
}

.qa-answer-section {
    margin-top: 8px;
}

.qa-answer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--qa-ink);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--qa-accent);
}

/* Confidence / source badge — honest but unobtrusive.
   Only ever says "Suggested Answer" for AI content — never "AI". */
.qa-source-badge {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--qa-success-soft);
    color: var(--qa-success);
    border: 1px solid rgba(21, 128, 61, 0.18);
}

.qa-source-badge.qa-source-suggested {
    background: var(--qa-accent-soft);
    color: var(--qa-accent);
    border-color: rgba(200, 134, 10, 0.22);
}

.qa-answer-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--qa-ink);
}

/* The part of a multi-part answer that actually matched the
   student's search — see QA_Part_Highlighter. Uses the existing
   accent colour rather than introducing a new one, and runs
   entirely through --qa-* variables so dark mode is automatic. */
.qa-highlight-part {
    background: var(--qa-accent-soft);
    box-shadow: 0 0 0 3px var(--qa-accent-soft);
    border-left: 3px solid var(--qa-accent);
    border-radius: 4px;
    padding: 2px 4px 2px 8px;
    display: inline;
}

.qa-answer-text p {
    margin: 0 0 14px;
}

.qa-answer-text ul,
.qa-answer-text ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.qa-answer-text li {
    margin-bottom: 6px;
}

.qa-answer-text h4 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin: 18px 0 8px;
}

.qa-answer-text code {
    font-family: var(--font-mono);
    background: var(--qa-paper);
    border: 1px solid var(--qa-border-soft);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 13px;
}

.qa-answer-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 14px;
}

.qa-answer-text th,
.qa-answer-text td {
    border: 1px solid var(--qa-border);
    padding: 8px 10px;
    text-align: left;
}

.qa-answer-text th {
    background: var(--qa-paper);
    font-weight: 600;
}

/* ── Image display ──────────────────────────────────────────── */
.qa-answer-image {
    margin-top: 22px;
    text-align: center;
}

.qa-image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 10px;
    border-radius: var(--qa-radius);
    overflow: hidden;
}

.qa-image-container img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--qa-border);
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}

.qa-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(26,35,50,0.78), transparent);
    color: #fff;
    padding: 10px 14px 8px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

.qa-view-only-notice {
    font-size: 12px;
    color: var(--qa-ink-faint);
    font-style: italic;
}

/* ── Navigation ─────────────────────────────────────────────── */
.qa-detail-navigation {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--qa-border-soft);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.qa-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--qa-paper);
    border: 1px solid var(--qa-border);
    padding: 10px 18px;
    border-radius: var(--qa-radius-sm);
    color: var(--qa-ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-nav-button:hover:not(:disabled) {
    background: var(--qa-primary-soft);
    border-color: var(--qa-primary);
    color: var(--qa-primary);
}

.qa-nav-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   LOADING / EMPTY / NO-RESULTS STATES
   ============================================================ */
.qa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--qa-ink-faint);
    gap: 14px;
    text-align: center;
    padding: 30px 20px;
}

.qa-loading p {
    font-size: 13.5px;
    margin: 0;
}

.qa-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--qa-border-soft);
    border-top: 3px solid var(--qa-primary);
    border-radius: 50%;
    animation: qa-spin 0.9s linear infinite;
}

@keyframes qa-spin {
    to { transform: rotate(360deg); }
}

.qa-no-results,
.qa-empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--qa-ink-soft);
}

.qa-no-results-icon,
.qa-empty-icon {
    font-size: 44px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.qa-no-results h3,
.qa-empty-state h3 {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--qa-ink);
    margin: 0 0 8px;
}

.qa-no-results p,
.qa-empty-state p {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto;
}

.qa-empty-tip {
    margin: 22px auto 0;
    max-width: 380px;
    padding: 14px 16px;
    background: var(--qa-primary-soft);
    border-radius: var(--qa-radius);
    color: var(--qa-ink-soft);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.qa-empty-tip strong {
    color: var(--qa-primary);
}

/* ============================================================
   AI "SUGGESTED ANSWER" NOTE
   ============================================================ */
.qa-suggested-note {
    margin-top: 22px;
    padding: 12px 14px;
    background: var(--qa-paper);
    border-left: 3px solid var(--qa-accent);
    border-radius: 0 var(--qa-radius-sm) var(--qa-radius-sm) 0;
    font-size: 12.5px;
    color: var(--qa-ink-faint);
    font-style: italic;
    line-height: 1.6;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .qa-split-view {
        grid-template-columns: 320px 1fr;
    }
}

@media (max-width: 992px) {
    .qa-split-view {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .qa-questions-panel {
        position: static;
        max-height: none;
    }

    .qa-questions-list {
        max-height: 380px;
    }

    .qa-detail-panel {
        min-height: 320px;
    }

    .qa-trust-title {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .qa-repository-container {
        padding: 16px 14px 48px;
    }

    .qa-search-section {
        padding: 16px;
    }

    .qa-trust-title {
        font-size: 22px;
    }

    .qa-trust-sub {
        font-size: 14px;
    }

    .qa-filters-bar {
        display: none;
        grid-template-columns: 1fr 1fr;
    }

    .qa-filters-bar.qa-filters-visible {
        display: grid;
    }

    .qa-filter-buttons {
        grid-column: 1 / -1;
    }

    .qa-mobile-filters-toggle {
        display: flex;
    }

    .qa-detail-content {
        padding: 20px 18px;
    }

    .qa-detail-panel.qa-has-content .qa-detail-content {
        padding-left: 36px;
    }

    .qa-margin-rule {
        width: 18px;
    }

    .qa-detail-title {
        font-size: 19px;
    }

    .qa-answer-label {
        font-size: 15px;
    }

    .qa-parts-nav-item {
        font-size: 12px;
        padding: 8px 8px;
    }

    .qa-results-summary {
        margin-bottom: 12px;
    }

    .qa-diagram-text-group {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .qa-trust-header {
        margin-bottom: 22px;
    }

    .qa-eyebrow {
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .qa-search-input {
        font-size: 15px;
        padding: 13px 14px;
    }

    .qa-diagram-checkbox,
    .qa-diagram-radio {
        font-size: 12px;
        padding: 5px 10px;
    }

    .qa-filters-bar.qa-filters-visible {
        grid-template-columns: 1fr;
    }

    .qa-diagram-text-group {
        grid-template-columns: 1fr;
    }

    .qa-detail-navigation {
        flex-direction: column;
    }

    .qa-nav-button {
        justify-content: center;
        width: 100%;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .qa-trust-header,
    .qa-search-section,
    .qa-results-summary,
    .qa-questions-panel,
    .qa-detail-navigation,
    .qa-image-overlay,
    .qa-mobile-filters-toggle,
    .qa-margin-rule {
        display: none !important;
    }

    .qa-split-view {
        display: block;
    }

    .qa-detail-panel {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .qa-detail-panel.qa-has-content .qa-detail-content {
        padding-left: 0 !important;
    }

    .qa-image-container img {
        max-width: 80% !important;
        box-shadow: none !important;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .qa-diagram-builder,
    .qa-loading-spinner,
    .qa-spinner,
    .qa-refresh-list {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   FOCUS VISIBILITY (ACCESSIBILITY)
   ============================================================ */
.qa-repository-container a:focus-visible,
.qa-repository-container button:focus-visible,
.qa-repository-container input:focus-visible,
.qa-repository-container select:focus-visible,
.qa-repository-container textarea:focus-visible,
.qa-question-item:focus-visible {
    outline: 2px solid var(--qa-primary);
    outline-offset: 2px;
}

/* ============================================================
   LIGHTBOX (global — rendered outside .qa-repository-container)

   Added in Batch 7 alongside lightbox.js's multi-image
   navigation. Tokens are redeclared here in :root-equivalent
   form since the lightbox lives outside the scoped container
   and cannot read --qa-* custom properties from it.
   ============================================================ */
.qa-lightbox {
    --lb-ink:     #1a2332;
    --lb-primary: #1f3a63;
    --lb-accent:  #c8860a;
    --lb-surface: #ffffff;
    --lb-border:  #dfe3e8;

    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.qa-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 30, 0.86);
}

.qa-lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.qa-lightbox-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    color: #fff;
}

.qa-lightbox-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.qa-lightbox-counter {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.12);
    padding: 3px 10px;
    border-radius: 999px;
}

.qa-lightbox-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.qa-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.qa-lightbox-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.qa-lightbox-image-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}

.qa-lightbox-image {
    max-width: 90%;
    max-height: 85%;
    object-fit: contain;
    cursor: grab;
    transition: transform 0.15s ease;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 4px;
}

/* Prev / Next navigation for multi-image groups */
.qa-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 2;
}

.qa-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

.qa-lightbox-prev { left: 16px; }
.qa-lightbox-next { right: 16px; }

@media (max-width: 600px) {
    .qa-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
    .qa-lightbox-prev { left: 6px; }
    .qa-lightbox-next { right: 6px; }
}

/* Zoom controls */
.qa-lightbox-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.qa-lightbox-controls button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.qa-lightbox-controls button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}

.qa-lightbox-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qa-lightbox-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12.5px;
}

@media (max-width: 600px) {
    .qa-lightbox-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================
   SUGGESTED-ANSWER ENRICHMENT
   (ai-invisible.js, Batch 7 — feedback control & study note)
   ============================================================ */
.qa-ai-double-check {
    display: block;
    margin-top: 6px;
}

.qa-ai-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--qa-border-soft);
    font-size: 13px;
    color: var(--qa-ink-soft);
}

.qa-ai-feedback-prompt {
    font-weight: 600;
    color: var(--qa-ink);
}

.qa-ai-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qa-ink-soft);
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.qa-ai-feedback-btn:hover {
    border-color: var(--qa-primary);
    color: var(--qa-primary);
    background: var(--qa-primary-soft);
}

.qa-ai-feedback-thanks {
    font-size: 13px;
    color: var(--qa-success);
    font-weight: 500;
}


/* Structured educational visualizations */
.qa-structured-visualization{margin:18px 0;padding:12px 0;border-top:1px solid rgba(31,58,99,.12);border-bottom:1px solid rgba(31,58,99,.12)}
.qa-structured-visualization-heading{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;opacity:.72}
.qa-visualization-canvas{width:100%;overflow:auto;text-align:center}
.qa-visualization-canvas svg{display:block;max-width:100%;height:auto;margin:0 auto}
.qa-vis-error{padding:10px;border:1px solid #d9a7a7;border-radius:5px;background:#fff7f7;color:#8a1c1c;text-align:left}

/* Structured educational visualizations */
.qa-structured-visualization{margin:18px 0;padding:12px 0;border-top:1px solid rgba(31,58,99,.12);border-bottom:1px solid rgba(31,58,99,.12)}
.qa-structured-visualization-heading{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;opacity:.72}
.qa-visualization-canvas{width:100%;overflow:auto;text-align:center}
.qa-visualization-canvas svg{display:block;max-width:100%;height:auto;margin:0 auto}
.qa-vis-error{padding:10px;border:1px solid #d9a7a7;border-radius:5px;background:#fff7f7;color:#8a1c1c;text-align:left}