/* ─── Accessibility: font size scaling ────────────────────────
           Scales the root font size so all rem-based elements grow.
           Also overrides Bootstrap utility classes and hardcoded sizes. */

        html { font-size: 12px; }
        html.acc-font-large  { font-size: 15px; }   /* ~106% */
        html.acc-font-xlarge { font-size: 18px; }   /* ~118% */

        /* Bootstrap font-size utilities — scale with root */
        html.acc-font-large .fs-1, html.acc-font-xlarge .fs-1 { font-size: 2.5rem !important; }
        html.acc-font-large .fs-2, html.acc-font-xlarge .fs-2 { font-size: 2rem !important; }
        html.acc-font-large .fs-3, html.acc-font-xlarge .fs-3 { font-size: 1.75rem !important; }
        html.acc-font-large .fs-4, html.acc-font-xlarge .fs-4 { font-size: 1.5rem !important; }
        html.acc-font-large .fs-5, html.acc-font-xlarge .fs-5 { font-size: 1.25rem !important; }
        html.acc-font-large .fs-6, html.acc-font-xlarge .fs-6 { font-size: 1rem !important; }

        /* Bootstrap display classes */
        html.acc-font-large .display-1, html.acc-font-xlarge .display-1 { font-size: 5rem !important; }
        html.acc-font-large .display-2, html.acc-font-xlarge .display-2 { font-size: 4.5rem !important; }
        html.acc-font-large .display-3, html.acc-font-xlarge .display-3 { font-size: 4rem !important; }
        html.acc-font-large .display-4, html.acc-font-xlarge .display-4 { font-size: 3.5rem !important; }
        html.acc-font-large .display-5, html.acc-font-xlarge .display-5 { font-size: 3rem !important; }
        html.acc-font-large .display-6, html.acc-font-xlarge .display-6 { font-size: 2.5rem !important; }

        /* Headings */
        html.acc-font-large h1, html.acc-font-xlarge h1 { font-size: 2.5rem !important; }
        html.acc-font-large h2, html.acc-font-xlarge h2 { font-size: 2rem !important; }
        html.acc-font-large h3, html.acc-font-xlarge h3 { font-size: 1.75rem !important; }
        html.acc-font-large h4, html.acc-font-xlarge h4 { font-size: 1.5rem !important; }
        html.acc-font-large h5, html.acc-font-xlarge h5 { font-size: 1.25rem !important; }
        html.acc-font-large h6, html.acc-font-xlarge h6 { font-size: 1.1rem !important; }

        /* Small / lead / muted text */
        html.acc-font-large .small,
        html.acc-font-large small,
        html.acc-font-xlarge .small,
        html.acc-font-xlarge small { font-size: 0.9rem !important; }
        html.acc-font-large .lead,
        html.acc-font-xlarge .lead { font-size: 1.25rem !important; }

        /* Buttons, inputs, navs, body text — all proportional to root */
        html.acc-font-large body, html.acc-font-xlarge body,
        html.acc-font-large p, html.acc-font-xlarge p,
        html.acc-font-large span, html.acc-font-xlarge span,
        html.acc-font-large div, html.acc-font-xlarge div,
        html.acc-font-large .btn, html.acc-font-xlarge .btn,
        html.acc-font-large input, html.acc-font-xlarge input,
        html.acc-font-large select, html.acc-font-xlarge select,
        html.acc-font-large textarea, html.acc-font-xlarge textarea,
        html.acc-font-large .form-control, html.acc-font-xlarge .form-control,
        html.acc-font-large .nav-link, html.acc-font-xlarge .nav-link,
        html.acc-font-large .dropdown-item, html.acc-font-xlarge .dropdown-item,
        html.acc-font-large .sidebar-link, html.acc-font-xlarge .sidebar-link,
        html.acc-font-large .navbar-brand, html.acc-font-xlarge .navbar-brand,
        html.acc-font-large label, html.acc-font-xlarge label,
        html.acc-font-large td, html.acc-font-xlarge td,
        html.acc-font-large th, html.acc-font-xlarge th,
        html.acc-font-large li, html.acc-font-xlarge li,
        html.acc-font-large a, html.acc-font-xlarge a {
            font-size: 1rem;
        }

        /* Cards / badges */
        html.acc-font-large .card-title, html.acc-font-xlarge .card-title { font-size: 1.25rem !important; }
        html.acc-font-large .card-text, html.acc-font-xlarge .card-text { font-size: 1rem !important; }
        html.acc-font-large .badge, html.acc-font-xlarge .badge { font-size: 0.85rem !important; }

        /* ─── Colour Blindness Filters ─── */
        html.acc-cb-protanopia   { filter: url('#cb-protanopia'); }
        html.acc-cb-deuteranopia { filter: url('#cb-deuteranopia'); }
        html.acc-cb-tritanopia   { filter: url('#cb-tritanopia'); }
        html.acc-cb-greyscale    { filter: grayscale(100%); }

        /* ─── High Contrast Mode ─── */
        body.acc-high-contrast { background: #000 !important; color: #fff !important; }
        body.acc-high-contrast .card,
        body.acc-high-contrast .border,
        body.acc-high-contrast .bg-white,
        body.acc-high-contrast .profile-box { background: #111 !important; border-color: #fff !important; color: #fff !important; }
        body.acc-high-contrast a { color: #ff0 !important; }
        body.acc-high-contrast .navbar,
        body.acc-high-contrast .sidebar { background: #000 !important; border-color: #555 !important; }

        /* ─── Page Transitions ─── */
        body { transition: font-size 0.3s ease, background 0.3s ease, color 0.3s ease; }
        main { animation: accFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
        @keyframes accFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        body.page-leaving main { animation: accFadeOut 0.2s ease forwards; }
        @keyframes accFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }

        .btn, .nav-link, .sidebar-link, .dropdown-item, .acc-size-btn, .acc-reset-btn {
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease !important;
        }
        .btn:active, .nav-link:active, .sidebar-link:active, .dropdown-item:active,
        .acc-size-btn:active, .acc-reset-btn:active { transform: scale(0.95) !important; }

        /* Back Button */
        .rc-back-btn {
            display: none;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 8px;
            border: 1.5px solid #0a3882;
            background: #fff;
            color: #0a3882;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .rc-back-btn:hover {
            background: #0a3882;
            color: #fff;
        }
        .rc-back-btn.visible {
            display: inline-flex;
        }

        /* Floating Accessibility Button  */
        #acc-toggle-btn {
            position: fixed; bottom: 24px; right: 24px; z-index: 9999;
            width: 52px; height: 52px; border-radius: 50%;
            background: #1a6b5a; color: #fff; border: none; font-size: 22px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        }
        #acc-toggle-btn:hover { background: #155a4a; transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
        #acc-toggle-btn:active { transform: scale(0.95); }


        #acc-panel {
            position: fixed; bottom: 88px; right: 24px; z-index: 9998;
            width: 300px; background: #fff; border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18); overflow: hidden;
            transform: scale(0.92) translateY(10px); opacity: 0; pointer-events: none;
            transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: bottom right;
        }
        #acc-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
        .acc-panel-header {
            background: #1a6b5a; color: #fff; padding: 14px 18px;
            font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: space-between;
        }
        .acc-panel-body { padding: 16px 18px; }
        .acc-section-label {
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.07em; color: #9aa3b4; margin: 12px 0 8px;
        }
        .acc-section-label:first-child { margin-top: 0; }
        .acc-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 14px; color: #1a1f2e; }
        .acc-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
        .acc-switch input { opacity: 0; width: 0; height: 0; }
        .acc-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 22px; cursor: pointer; transition: background 0.2s; }
        .acc-slider:before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
        .acc-switch input:checked + .acc-slider { background: #1a6b5a; }
        .acc-switch input:checked + .acc-slider:before { transform: translateX(18px); }
        .acc-btn-group { display: flex; gap: 6px; }
        .acc-size-btn { flex: 1; padding: 6px 0; border-radius: 8px; border: 1.5px solid #e8eaef; background: #f7f8fa; font-size: 13px; cursor: pointer; transition: all 0.15s; color: #1a1f2e; font-weight: 500; }
        .acc-size-btn.active, .acc-size-btn:hover { background: #e8f5f1; border-color: #1a6b5a; color: #1a6b5a; }
        .acc-select { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1.5px solid #e8eaef; font-size: 13px; color: #1a1f2e; background: #f7f8fa; cursor: pointer; transition: border-color 0.15s; }
        .acc-select:focus { outline: none; border-color: #1a6b5a; }
        .acc-reset-btn { width: 100%; margin-top: 14px; padding: 8px; border-radius: 8px; border: 1.5px solid #e8eaef; background: #f7f8fa; font-size: 13px; color: #5a6478; cursor: pointer; transition: all 0.15s; font-weight: 500; }
        .acc-reset-btn:hover { background: #fdf0f0; border-color: #e05252; color: #e05252; }

        /* Lock the accessibility panel itself at normal size so it stays usable */
        html.acc-font-large #acc-panel, html.acc-font-xlarge #acc-panel,
        html.acc-font-large #acc-panel *, html.acc-font-xlarge #acc-panel * {
            font-size: revert !important;
        }
        html.acc-font-large #acc-toggle-btn, html.acc-font-xlarge #acc-toggle-btn {
            font-size: 22px !important;
        }

        /* TTS indicator */
        #tts-indicator {
            display: none; position: fixed; bottom: 88px; left: 24px; z-index: 9997;
            background: #1a6b5a; color: #fff; padding: 8px 14px; border-radius: 20px;
            font-size: 13px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: pulse 1.5s ease infinite;
        }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.65} }