/* Accessibility toolbar — WCAG 2.2 AA (target >= 44px, focus visible, contrast >= 4.5:1) */
/* Palet netral khusus panel (tidak mengikuti appearance). Rasio kontras dihitung terhadap WCAG 2.2 AA:
   teks #111 di #fff = 18.9:1; border #6B6B6B di #fff = 5.3:1; fokus #0B57D0 di #fff = 6.7:1.
   Mode gelap: teks #F2F2F2 di #1C1C1E = 15.4:1; fokus #8AB4F8 di #1C1C1E = 8.2:1. */
.fe-a11y-fab,
.fe-a11y-panel {
    --a11y-bg: #FFFFFF;
    --a11y-text: #111111;
    --a11y-muted: #4A4A4A;
    --a11y-border: #6B6B6B;
    --a11y-soft: #F2F2F2;
    --a11y-on: #111111;
    --a11y-on-text: #FFFFFF;
    --a11y-focus: #0B57D0;
}

html[data-fe-theme="dark"] .fe-a11y-fab,
html[data-fe-theme="dark"] .fe-a11y-panel {
    --a11y-bg: #1C1C1E;
    --a11y-text: #F2F2F2;
    --a11y-muted: #C4C4C4;
    --a11y-border: #9A9A9A;
    --a11y-soft: #2A2A2D;
    --a11y-on: #F2F2F2;
    --a11y-on-text: #111111;
    --a11y-focus: #8AB4F8;
}

.fe-a11y-fab {
    position: fixed;
    right: 1.1rem;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    z-index: 1085;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--a11y-bg);
    background: var(--a11y-on);
    color: var(--a11y-on-text);
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    outline: 1px solid var(--a11y-border);
}

.fe-a11y-fab:hover { background: var(--a11y-muted); color: var(--a11y-bg); }

/* Satu cincin fokus saja, tanpa bayangan; hanya tampil untuk fokus keyboard. */
.fe-a11y-fab:focus-visible,
.fe-a11y-panel button:focus-visible,
.fe-a11y-panel select:focus-visible {
    outline: 3px solid var(--a11y-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.fe-a11y-fab:focus:not(:focus-visible),
.fe-a11y-panel button:focus:not(:focus-visible) { outline-color: transparent; }

.fe-a11y-panel {
    position: fixed;
    right: 1.1rem;
    bottom: calc(4.9rem + env(safe-area-inset-bottom));
    z-index: 1085;
    width: min(350px, calc(100vw - 2.2rem));
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--a11y-bg);
    color: var(--a11y-text);
    border: 2px solid var(--a11y-border);
    border-radius: 1rem;
    box-shadow: none;
    padding: 1.1rem;
    display: none;
    font-size: 1rem;
}

html body .fe-a11y-fab,
html body .fe-a11y-panel,
html body .fe-a11y-panel *,
html body .fe-a11y-fab:hover,
html body .fe-a11y-fab:focus {
    box-shadow: none !important;
    transform: none !important;
}

html body .fe-a11y-panel,
html body .fe-a11y-panel:hover,
html body .fe-a11y-panel:focus,
html body .fe-a11y-panel:focus-within { border-color: var(--a11y-border) !important; }

html body .fe-a11y-panel .fe-a11y-btn,
html body .fe-a11y-panel .fe-a11y-close,
html body .fe-a11y-panel .fe-a11y-steps button,
html body .fe-a11y-panel select { border-color: var(--a11y-border); }

html body .fe-a11y-panel .fe-a11y-btn[aria-pressed="true"],
html body .fe-a11y-panel .fe-a11y-steps button[aria-pressed="true"] { border-color: var(--a11y-on); }

.fe-a11y-panel:focus { outline: none; }
.fe-a11y-panel.show { display: block; }

.fe-a11y-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.fe-a11y-title { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--a11y-text); }

.fe-a11y-panel h3 {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 1.1rem 0 .55rem;
    padding-top: .9rem;
    border-top: 1px solid var(--a11y-border);
    color: var(--a11y-text);
}

.fe-a11y-header + h3 { margin-top: .25rem; }

.fe-a11y-close,
.fe-a11y-btn,
.fe-a11y-steps button,
.fe-a11y-panel select {
    min-height: 44px;
    border: 2px solid var(--a11y-border);
    background: var(--a11y-bg);
    color: var(--a11y-text);
    border-radius: .75rem;
    font-weight: 700;
    cursor: pointer;
}

.fe-a11y-panel select { width: 100%; padding: .35rem .6rem; font-weight: 600; }
.fe-a11y-close { width: 44px; font-size: 1.1rem; }
.fe-a11y-btn { padding: .4rem .8rem; }
.fe-a11y-btn:hover,
.fe-a11y-close:hover,
.fe-a11y-steps button:hover { background: var(--a11y-soft); }

.fe-a11y-btn[aria-pressed="true"],
.fe-a11y-steps button[aria-pressed="true"] {
    background: var(--a11y-on);
    border-color: var(--a11y-on);
    color: var(--a11y-on-text);
}

.fe-a11y-btn:disabled { opacity: 1; color: var(--a11y-muted); border-style: dashed; cursor: not-allowed; background: var(--a11y-bg); }

.fe-a11y-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.fe-a11y-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.fe-a11y-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.fe-a11y-steps button { min-width: 44px; padding: 0; }

.fe-a11y-field { display: block; margin: .65rem 0 .25rem; font-size: .9rem; font-weight: 700; }
.fe-a11y-note { font-size: .85rem; color: var(--a11y-muted); margin: .5rem 0 0; }

.fe-a11y-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.fe-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
}

.fe-a11y-row-label { font-size: .95rem; font-weight: 600; }

.fe-a11y-switch {
    flex: 0 0 auto;
    width: 56px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.fe-a11y-switch::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 10px; height: 24px;
    border-radius: 999px;
    border: 2px solid var(--a11y-border);
    background: var(--a11y-bg);
}

.fe-a11y-switch::after {
    content: '';
    position: absolute;
    top: 14px; left: 4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--a11y-muted);
    transition: transform .15s ease;
}

.fe-a11y-switch[aria-checked="true"]::before { background: var(--a11y-on); border-color: var(--a11y-on); }
.fe-a11y-switch[aria-checked="true"]::after { transform: translateX(30px); background: var(--a11y-on-text); }

.fe-a11y-reset { width: 100%; margin-top: 1rem; }

.fe-speaking {
    background: color-mix(in srgb, #FFD400 40%, transparent) !important;
    outline: 3px solid #0B57D0 !important;
    outline-offset: 3px !important;
    border-radius: .25rem;
}

html[data-fe-theme="dark"] .fe-speaking { outline-color: #8AB4F8 !important; background: color-mix(in srgb, #FFD400 28%, transparent) !important; }

.fe-reading-guide {
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 2.6rem;
    z-index: 1084;
    pointer-events: none;
    background: rgba(255, 255, 255, .0);
    border-top: 3px solid #0B57D0;
    border-bottom: 3px solid #0B57D0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
    clip-path: inset(-100vmax 0);
    display: none;
}

html[data-a11y-guide="on"] .fe-reading-guide { display: block; }

/* ---- Effects ---- */
html[data-a11y-contrast="on"] { --fe-line: var(--fe-ink); }
html[data-a11y-contrast="on"]:not([data-fe-theme="dark"]) { --fe-muted: #14161A; --fe-ink: #000; }
html[data-a11y-contrast="on"][data-fe-theme="dark"] { --fe-muted: #FFFFFF; --fe-ink: #FFFFFF; }
html[data-a11y-contrast="on"] .fe-hero::before,
html[data-a11y-contrast="on"] .fe-cta::before { display: none; }
html[data-a11y-contrast="on"] .fe-card,
html[data-a11y-contrast="on"] .fe-glass,
html[data-a11y-contrast="on"] .fe-a11y-panel { border-width: 2px; }
html[data-a11y-contrast="on"] a { text-decoration: underline; }

html[data-a11y-links="on"] main a,
html[data-a11y-links="on"] footer a {
    text-decoration: underline !important;
    text-underline-offset: .2em;
    background: color-mix(in srgb, #FFE600 38%, transparent);
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

html[data-a11y-headings="on"] h1,
html[data-a11y-headings="on"] h2,
html[data-a11y-headings="on"] h3,
html[data-a11y-headings="on"] h4,
html[data-a11y-headings="on"] h5,
html[data-a11y-headings="on"] h6 {
    outline: 2px dashed var(--fe-primary);
    outline-offset: 4px;
}

/* WCAG 1.4.12 Text Spacing */
html[data-a11y-spacing="on"] body *:not(.bi):not([class*="bi-"]) {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
html[data-a11y-spacing="on"] p { margin-bottom: 2em !important; }

html[data-a11y-dyslexia="on"] body *:not(.bi):not([class*="bi-"]):not(.leaflet-container) {
    font-family: 'Atkinson Hyperlegible', 'Inter', Arial, sans-serif !important;
}

html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html[data-a11y-mono="on"] { filter: grayscale(1); }
html[data-a11y-satlow="on"] { filter: saturate(.45); }
html[data-a11y-sathigh="on"] { filter: saturate(1.9); }

html[data-a11y-align="on"] main,
html[data-a11y-align="on"] main * { text-align: left !important; }

/* Motor: bigger click targets (WCAG 2.5.8) */
html[data-a11y-targets="on"] a,
html[data-a11y-targets="on"] button,
html[data-a11y-targets="on"] input:not([type="hidden"]),
html[data-a11y-targets="on"] select,
html[data-a11y-targets="on"] textarea,
html[data-a11y-targets="on"] [role="button"] {
    min-height: 48px;
    min-width: 48px;
}
html[data-a11y-targets="on"] main a:not(.btn):not([class*="fe-"]) { padding-block: .35rem; display: inline-block; }

html[data-a11y-images="on"] main img,
html[data-a11y-images="on"] footer img,
html[data-a11y-images="on"] .fe-hero,
html[data-a11y-images="on"] .fe-footer {
    visibility: hidden !important;
}
html[data-a11y-images="on"] .fe-hero,
html[data-a11y-images="on"] .fe-footer { background-image: none !important; visibility: visible !important; }

/* Super focus: very visible focus ring (WCAG 2.4.7 / 2.4.11) */
html[data-a11y-focus="on"] :focus,
html[data-a11y-focus="on"] :focus-visible {
    outline: 4px solid #0B57D0 !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}

html[data-a11y-cursor="on"],
html[data-a11y-cursor="on"] a,
html[data-a11y-cursor="on"] button {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'><path d='M3 2l7 19 3-8 8-3z' fill='black' stroke='white' stroke-width='1.5'/></svg>") 4 2, auto;
}

@media (max-width: 575.98px) {
    .fe-a11y-fab { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .fe-a11y-panel { right: 1rem; bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}

@media (forced-colors: active) {
    .fe-a11y-switch::before { border-color: ButtonText; }
    .fe-a11y-switch[aria-checked="true"]::before { background: Highlight; border-color: Highlight; }
    .fe-a11y-fab, .fe-a11y-panel { border-color: CanvasText; }
}

html[data-fe-theme="dark"][data-a11y-focus="on"] :focus,
html[data-fe-theme="dark"][data-a11y-focus="on"] :focus-visible { outline-color: #8AB4F8 !important; }