/* ==========================================================================
   MOL-GOD W42 References Quality Filter — Enhancement Stylesheet
   Layered on top of inline PHP CSS (window.__molgodBiblioCSS) and
   extended-bibliography.css. Adds: mobile, print, a11y, dark mode, polish.
   Scope: .molgod-extended-bibliography[data-mg-biblio="extended"]
   ========================================================================== */

/* 1. CSS Variables — tier colors + tokens (low-specificity, overridable) */
.molgod-extended-bibliography {
    --molgod-tier-1: #0ea5e9;   /* molecule (primary)        */
    --molgod-tier-2: #10b981;   /* methodology (supporting)  */
    --molgod-tier-3: #8b5cf6;   /* further reading           */
    --molgod-tier-4: #f59e0b;   /* reject / review needed    */
    --molgod-focus-ring: #2563eb;
    --molgod-transition: 200ms ease;
}

/* 2. Tier visual cues — header pills + item left-border */
.molgod-biblio-tier-header {
    list-style: none;
    margin: 14px 0 8px -22px;        /* compensate <ol> indent */
    padding: 6px 10px;
    font-weight: 700;
    font-size: 13px;
    border-radius: 4px;
    color: #fff;
    animation: molgod-fade-in 240ms ease-out;
}
.molgod-biblio-tier-header.tier-molecule        { background: var(--molgod-tier-1); }
.molgod-biblio-tier-header.tier-methodology     { background: var(--molgod-tier-2); }
.molgod-biblio-tier-header.tier-further_reading { background: var(--molgod-tier-3); }
.molgod-biblio-tier-header.tier-reject          { background: var(--molgod-tier-4); }

.molgod-biblio-item[data-tier="molecule"]        { box-shadow: inset 2px 0 0 var(--molgod-tier-1); }
.molgod-biblio-item[data-tier="methodology"]     { box-shadow: inset 2px 0 0 var(--molgod-tier-2); }
.molgod-biblio-item[data-tier="further_reading"] { box-shadow: inset 2px 0 0 var(--molgod-tier-3); }
.molgod-biblio-item[data-tier="reject"]          { box-shadow: inset 2px 0 0 var(--molgod-tier-4); opacity: 0.78; }

/* Hide rejected when toggle off (data attr toggled by JS) */
.molgod-extended-bibliography[data-hide-rejected="1"] .molgod-biblio-item[data-tier="reject"],
.molgod-extended-bibliography[data-hide-rejected="1"] .molgod-biblio-tier-header.tier-reject {
    display: none;
}

/* 3. Filter buttons — smooth transitions, pressed-state colors */
.molgod-bf {
    transition: background var(--molgod-transition),
                color var(--molgod-transition),
                border-color var(--molgod-transition),
                transform var(--molgod-transition);
}
.molgod-bf:hover { transform: translateY(-1px); }
.molgod-bf[aria-pressed="true"] { font-weight: 700; }
.molgod-bf-tier.tier-molecule[aria-pressed="true"]        { background: var(--molgod-tier-1); color: #fff; }
.molgod-bf-tier.tier-methodology[aria-pressed="true"]     { background: var(--molgod-tier-2); color: #fff; }
.molgod-bf-tier.tier-further_reading[aria-pressed="true"] { background: var(--molgod-tier-3); color: #fff; }
.molgod-bf-tier-warn[aria-pressed="true"]                 { background: var(--molgod-tier-4); color: #fff; }

/* 4. Async classifier loading state — spinner */
.molgod-extended-bibliography[data-classifying="1"] .molgod-biblio-list {
    position: relative;
    min-height: 60px;
}
.molgod-extended-bibliography[data-classifying="1"] .molgod-biblio-list::after {
    content: "";
    position: absolute; top: 12px; right: 12px;
    width: 18px; height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--molgod-focus-ring);
    border-radius: 50%;
    animation: molgod-spin 800ms linear infinite;
}

/* 5. Screen-reader-only utility */
.molgod-extended-bibliography .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 6. Keyframes */
@keyframes molgod-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes molgod-spin { to { transform: rotate(360deg); } }

/* 7. Mobile responsive (<= 768px) — touch-friendly, mobile-first overrides */
@media (max-width: 768px) {
    .molgod-extended-bibliography { font-size: 14px; padding: 12px 10px; }
    .molgod-extended-bibliography .molgod-biblio-title {
        display: block; width: 100%; font-size: 17px; text-align: left;
    }
    .molgod-biblio-filters {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    .molgod-bf,
    .molgod-bf-tier,
    .molgod-bf-tier-warn,
    .molgod-biblio-toggle-rejected {
        min-height: 44px;          /* WCAG 2.5.5 touch target */
        padding: 10px 14px;
        font-size: 14px;
        flex-shrink: 0;
    }
    .molgod-biblio-toggle-rejected { display: block; width: 100%; margin-top: 8px; }
    .molgod-biblio-tier-header     { margin-left: -16px; font-size: 14px; }
    .molgod-extended-bibliography .molgod-biblio-list { padding-left: 18px; }
    .molgod-extended-bibliography .molgod-biblio-item { padding: 8px 6px; word-break: break-word; }
}

/* 8. Print stylesheet — readable B&W output, all refs visible */
@media print {
    .molgod-extended-bibliography {
        background: #fff !important;
        border: 1px solid #000 !important;
        color: #000 !important;
        font-size: 11pt;
        page-break-inside: auto;
    }
    .molgod-biblio-filters,
    .molgod-biblio-toggle-rejected,
    .molgod-bf,
    .molgod-bf-tier,
    .molgod-bf-tier-warn,
    .molgod-biblio-sort,
    .molgod-biblio-copy { display: none !important; }
    /* Force-show all items regardless of toggle state */
    .molgod-extended-bibliography[data-hide-rejected="1"] .molgod-biblio-item[data-tier="reject"],
    .molgod-extended-bibliography[data-hide-rejected="1"] .molgod-biblio-tier-header.tier-reject {
        display: list-item !important;
    }
    .molgod-biblio-tier-header {
        display: block;
        background: transparent !important;
        color: #000 !important;
        font-size: 12pt;
        font-weight: 700;
        margin: 10pt 0 4pt 0;
        padding: 0;
        border-bottom: 1px solid #000;
        page-break-after: avoid;
    }
    .molgod-extended-bibliography .molgod-biblio-list { list-style: decimal; padding-left: 24pt; }
    .molgod-biblio-item {
        box-shadow: none !important;
        opacity: 1 !important;
        page-break-inside: avoid;
        color: #000 !important;
    }
    .molgod-biblio-source-badge {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000;
    }
    .molgod-biblio-url { color: #000 !important; text-decoration: underline; }
}

/* 9. Accessibility — focus rings, high contrast, reduced motion */
.molgod-extended-bibliography :focus-visible {
    outline: 3px solid var(--molgod-focus-ring);
    outline-offset: 2px;
    border-radius: 3px;
}
@media (prefers-contrast: more) {
    .molgod-extended-bibliography { border-width: 2px; border-color: #000; }
    .molgod-biblio-tier-header { color: #fff; outline: 2px solid #000; }
    .molgod-biblio-item        { border-left-width: 4px !important; }
    .molgod-bf                 { border: 2px solid #000; }
}
@media (prefers-reduced-motion: reduce) {
    .molgod-extended-bibliography *,
    .molgod-extended-bibliography *::before,
    .molgod-extended-bibliography *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 10. Dark mode — auto-adapt to system preference */
@media (prefers-color-scheme: dark) {
    .molgod-extended-bibliography {
        background: #0f172a;
        border-color: #1e293b;
        color: #e2e8f0;
    }
    .molgod-extended-bibliography .molgod-biblio-title {
        color: #f1f5f9;
        border-bottom-color: #334155;
    }
    .molgod-extended-bibliography .molgod-biblio-note,
    .molgod-extended-bibliography .molgod-biblio-count { color: #94a3b8; }
    .molgod-extended-bibliography .molgod-biblio-item:hover { background: #1e293b; }
    .molgod-bf { background: #1e293b; color: #e2e8f0; border-color: #334155; }
    .molgod-bf:hover { background: #334155; }
    .molgod-extended-bibliography .molgod-biblio-url { color: #93c5fd; }
    .molgod-extended-bibliography .molgod-biblio-url:hover { color: #bfdbfe; }
}