/* sassine-a11y.css */
html { font-size: var(--a11y-root, 100%); }

:root {
      --a11y-z: 2147483000;
      --a11y-bg: #0f0f15;
      --a11y-fg: #ffffff;
      --a11y-accent: #d4af37;
      --a11y-border: #2c2c2c;
      --a11y-shadow: 0 8px 24px rgba(0,0,0,.35);
      --a11y-radius: 12px;
      --a11y-font: system-ui, -apple-system, "Segoe UI", Heebo, Arial;
    }

    /* Floating open button — fixed to viewport */
    #a11y-open {
      position: fixed; right: 18px; bottom: 18px;
      z-index: var(--a11y-z);
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(145deg, #2BB3A3, #0F6B62);
      color: #fff; border: 1px solid rgba(255,255,255,.18);
      display: grid; place-items: center; cursor: pointer;
      box-shadow: 0 10px 28px rgba(7,13,23,.28), 0 4px 12px rgba(43,179,163,.22);
      transition: transform .25s ease, box-shadow .25s ease;
      padding: 0;
    }
    #a11y-open:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(7,13,23,.32), 0 6px 16px rgba(43,179,163,.28);
    }
    #a11y-open .a11y-open-icon {
      width: 24px; height: 24px; display: block;
      fill: currentColor;
    }
    #a11y-open:focus-visible { outline: 3px solid #C9A35B; outline-offset: 3px; }

    /* Panel */
    #a11y-panel[hidden] { display: none !important; }
    #a11y-panel {
      position: fixed; right: 18px; bottom: 74px; width: min(92vw, 380px);
      z-index: var(--a11y-z);
      background: var(--a11y-bg); color: var(--a11y-fg);
      border: 2px solid var(--a11y-accent); border-radius: var(--a11y-radius);
      box-shadow: var(--a11y-shadow);
      direction: rtl; text-align: right;
    }
    #a11y-panel header {
      display:flex; align-items:center; justify-content:space-between;
      padding: 10px 12px; border-bottom: 1px solid var(--a11y-border);
    }
    #a11y-title { margin:0; font: 600 16px/1.2 var(--a11y-font); }
    #a11y-close { background: transparent; color: var(--a11y-fg); border: 0; cursor: pointer; font-size: 20px; }
    #a11y-body { padding: 10px 12px; max-height: 70vh; overflow: auto; }
    #a11y-body section { margin: 12px 0 16px; }
    #a11y-body h4 { margin: 0 0 8px; font: 600 14px/1.2 var(--a11y-font); }

    .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .a11y-row  { display: flex; gap: 8px; flex-wrap: wrap; }
    .a11y-btn, .a11y-toggle {
      width: 100%; padding: 8px 10px; border-radius: 8px;
      border: 1px solid var(--a11y-border);
      background: #1b1b22; color: var(--a11y-fg);
      cursor: pointer; text-align: center; font: 500 14px/1.2 var(--a11y-font);
    }
    .a11y-btn:hover, .a11y-toggle:hover { border-color: var(--a11y-accent); }
    .a11y-toggle[aria-pressed="true"], .a11y-btn.active { background: var(--a11y-accent); color: #111; }
    .a11y-note { font: 12px/1.4 var(--a11y-font); opacity: .85; margin-top: 6px; }

    /* Focus outlines site-wide when enabled */
    .a11y-focus *:focus-visible { outline: 3px solid var(--a11y-accent) !important; outline-offset: 2px !important; }

    /* Link underline */
    .a11y-underline a { text-decoration: underline !important; text-underline-offset: .15em; }

    /* Text sizing / spacing */
    .a11y-text-lg { font-size: 112% !important; }
    .a11y-text-xl { font-size: 125% !important; }
    .a11y-line-lg * { line-height: 1.8 !important; }
    .a11y-letter-lg * { letter-spacing: .02em !important; }

    /* High-contrast themes (scoped) */
    #a11y-scope.a11y-hc-light, #a11y-scope.a11y-hc-light * {
      color: #000 !important; background: #fff !important; box-shadow: none !important; border-color: #000 !important;
    }
    #a11y-scope.a11y-hc-dark, #a11y-scope.a11y-hc-dark * {
      color: #fff !important; background: #000 !important; box-shadow: none !important; border-color: #fff !important;
    }

    /* Grayscale (scoped so the widget itself is unaffected) */
    #a11y-scope.a11y-gray { filter: grayscale(100%); }
    #a11y-panel, #a11y-open { filter: none !important; }

    /* Motion reduction */
    .a11y-reduce * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

    /* Reading mask */
    #a11y-mask { position: fixed; inset: 0; pointer-events: none; z-index: calc(var(--a11y-z) - 1); display: none; }
    #a11y-mask.active { display: block; }
    #a11y-mask::before{
      content:""; position:absolute; left:0; right:0; height:120px; top:var(--a11y-mask-y, 30%);
      outline: 2px dashed var(--a11y-accent);
      background: rgba(0,0,0,.6); mix-blend-mode: multiply;
      box-shadow: 0 -200vmax 0 0 rgba(0,0,0,.6), 0 200vmax 0 0 rgba(0,0,0,.6);
    }

    /* Dialog hint */
    #a11y-panel[role="dialog"] { contain: content; }