/* --- 10. Reading Guide (Ruler) --- */
#accessibility-reading-guide {
    position: fixed;
    left: 0;
    width: 100vw;
    height: 30px; /* Thickness of the guide */
    background-color: rgba(255, 235, 59, 0.25); /* Yellow highlight */
    border-top: 2px solid #F59E0B;
    border-bottom: 2px solid #F59E0B;
    pointer-events: none; /* Let clicks pass through */
    z-index: 2147483647;
    display: none; /* Hidden by default */
    transform: translateY(-50%);
    box-shadow: 0 0 100vh 100vw rgba(0, 0, 0, 0.4); /* Dim the rest of the screen */
}

body.acc-reading-guide-active #accessibility-reading-guide {
    display: block;
}

/* --- 11. Big Cursor --- */
body.acc-cursor-big, 
body.acc-cursor-big a, 
body.acc-cursor-big button, 
body.acc-cursor-big input,
body.acc-cursor-big select,
body.acc-cursor-big textarea,
body.acc-cursor-big [role="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;stroke:white;stroke-width:2px;"><path d="M0,0 L0,36 L8,26 L18,48 L24,44 L14,24 L30,24 Z"/></svg>'), auto !important;
}

/* --- 12. Text Spacing --- */
body.acc-spacing-wide {
    line-height: 2 !important;
    word-spacing: 0.16em !important;
}

body.acc-spacing-wide p, 
body.acc-spacing-wide li, 
body.acc-spacing-wide h1, 
body.acc-spacing-wide h2, 
body.acc-spacing-wide h3,
body.acc-spacing-wide h4,
body.acc-spacing-wide h5,
body.acc-spacing-wide h6,
body.acc-spacing-wide span,
body.acc-spacing-wide div {
    letter-spacing: 0.12em !important;
}

body.acc-spacing-wide p {
    margin-bottom: 2em !important;
}

/* --- 13. Bright High-Contrast --- */
body.bright-contrast {
    background: #FFFFFF !important;
    color: #000000 !important;
    filter: contrast(200%) brightness(1.1) !important;
}
body.bright-contrast * {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #000000 !important;
}
body.bright-contrast a {
    color: #0000CC !important;
    text-decoration: underline !important;
}
body.bright-contrast button,
body.bright-contrast .btn {
    background: #000 !important;
    color: #FFF !important;
    border: 2px solid #000 !important;
}

/* --- 14. Monochrome --- */
body.acc-monochrome {
    filter: grayscale(100%) !important;
}

/* --- 15. Highlight Links --- */
body.acc-highlight-links a,
body.acc-highlight-links [role="link"] {
    background-color: #FFF176 !important;
    color: #000 !important;
    text-decoration: underline !important;
    padding: 0 2px !important;
    border-radius: 2px !important;
    outline: 1px solid #F59E0B !important;
}

/* --- 16. Highlight Headers --- */
body.acc-highlight-headers h1,
body.acc-highlight-headers h2,
body.acc-highlight-headers h3,
body.acc-highlight-headers h4,
body.acc-highlight-headers h5,
body.acc-highlight-headers h6 {
    background-color: #DBEAFE !important;
    color: #1E40AF !important;
    padding: 4px 8px !important;
    border-left: 4px solid #3B82F6 !important;
    border-radius: 0 4px 4px 0 !important;
}

/* --- 17. Image Descriptions --- */
body.acc-image-descriptions .acc-img-caption {
    display: block !important;
    font-size: 11px !important;
    color: #475569 !important;
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    margin-top: 2px !important;
    font-style: italic !important;
}

/* --- 18. Cursor White Variant --- */
body.acc-cursor-big.acc-cursor-white,
body.acc-cursor-big.acc-cursor-white a,
body.acc-cursor-big.acc-cursor-white button,
body.acc-cursor-big.acc-cursor-white input,
body.acc-cursor-big.acc-cursor-white select,
body.acc-cursor-big.acc-cursor-white textarea,
body.acc-cursor-big.acc-cursor-white [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0,0 L0,36 L8,26 L18,48 L24,44 L14,24 L30,24 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E"), auto !important;
}

/* --- 19. Cursor Black Variant --- */
body.acc-cursor-big.acc-cursor-black,
body.acc-cursor-big.acc-cursor-black a,
body.acc-cursor-big.acc-cursor-black button,
body.acc-cursor-big.acc-cursor-black input,
/* =====================================================
   Global: Force all progress bars to fill with green
   Placed here (last stylesheet) to win cascade order.
   Uses `background` shorthand to override gradients.
   ===================================================== */

/* Bootstrap fill bar + all .bg-* colour helpers */
.progress-bar,
.progress-bar.bg-primary,
.progress-bar.bg-success,
.progress-bar.bg-info,
.progress-bar.bg-warning,
.progress-bar.bg-danger,
.progress-bar.bg-secondary,
.progress-bar.bg-dark {
    background: #28a745 !important;
}

/* Admin iq-progress-bar spans */
.iq-progress-bar > span {
    background: #28a745 !important;
}

/* design-system.css .progress-bar-fill uses a gradient — override it */
.progress-bar-fill {
    background: #28a745 !important;
}

/* study-skills pages custom container */
.progress-bar-container .progress-bar {
    background: #28a745 !important;
}

body.acc-cursor-big.acc-cursor-black select,
body.acc-cursor-big.acc-cursor-black textarea,
body.acc-cursor-big.acc-cursor-black [role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0,0 L0,36 L8,26 L18,48 L24,44 L14,24 L30,24 Z' fill='black' stroke='white' stroke-width='3'/%3E%3C/svg%3E"), auto !important;
}