/* ══════════════════════════════════════════════════════════════════
   Cycle 6 — per-page help drawer (offcanvas)
   Spec: Docs/audit/cycle3/PLAN.md (cycle 6 entry).
   ══════════════════════════════════════════════════════════════════ */

/* Trigger button — sized to match navbar btn-sm pattern. The "?"
   glyph is hand-drawn rather than an emoji or icon font so it
   renders consistently across OS / locale. */
.wasla-help-toggle {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Trigger colors. The button used Bootstrap's btn-outline-light, which
   is white-on-transparent and disappears on the P2 frosted LIGHT
   topbar glass. Default treatment mirrors .qg-topbar-btn
   (quiet-glass-chrome.css) via the theme tokens so it flips with
   [data-bs-theme] on its own; deliberately NOT scoped to .qg-chrome so
   it holds on any layout that lacks that body class. Fallback literals
   match tokens.css light values in case tokens.css ever fails to load. */
.wasla-help-toggle {
  --bs-btn-color: var(--text-body, #46536A);
  --bs-btn-border-color: var(--glass-border, rgba(29, 58, 94, 0.10));
  --bs-btn-hover-color: var(--text-heading, #1D3A5E);
  --bs-btn-hover-bg: rgba(5, 87, 231, 0.06);
  --bs-btn-hover-border-color: var(--glass-border, rgba(29, 58, 94, 0.10));
  --bs-btn-active-color: var(--text-heading, #1D3A5E);
  --bs-btn-active-bg: rgba(5, 87, 231, 0.10);
  --bs-btn-active-border-color: var(--glass-border, rgba(29, 58, 94, 0.10));
  background: transparent;
}

/* Constant-navy headers (public .navbar-dark brand bar + the auth
   topbar) stay navy in BOTH themes, so the token text ramp (dark text
   in light mode) would vanish there. Keep the white-on-navy treatment
   those bars' other buttons use. */
.navbar-dark .wasla-help-toggle,
.wasla-auth-topbar .wasla-help-toggle {
  --bs-btn-color: #F4F6F9;
  --bs-btn-border-color: rgba(255, 255, 255, 0.45);
  --bs-btn-hover-color: #1D3A5E;
  --bs-btn-hover-bg: #F4F6F9;
  --bs-btn-hover-border-color: #F4F6F9;
  --bs-btn-active-color: #1D3A5E;
  --bs-btn-active-bg: #E8ECF3;
  --bs-btn-active-border-color: #E8ECF3;
}

@media (max-width: 767.98px) {
  /* WCAG 2.5.5 minimum tap target on phones (matches cycle-4 a11y
     pattern applied to other navbar buttons). */
  .wasla-help-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Drawer body typography — scoped so help content is comfortable
   regardless of any global heading rhythm overrides. */
.wasla-help-drawer {
  width: 420px;
  max-width: 100vw;
}

/* Defensive: hide the drawer until Bootstrap's offcanvas JS adds
   `.show` (or the in-flight `.showing`). This guards against the
   case where Bootstrap CSS loads after our help.css, or the drawer
   markup ends up inside a flex container that breaks the
   `.offcanvas { visibility: hidden }` default. Without this, the
   drawer body leaks visibly into the page on every navigation. */
.wasla-help-drawer:not(.show):not(.showing) {
  visibility: hidden !important;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  /* On very narrow phones, fill the screen to avoid a half-modal
     that obscures content but doesn't reach the edges. */
  .wasla-help-drawer {
    width: 100vw;
  }
}

.wasla-help-drawer .offcanvas-body {
  font-size: 0.9375rem;
  line-height: 1.65;
}

.wasla-help-drawer .wasla-help-body h2,
.wasla-help-drawer .wasla-help-body h3,
.wasla-help-drawer .wasla-help-body h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.wasla-help-drawer .wasla-help-body h2 { font-size: 1.125rem; }
.wasla-help-drawer .wasla-help-body h3 { font-size: 1rem; font-weight: 600; }
.wasla-help-drawer .wasla-help-body h4 { font-size: 0.9375rem; font-weight: 600; }

.wasla-help-drawer .wasla-help-body p,
.wasla-help-drawer .wasla-help-body ul,
.wasla-help-drawer .wasla-help-body ol {
  margin-bottom: 0.875rem;
}

/* Cycle 24 Lane A: inline-code tint re-toned to v2 electric-blue
   #0557E7 at 8% (was legacy #1F4FD8 at 8%). Same recipe; v2 hue. */
.wasla-help-drawer .wasla-help-body code {
  background: rgba(5, 87, 231, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Inline code + pre blocks must always render LTR, even on RTL pages.
   Technical syntax like `/category/<slug>/` contains characters (<, >, /)
   that the Unicode bidirectional algorithm classifies as "neutrals" — in
   an RTL parent context they get visually reordered, so customers see
   garbled output like `/<category/<slug/.` instead of `/category/<slug>/`.
   `direction: ltr` + `unicode-bidi: isolate` forces the code's bidi
   context to LTR independent of the page direction. Applied to both the
   help body AND the test-scenarios block since both can contain inline
   code with technical syntax. */
.wasla-help-drawer code,
.wasla-help-drawer pre {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* Backdrop blur when the help drawer opens — the rest of the page
   gets a frosted-glass effect to focus attention on the drawer.
   Bootstrap's `.offcanvas-backdrop` is the dim overlay element that
   sits between the drawer and the page; `backdrop-filter` blurs
   whatever's behind it (the page content), and the existing semi-
   transparent black bg keeps the dim. Currently the help drawer is
   the only Bootstrap offcanvas in the app (the mobile sidebar uses
   a custom CSS-only collapsible), so this safely scopes to help. */
.offcanvas-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wasla-help-drawer .wasla-help-body a {
  color: var(--brand-primary, #0557E7);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wasla-help-drawer .wasla-help-scenarios ol {
  padding-inline-start: 1.25rem;
}

.wasla-help-drawer .wasla-help-scenarios li {
  margin-bottom: 0.5rem;
}

/* Dark mode — drawer follows the data-bs-theme attr the rest of
   the app uses, so most styling is automatic. Just tighten up the
   code-snippet bg which would otherwise read too pale on dark. */
[data-bs-theme="dark"] .wasla-help-drawer .wasla-help-body code {
  background: rgba(91, 138, 245, 0.18);
}