/*
 * The accessibility widget: assets/js/a11y_widget.js draws the markup, this
 * file styles it, and neither depends on anything else.
 *
 * ── Why its own stylesheet ─────────────────────────────────────────────
 *
 * The widget is included on pages that load assets/css/style.css (the board,
 * both login screens, the signup request) AND on pages that load
 * assets/css/public.css (every share page). Those two stylesheets share no
 * tokens at all, so a widget styled from either one would be unstyled on
 * half the pages it appears on. Every colour, size and radius below is its
 * own --a11y-* token, declared here, resolved by tools/contrast_audit.php's
 * 'a11y' scope, and measured in both schemes.
 *
 * ── Load order matters ─────────────────────────────────────────────────
 *
 * This file must be the LAST stylesheet on the page. The text-size settings
 * below override `html { font-size }` and `body { font-size }`, which the
 * two page stylesheets set in absolute pixels, and a later rule of equal
 * specificity is what makes that work without an !important on a font size.
 *
 * ── Nothing here is scoped to a colour scheme by accident ──────────────
 *
 * The panel follows prefers-color-scheme like the pages it sits on. The
 * high-contrast setting deliberately overrides BOTH: it forces one fixed
 * light pairing rather than intensifying whichever scheme happened to be
 * active, because "high contrast" has to be a known rendering and not a
 * function of the reader's OS setting.
 */

:root {
  --a11y-accent:      #1B4B8F;   /* 8.57:1 with --a11y-on-accent  */
  --a11y-on-accent:   #FFFFFF;
  --a11y-panel:       #FFFFFF;
  --a11y-ink:         #1A2035;   /* 16.13:1 on the panel          */
  --a11y-ink-soft:    #4A5060;   /*  8.05:1 on the panel          */
  --a11y-border:      #C9CDD8;
  --a11y-focus:       #2F6FED;   /*  4.55:1 on the panel          */
  --a11y-shadow:      0 10px 30px rgba(16, 20, 34, .22);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The accent and its ink swap roles in the dark scheme, the same way
       the board's do: a deep navy on a dark panel would be invisible, so
       the accent becomes the light tone and the ink drawn on it becomes
       dark. Both directions measure 7.88:1. */
    --a11y-accent:    #8FB4FF;
    --a11y-on-accent: #1D1F2D;
    --a11y-panel:     #1D1F2D;
    --a11y-ink:       #EDEFF7;   /* 14.22:1 on the panel          */
    --a11y-ink-soft:  #B9BECE;   /*  8.80:1 on the panel          */
    --a11y-border:    #3A3E52;
    /* MEASURED - `php tools/contrast_audit.php` prints this row. The token
       had no dark value, so the light #2F6FED was inherited onto the dark
       panel at 3.59:1: over the 3.0 floor for a non-text indicator, and
       only just. This widget is the accessibility widget; its own focus
       ring being the weakest thing on the panel was the wrong place to
       economise. #6BA5FF is 6.57:1 on --a11y-panel, and it is the same
       value --ls-focus takes in the dark scheme, so the ring a reader
       learns on the share page underneath is the ring they see here. */
    --a11y-focus:     #6BA5FF;
    --a11y-shadow:    0 10px 30px rgba(0, 0, 0, .6);
  }
}

/* ── The floating button ─────────────────────────────────────────────────
   48px, above the project's 44px touch floor. Fixed to the inline START of
   the viewport, which is the RIGHT on these dir="rtl" pages - the opposite
   corner from where a share page draws its own WhatsApp action, so the two
   never overlap. z-index is above the board's own modal (50) and the
   listing lightbox, because the widget has to stay reachable while either
   is open. */
.a11y-fab {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  z-index: 2147483000;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--a11y-border);
  border-radius: 999px;
  background: var(--a11y-accent);
  color: var(--a11y-on-accent);
  box-shadow: var(--a11y-shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.a11y-fab svg { width: 26px; height: 26px; display: block; }
.a11y-fab:hover { filter: brightness(1.08); }

/* ── The panel ──────────────────────────────────────────────────────────
   Sits directly above the button on the same inline edge. max-height plus
   overflow so it can never grow past a short viewport, and a width in ch
   rather than px so it still fits its own Hebrew labels at the largest text
   step this widget itself offers. */
.a11y-panel {
  position: fixed;
  inset-block-end: 76px;
  inset-inline-start: 16px;
  z-index: 2147483000;
  width: min(19rem, calc(100vw - 32px));
  max-height: min(28rem, calc(100vh - 110px));
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--a11y-border);
  border-radius: 14px;
  background: var(--a11y-panel);
  color: var(--a11y-ink);
  box-shadow: var(--a11y-shadow);
  font-family: 'Heebo', 'Segoe UI', Tahoma, sans-serif;
  text-align: start;
}
.a11y-panel[hidden] { display: none; }

.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.a11y-panel-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--a11y-ink);
}
.a11y-x {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--a11y-ink-soft);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.a11y-x:hover { background: rgba(127, 127, 127, .14); }

.a11y-opts { display: flex; flex-direction: column; gap: 8px; }

/* Every option is a real <button> with aria-pressed, so the on/off state is
   announced rather than implied by the fill. The state is also spelled out
   in the .a11y-state line under each label: colour is never the only
   carrier of meaning here either. */
.a11y-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--a11y-border);
  border-radius: 12px;
  background: transparent;
  color: var(--a11y-ink);
  font-family: inherit;
  font-size: 16px;
  text-align: start;
  cursor: pointer;
}
.a11y-opt:hover { background: rgba(127, 127, 127, .1); }
.a11y-opt[aria-pressed="true"] {
  border-color: var(--a11y-accent);
  color: var(--a11y-accent);
  font-weight: 600;
}
.a11y-opt-ico { flex: none; width: 22px; height: 22px; }
.a11y-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a11y-state { font-size: 13px; font-weight: 400; color: var(--a11y-ink-soft); }
.a11y-opt[aria-pressed="true"] .a11y-state { color: var(--a11y-accent); }

.a11y-reset {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--a11y-accent);
  color: var(--a11y-on-accent);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.a11y-reset:hover { filter: brightness(1.08); }

/* One ring for every control the widget owns, on the widget's own token so
   it does not inherit a page ring that may not be visible against this
   panel. 3px, matching the board's. */
.a11y-fab:focus-visible,
.a11y-panel :focus-visible {
  outline: 3px solid var(--a11y-focus);
  outline-offset: 2px;
}

/* ── Setting: text size ─────────────────────────────────────────────────
   Two steps, on the ROOT font size, so anything sized in rem or em follows
   it. Both page stylesheets also set an absolute `font-size: 16px` on body
   (and style.css a third time on .bd-page), which a root change alone would
   not move - so those are restated here in rem. That is the whole reason
   this file must load last. */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-1 body,
html.a11y-text-2 body,
html.a11y-text-1 .bd-page,
html.a11y-text-2 .bd-page { font-size: 1rem; }

/* The panel is the control for the text size and must not resize under the
   reader while they are pressing its buttons. */
html.a11y-text-1 .a11y-panel,
html.a11y-text-2 .a11y-panel,
html.a11y-text-1 .a11y-fab,
html.a11y-text-2 .a11y-fab { font-size: 16px; }

/* ── Setting: stop animations ───────────────────────────────────────────
   Deliberately blunt, and deliberately !important: this is a reader saying
   motion is a problem, which outranks every animation any rule on the page
   asked for. scroll-behavior too - a smooth-scrolling carousel is motion. */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-no-motion { scroll-behavior: auto !important; }

/* ── Setting: high contrast ─────────────────────────────────────────────
   One FIXED light pairing in both schemes, not an intensified version of
   whichever scheme was active. Done by overriding the two page
   stylesheets' own tokens rather than by painting every element, so the
   pages keep their layout, their photographs and their structure and only
   their palette changes.

   color-scheme:light is set as well, so the form controls the browser
   paints itself (the date picker, the select's own menu) come back light
   too instead of staying dark under light text.

   The literal surfaces that are NOT tokens - the board hero's gradient,
   the login page's gradient, the modal and lightbox scrims - are listed
   below by name, because a token override cannot reach them. */
html.a11y-contrast {
  color-scheme: light;

  /* assets/css/style.css */
  --bg:              #FFFFFF;
  --card-bg:         #FFFFFF;
  --border:          #000000;
  --border-focus:    #000000;
  --text:            #000000;
  --text-muted:      #000000;
  --text-light:      #1A1A1A;
  --primary:         #00307A;
  --primary-on-white:#00307A;
  --primary-deep:    #001F52;
  --primary-light:   #FFFFFF;
  --login-fine:      #000000;
  --login-error-ink: #8C0000;
  --danger-light:    #FFFFFF;
  --sr-label:        #000000;
  --sr-note-bg:      #FFFFFF;
  --sr-note-ink:     #000000;

  /* the board's own scope inherits these through .bd-page */
  --bd-accent:       #8A2A00;
  --bd-accent-ink:   #8A2A00;
  --bd-accent-soft:  #FFFFFF;
  --bd-on-accent:    #FFFFFF;
  --bd-focus:        #000000;

  /* assets/css/public.css */
  --ls-primary:      #00307A;
  --ls-primary-dark: #001F52;
  --ls-primary-tint: #FFFFFF;
  --ls-on-primary:   #FFFFFF;
  --ls-accent-text:  #00307A;
  --ls-ink:          #000000;
  --ls-ink-soft:     #000000;
  --ls-border:       #000000;
  --ls-bg:           #FFFFFF;
  --ls-surface:      #FFFFFF;
  --ls-success-bg:   #FFFFFF;
  --ls-success-ink:  #005522;
  --ls-error-bg:     #FFFFFF;
  --ls-error-ink:    #8C0000;
  --ls-focus:        #000000;
}
/* .bd-page redeclares the board tokens in its own block, which would win
   over the html-level overrides above by proximity, so it is restated. */
html.a11y-contrast .bd-page {
  --bd-accent:      #8A2A00;
  --bd-accent-ink:  #8A2A00;
  --bd-accent-soft: #FFFFFF;
  --bd-on-accent:   #FFFFFF;
  --bd-focus:       #000000;
}
html.a11y-contrast body { background: #FFFFFF; color: #000000; }
/* The four literal surfaces. Each is a gradient or a scrim, so there is no
   token to move and the rule has to name the element. */
html.a11y-contrast .bd-hero,
html.a11y-contrast .login-page {
  background: #FFFFFF;
  color: #000000;
}
html.a11y-contrast .bd-hero-title,
html.a11y-contrast .bd-hero-sub,
html.a11y-contrast .bd-hero-accent { color: #000000; }
html.a11y-contrast .login-card { background: #FFFFFF; border: 2px solid #000000; }
html.a11y-contrast .bd-modal-back { background: rgba(0, 0, 0, .8); }
html.a11y-contrast .ls-lightbox { background: #000000; }
/* Borders carry structure once the fills are all white. */
html.a11y-contrast .bd-card,
html.a11y-contrast .bd-search,
html.a11y-contrast .bd-modal-box,
/* .pg-prop, not .pg-card. There is no .pg-card anywhere in this tree - the
   property cards on an agency's landing page are .pg-prop (public.css:859)
   - so this selector matched nothing and the one thing high contrast is for
   on that page, giving every card a visible edge once the fills go white,
   did not happen. */
html.a11y-contrast .pg-prop,
html.a11y-contrast .ls-card { border: 1px solid #000000; }

/* The widget's own panel keeps its own palette in high contrast: it is the
   control that turns the setting off again, and it must stay legible and
   recognisable while the rest of the page changes underneath it. */
html.a11y-contrast .a11y-panel,
html.a11y-contrast .a11y-fab {
  --a11y-accent:    #00307A;
  --a11y-on-accent: #FFFFFF;
  --a11y-panel:     #FFFFFF;
  --a11y-ink:       #000000;
  --a11y-ink-soft:  #000000;
  --a11y-border:    #000000;
  --a11y-focus:     #000000;
}

/* The widget never prints. */
@media print {
  .a11y-fab, .a11y-panel { display: none !important; }
}