/* ============================================================================
   ProNick — accessibility settings (הגדרות נגישות)
   ----------------------------------------------------------------------------
   Loaded on every page by dashboard.py's after_request injector as an external
   stylesheet from 'self', so it needs no CSP nonce and blesses no inline style.

   Two halves, kept apart on purpose:

     .pn-a11y-*        the panel's own chrome. Scoped, prefixed, and immune to
                       the user's own settings - a person who has turned on
                       "largest text" still has to be able to turn it off.
     html[data-pn-*]   the settings themselves, applied to the page.

   Colours are the dashboard's own tokens, restated here because every template
   ships its own inline stylesheet and there is no shared one to inherit from.
   Measured against #0a0e1a: text 17.1:1, muted 7.7:1. White on --blue is only
   3.68:1, so it is never used for body text - active states are a violet wash
   behind full-contrast text instead.
   ========================================================================== */

.pn-a11y-root {
  --a11y-bg: #0d1222;
  /* Opaque enough that page text does not read through it. The glass effect
     is worth having; a control panel you cannot read is not. */
  --a11y-surface: rgba(17, 22, 42, 0.985);
  /* Opaque, not translucent. A control tile that lets the page's own text
     read through it is unusable at exactly the contrast settings a person
     turned this panel on to fix. */
  --a11y-raised: #232b48;
  --a11y-border: rgba(120, 130, 200, 0.22);
  --a11y-text: #eef1fb;
  --a11y-muted: #9aa3c4;
  --a11y-violet: #6d5cff;
  --a11y-blue: #5b8bff;
  --a11y-grad: linear-gradient(100deg, #5b8bff 0%, #6d5cff 55%, #8b5cf6 100%);
  --a11y-active: #2f2a63;
  --a11y-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7),
                 0 0 0 1px rgba(120, 130, 200, 0.10);
  --a11y-radius: 18px;
  --a11y-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  font-family: var(--a11y-font);
  color: var(--a11y-text);
  /* Cancels the page zoom below, so the controls keep their own size. */
  zoom: var(--pn-a11y-unzoom, 1);
}
.pn-a11y-root *,
.pn-a11y-root *::before,
.pn-a11y-root *::after { box-sizing: border-box; }

/* --- the launcher -------------------------------------------------------- */

.pn-a11y-fab {
  position: absolute;
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  inset-inline-end: max(20px, env(safe-area-inset-right));
  width: 54px; height: 54px;
  display: grid; place-items: center;
  pointer-events: auto;
  border: 1px solid var(--a11y-border);
  border-radius: 50%;
  background:
    linear-gradient(var(--a11y-bg), var(--a11y-bg)) padding-box,
    var(--a11y-grad) border-box;
  color: var(--a11y-text);
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.75);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pn-a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(0,0,0,.8); }
.pn-a11y-fab:active { transform: translateY(0); }
.pn-a11y-fab svg { width: 26px; height: 26px; display: block; }

/* --- the panel ----------------------------------------------------------- */

.pn-a11y-panel {
  position: absolute;
  inset-block-end: calc(max(20px, env(safe-area-inset-bottom)) + 66px);
  inset-inline-end: max(20px, env(safe-area-inset-right));
  width: min(370px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  display: none;
  flex-direction: column;
  pointer-events: auto;
  background: var(--a11y-surface);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--a11y-border);
  border-radius: var(--a11y-radius);
  box-shadow: var(--a11y-shadow);
  overflow: hidden;
}
.pn-a11y-root[data-open="true"] .pn-a11y-panel { display: flex; }

.pn-a11y-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--a11y-border);
  background: linear-gradient(180deg, rgba(109,92,255,.10), transparent);
}
.pn-a11y-title {
  font-family: 'Space Grotesk', var(--a11y-font);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  margin: 0; margin-inline-end: auto;
}
.pn-a11y-icon-btn {
  flex: 0 0 auto;
  min-width: 32px; height: 32px; padding: 0 9px;
  display: grid; place-items: center;
  background: var(--a11y-raised);
  border: 1px solid var(--a11y-border);
  border-radius: 9px;
  color: var(--a11y-text);
  font: 600 12px/1 var(--a11y-font);
  cursor: pointer;
}
.pn-a11y-icon-btn:hover { background: var(--a11y-active); }
.pn-a11y-icon-btn svg { width: 15px; height: 15px; }

.pn-a11y-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 14px; }

.pn-a11y-group { margin-top: 14px; }
.pn-a11y-legend {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--a11y-muted);
  margin: 0 0 8px 2px; padding: 0;
}
[dir="rtl"] .pn-a11y-legend { letter-spacing: normal; text-transform: none; font-size: 12px; }

.pn-a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn-a11y-grid.is-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pn-a11y-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 68px; padding: 10px 8px;
  background: var(--a11y-raised);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--a11y-text);
  font: 600 12.5px/1.25 var(--a11y-font);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pn-a11y-opt svg { width: 20px; height: 20px; opacity: .85; flex: 0 0 auto; }
.pn-a11y-opt:hover { background: #2c3159; }
.pn-a11y-opt[aria-pressed="true"],
.pn-a11y-opt[aria-checked="true"] {
  background: var(--a11y-active);
  border-color: var(--a11y-violet);
}
.pn-a11y-opt[aria-pressed="true"] svg,
.pn-a11y-opt[aria-checked="true"] svg { opacity: 1; }
.pn-a11y-opt .pn-a11y-size { font-family: 'Space Grotesk', var(--a11y-font); font-weight: 700; }

.pn-a11y-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--a11y-border);
  background: rgba(10, 14, 26, 0.5);
}
.pn-a11y-reset {
  padding: 8px 14px;
  background: var(--a11y-raised);
  border: 1px solid var(--a11y-border);
  border-radius: 10px;
  color: var(--a11y-text);
  font: 600 12.5px/1 var(--a11y-font);
  cursor: pointer;
}
.pn-a11y-reset:hover { background: var(--a11y-active); }
.pn-a11y-statement {
  margin-inline-start: auto;
  color: var(--a11y-blue);
  font: 600 12.5px/1 var(--a11y-font);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pn-a11y-statement:hover { color: var(--a11y-text); }

/* Focus is never removed, only restyled - and it is deliberately loud, because
   the people most likely to open this panel are the ones navigating by key. */
.pn-a11y-root :focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- small screens: a bottom sheet, not a floating card ------------------ */

@media (max-width: 640px) {
  .pn-a11y-panel {
    inset-inline: 0;
    inset-block-end: 0;
    width: 100%;
    /* Not 86: a sheet that fills the screen leaves nowhere to tap to dismiss
       it, and the gesture people reach for first is tapping the page behind. */
    max-height: 80dvh;
    border-radius: var(--a11y-radius) var(--a11y-radius) 0 0;
    border-inline: none; border-block-end: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* The affordance that says "this can be dismissed". Decorative, so it is
     hidden from assistive technology - the close button is the real control. */
  .pn-a11y-head::before {
    content: ""; position: absolute; inset-inline: 0; top: 7px; margin: auto;
    width: 38px; height: 4px; border-radius: 4px;
    background: rgba(154, 163, 196, .45);
  }
  .pn-a11y-head { position: relative; padding-top: 20px; }
  .pn-a11y-root[data-open="true"] .pn-a11y-fab { display: none; }
  .pn-a11y-grid.is-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pn-a11y-opt { min-height: 62px; font-size: 12px; }
}
@media (max-width: 360px) {
  .pn-a11y-grid { grid-template-columns: 1fr; }
  .pn-a11y-grid.is-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Short viewports - a phone in landscape - must not lose the footer. */
@media (max-height: 460px) {
  .pn-a11y-panel { max-height: 92dvh; }
  .pn-a11y-opt { min-height: 52px; }
}

/* --- skip link ----------------------------------------------------------- */

.pn-a11y-skip {
  position: fixed; top: 8px; left: 8px;
  z-index: 2147483001;
  padding: 12px 18px;
  background: var(--a11y-bg, #0d1222);
  color: #eef1fb;
  border: 2px solid #6d5cff;
  border-radius: 10px;
  font: 600 14px/1 var(--a11y-font);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.pn-a11y-skip:focus { transform: translateY(0); }

/* ==========================================================================
   The settings, applied to the page.
   `html` is the hook so they survive on pages whose body class is rewritten.
   ========================================================================== */

html[data-pn-zoom] body { zoom: var(--pn-a11y-zoom, 1); }

/* Links become unmistakable rather than merely coloured - WCAG 1.4.1 is about
   not conveying meaning by colour alone, and this is its blunt instrument. */
html[data-pn-links="on"] a:not(.pn-a11y-root a) {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 2px !important;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

html[data-pn-font="on"] body :not(.pn-a11y-root):not(.pn-a11y-root *) {
  font-family: Verdana, Tahoma, 'DejaVu Sans', 'Segoe UI', Arial, sans-serif !important;
}
html[data-pn-spacing="on"] body :not(.pn-a11y-root):not(.pn-a11y-root *) {
  letter-spacing: .09em !important;
  word-spacing: .18em !important;
}
html[data-pn-lines="on"] body :not(.pn-a11y-root):not(.pn-a11y-root *) {
  line-height: 1.9 !important;
}

/* Honours the OS setting too: a person who has already asked their system for
   less motion should not have to ask again here. */
html[data-pn-motion="off"] body *:not(.pn-a11y-root):not(.pn-a11y-root *) {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  body *:not(.pn-a11y-root):not(.pn-a11y-root *) {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

html[data-pn-focus="on"] body :focus-visible {
  outline: 4px solid #ffd166 !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

html[data-pn-cursor="on"],
html[data-pn-cursor="on"] body * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l0 26 6-7 4 9 5-2-4-9 9 0z' fill='%23ffffff' stroke='%23000000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Contrast. `filter` is deliberate: it reaches every one of the twenty-four
   templates, each of which ships its own stylesheet, without this file having
   to know a single one of their class names. The panel is lifted out of the
   filtered subtree so its own colours stay correct. */
/* Contrast is applied to the root, not per element.
   ----------------------------------------------------------------------------
   The obvious implementation - `body > * { filter: invert(1) }` - filters each
   top-level block separately, and a block with no background of its own inverts
   only its *text*. The result is white text turning near-black on a background
   that stayed black: the page heading vanished entirely while the cards, which
   do have a background, inverted correctly. Filtering the root instead inverts
   the painted result of the whole page at once, which is what "invert" means.

   The panel then has to be inverted a second time to come back to itself. That
   is not a trick: nested filters compose, and two inversions are the identity.
   ========================================================================== */
html[data-pn-contrast="high"] { filter: contrast(1.42) saturate(1.12); }
html[data-pn-contrast="invert"] { filter: invert(1) hue-rotate(180deg); }
html[data-pn-contrast="grayscale"] { filter: grayscale(1); }

html[data-pn-contrast="invert"] .pn-a11y-root,
html[data-pn-contrast="invert"] .pn-a11y-skip,
html[data-pn-contrast="invert"] .pn-a11y-guide,
html[data-pn-contrast="invert"] .pn-a11y-footer-strip {
  filter: invert(1) hue-rotate(180deg);
}
html[data-pn-contrast="grayscale"] .pn-a11y-root { filter: grayscale(0); }

/* Inverting the page inverts the photographs with it, which turns every face
   into a negative. Media is flipped back so only the interface changes. */
html[data-pn-contrast="invert"] body img,
html[data-pn-contrast="invert"] body video,
html[data-pn-contrast="invert"] body picture,
html[data-pn-contrast="invert"] body canvas {
  filter: invert(1) hue-rotate(180deg);
}

/* --- reading guide ------------------------------------------------------- */

.pn-a11y-guide {
  position: fixed; inset-inline: 0;
  height: 2.4em;
  pointer-events: none;
  z-index: 2147482999;
  border-block: 2px solid rgba(255, 209, 102, .9);
  background: rgba(255, 209, 102, .10);
  display: none;
}
html[data-pn-guide="on"] .pn-a11y-guide { display: block; }

@media print { .pn-a11y-root, .pn-a11y-guide, .pn-a11y-skip { display: none !important; } }