/* الوصول للجميع — أنماط اللوحة والتأثيرات (مُنقولة من النموذج الأولي). */
:root { --ia-blue: #0561A0; --ia-orange: #F27731; --ia-yellow: #F2B12E; --ia-navy: #101740; --ia-muted: #5A6482; --ia-pmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 90,39 75,87 25,87 10,39' fill='black' stroke='black' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.a11y, .a11y button, .a11y summary { font-family: 'Rubik', 'Noto Sans Arabic', system-ui, sans-serif; }
.a11y { direction: rtl; }
.a11y-btn { z-index: 9990; }
.a11y-scrim { z-index: 9991; }
.a11y-panel { z-index: 9992; }
.a11y-panel[hidden] { display: none !important; }
/* ================= الوصول للجميع ================= */
.a11y-btn { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 70; width: 54px; height: 54px; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2f8fd6, var(--ia-blue)); box-shadow: 0 0 0 4px #fff, 0 14px 28px -10px rgba(5,97,160,.75); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.a11y-btn svg { width: 28px; height: 28px; }
.a11y-btn:hover, .a11y-btn:focus-visible { transform: scale(1.08) rotate(-8deg); }
.a11y-btn.on::after { content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ia-orange); border: 2px solid #fff; }
.a11y-scrim { position: fixed; inset: 0; z-index: 71; background: rgba(16,23,64,.35); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.a11y.open .a11y-scrim { opacity: 1; pointer-events: auto; }
.a11y-panel { position: fixed; z-index: 72; top: 12px; bottom: 12px; inset-inline-start: 12px; width: 400px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; background: #F6F8FC; color: var(--ia-navy); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(16,23,64,.6); animation: a11yIn .45s cubic-bezier(.22,.8,.25,1); font-size: 14px; }
@keyframes a11yIn { from { opacity: 0; transform: translateX(30px); } }
.a11y-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: #fff; background: linear-gradient(135deg, var(--ia-navy), var(--ia-blue)); position: relative; overflow: hidden; }
.a11y-head::after { content: ""; position: absolute; width: 150px; height: 150px; inset-inline-end: -40px; top: -60px; -webkit-mask: var(--ia-pmask); mask: var(--ia-pmask); background: rgba(255,255,255,.08); }
.a11y-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.14); flex-shrink: 0; }
.a11y-ic svg { width: 24px; height: 24px; }
.a11y-head h2 { margin: 0; font-size: 18px; color: #fff; }
.a11y-head small { opacity: .75; font-size: 12.5px; }
.a11y-x { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; position: relative; z-index: 1; }
.a11y-x:hover { background: rgba(255,255,255,.25); }
.a11y-body { flex: 1; overflow: auto; padding: 14px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; }
.a11y-sec { background: #fff; border-radius: 18px; padding: 14px; border: 1px solid #E6EBF3; }
.a11y-sec summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.a11y-sec summary::-webkit-details-marker { display: none; }
.a11y-sec summary > svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .3s; color: var(--ia-muted); }
.a11y-sec[open] summary > svg { transform: rotate(-90deg); }
.a11y-sec h3 { margin: 0; font-size: 14.5px; display: flex; gap: 6px; align-items: center; }
.a11y-sec h3 svg { width: 17px; height: 17px; }
.a11y-sec > div, .a11y-sec > p { margin-top: 12px; }
.a11y-stmt p { margin: 10px 0 0; line-height: 1.9; color: var(--ia-muted); }
.a11y-prof { display: grid; gap: 6px; }
.a11y-prof button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid #E6EBF3; background: #fff; cursor: pointer; font: inherit; color: inherit; text-align: start; transition: border-color .25s, background .25s; }
.a11y-prof button > svg { width: 20px; height: 20px; color: var(--ia-blue); }
.a11y-prof button span { flex: 1; font-weight: 600; }
.a11y-prof .sw { display: block; flex-shrink: 0; width: 36px; height: 20px; border-radius: 20px; background: #CBD4E1; position: relative; transition: background .3s; }
.a11y-prof .sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; left: auto; right: 2px; transition: right .3s; }
.a11y-prof button[aria-pressed="true"] { border-color: var(--ia-blue); background: #F1F7FD; }
.a11y-prof button[aria-pressed="true"] .sw { background: var(--ia-blue); }
.a11y-prof button[aria-pressed="true"] .sw::after { right: 18px; }
.a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a11y-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 12px 6px 10px; border-radius: 14px; border: 1.5px solid #E6EBF3; background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: inherit; text-align: center; line-height: 1.35; transition: border-color .25s, background .25s, transform .25s; }
.a11y-tile > svg { width: 24px; height: 24px; color: var(--ia-blue); }
.a11y-tile:hover { transform: translateY(-2px); border-color: #b9d3ec; }
.a11y-tile[aria-pressed="true"] { border-color: var(--ia-blue); background: #F1F7FD; }
.a11y-tile .ok { position: absolute; top: 6px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ia-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.a11y-tile[aria-pressed="true"] .ok { transform: scale(1); }
.a11y-tile .lv { display: flex; gap: 3px; }
.a11y-tile .lv i { width: 12px; height: 4px; border-radius: 4px; background: #DCE3EE; transition: background .25s; }
.a11y-tile .lv i.on { background: var(--ia-orange); }
.a11y-foot { padding: 12px 14px 14px; background: #fff; border-top: 1px solid #E6EBF3; }
.a11y-reset { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px; border: 0; border-radius: 14px; background: var(--ia-navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .25s; }
.a11y-reset:hover { background: var(--ia-blue); }
.a11y-reset svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .a11y-btn { inset-inline-start: 12px; bottom: 12px; width: 48px; height: 48px; } .a11y-panel { top: auto; bottom: 0; inset-inline: 0; width: 100%; max-width: none; height: 86vh; border-radius: 26px 26px 0 0; animation-name: a11yUp; } }
@keyframes a11yUp { from { transform: translateY(40px); opacity: 0; } }
/* التأثيرات — تُطبّق على المحتوى دون لوحة الإتاحة */
html.a11y-text #content, html.a11y-text footer { zoom: var(--a11y-scale, 1); }
html.a11y-text body { overflow-x: clip; }
html[data-a11y-lh="1"] body :is(p, li, dd, small, label, span) { line-height: 2 !important; }
html[data-a11y-lh="2"] body :is(p, li, dd, small, label, span) { line-height: 2.3 !important; }
html[data-a11y-lh="3"] body :is(p, li, dd, small, label, span) { line-height: 2.7 !important; }
html[data-a11y-ls="1"] #content { letter-spacing: .04em; word-spacing: .1em; }
html[data-a11y-ls="2"] #content { letter-spacing: .08em; word-spacing: .2em; }
html[data-a11y-ls="3"] #content { letter-spacing: .12em; word-spacing: .3em; }
html.a11y-font body, html.a11y-font body *:not(svg):not(svg *) { font-family: Tahoma, Arial, sans-serif !important; }
html.a11y-heads #content :is(h1, h2, h3) { outline: 2px solid var(--ia-orange); outline-offset: 4px; border-radius: 4px; background: rgba(242,177,46,.12); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 2px !important; }
html.a11y-links #content a:not(.btn) { background: rgba(242,177,46,.25); }
html.a11y-align #content :is(p, li, h1, h2, h3, dd) { text-align: start !important; }
html.a11y-dark body > :not(.a11y) { filter: invert(.92) hue-rotate(180deg); }
html.a11y-dark body > :not(.a11y) :is(img, video, .liquid) { filter: invert(1) hue-rotate(180deg); }
html.a11y-dark body { background: #0b0e14; }
html.a11y-light body > :not(.a11y) { filter: contrast(1.15) brightness(1.08); }
html.a11y-light #content :is(p, li, small, span, dd) { color: #000 !important; }
html.a11y-contrast body > :not(.a11y) { filter: contrast(1.6); }
html.a11y-satLow body > :not(.a11y) { filter: saturate(.4); }
html.a11y-satHigh body > :not(.a11y) { filter: saturate(1.8); }
html.a11y-mono body > :not(.a11y) { filter: grayscale(1); }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-motion .reveal, html.a11y-motion .tl-item, html.a11y-motion .ibh .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-motion .ticker-track { animation: none !important; }
html.a11y-img #content img, html.a11y-img #content .liquid { visibility: hidden; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7-6 2-2 6z' fill='%23101740' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.a11y-focus :focus-visible, html.a11y-focus a:focus, html.a11y-focus button:focus { outline: 4px solid var(--ia-orange) !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgba(242,119,49,.25) !important; }
#a11y-guide { position: fixed; inset-inline: 0; height: 6px; margin-top: 14px; pointer-events: none; z-index: 69; background: var(--ia-navy); border: 2px solid var(--ia-yellow); border-radius: 4px; }
#a11y-mask { position: fixed; inset: 0; pointer-events: none; z-index: 69; }
#a11y-mask i { position: fixed; inset-inline: 0; background: rgba(10,14,30,.6); }
#a11y-mask i:first-child { top: 0; height: 40vh; }
#a11y-mask i:last-child { top: 60vh; bottom: 0; }