/* ask-widget.css — the floating "Ask" helper, identical on both sites. Colours come from the site's own tokens
   (both flip them by scheme and by the visitor's theme choice), with literal fallbacks; --askw-on-accent is
   --accent-ink, never #fff (1.9:1 in dark). Notes folded out: docs/THEME_1_2026_09_27.md §3. */

.askw-root {
  --askw-ink: var(--ink, #16181d);
  --askw-muted: var(--muted, #5d6470);
  --askw-surface: var(--surface, #ffffff);
  --askw-bg: var(--bg-alt, #f5f6f8);
  --askw-line: var(--line, #dfe2e8);
  --askw-edge: var(--line-strong, #8f887a);
  --askw-accent: var(--accent, #1a5fd0);
  --askw-on-accent: var(--accent-ink, #ffffff);
  --askw-hi: var(--accent-bg, #e4f0ec);
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  font-size: 0.9375rem; line-height: 1.5;
}

/* the launcher: bottom-right, opposite the top-left skip link; the mobile rule at the foot keeps the footer clear */
.askw-launch {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 650; color: var(--askw-on-accent); background: var(--askw-accent);
  border: 1px solid var(--askw-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.askw-launch:hover { filter: brightness(1.08); }
.askw-launch:focus-visible { outline: 3px solid var(--askw-accent); outline-offset: 3px; }
.askw-mark { flex: 0 0 auto; }
.askw-mark circle { fill: var(--askw-accent); }

/* A REAL backdrop behind a dialog that calls itself aria-modal — see ask-widget.js's own note. */
.askw-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(10, 12, 11, 0.32); }

.askw-panel {
  position: absolute; right: 0; bottom: 3.4rem; width: min(24rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 6rem)); display: flex; flex-direction: column;
  background: var(--askw-surface); color: var(--askw-ink);
  border: 1px solid var(--askw-edge); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); overflow: hidden;
}
/* ⚠️ THE CLOSED PANEL WAS NEVER CLOSED. Measured 2026-09-13 in a real Chromium, on TRUNK 2ba2de765 as
   well as here: `{panelHiddenAttr: true, panelDisplay: 'flex', panelHeightPx: 201}` on a page nobody had
   clicked. `ask-widget.js` sets `panel.hidden = true` and always has — but `[hidden] { display: none }`
   is a UA-stylesheet rule and ANY author `display` beats it at equal specificity, so the rule above
   painted the panel open over the content of 37 pages. The attribute was right and the JS was right;
   only the cascade was wrong, and no test looked at the computed style of a thing it believed hidden.
   Pinned by TestNothingMarkedHiddenIsActuallyRendered. Any [hidden]-toggled element that also sets
   `display` needs this same reset. */
.askw-panel[hidden] { display: none; }
.askw-head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.75rem 0.9rem 0.5rem; }
.askw-title { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.askw-sub { margin: 0; font-size: 0.8125rem; color: var(--askw-muted); }
/* .askw-wide is the Expand control; it shares this chrome and NOT this name (2026-09-22,
   lane PRODUCT-PAGES-1b): two buttons under one class called askw-close made the widget flow
   click Expand where it meant Close, and the panel never shut. */
.askw-close,
.askw-wide {
  margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit; font-size: 1.1rem;
  line-height: 1; padding: 0.15rem 0.35rem; color: var(--askw-muted); border-radius: 6px;
}
.askw-close:hover,
.askw-wide:hover { color: var(--askw-ink); background: var(--askw-bg); }
.askw-close:focus-visible,
.askw-wide:focus-visible { outline: 2px solid var(--askw-accent); outline-offset: 2px; }

.askw-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.askw-form { display: flex; gap: 0.4rem; padding: 0.6rem 0.9rem; }
.askw-form input {
  flex: 1; min-width: 0; padding: 0.5rem 0.6rem; font: inherit; color: var(--askw-ink);
  background: var(--askw-surface); border: 1px solid var(--askw-edge); border-radius: 7px;
}
.askw-form input:focus-visible { outline: 2px solid var(--askw-accent); outline-offset: 1px; }
.askw-form button {
  padding: 0.5rem 0.8rem; font: inherit; font-weight: 650; cursor: pointer; border-radius: 7px;
  color: var(--askw-on-accent); background: var(--askw-accent); border: 1px solid var(--askw-accent);
}
.askw-form button:focus-visible { outline: 3px solid var(--askw-accent); outline-offset: 2px; }

.askw-results { margin: 0; padding: 0 0.5rem 0.5rem; list-style: none; overflow-y: auto; flex: 1; }
.askw-results li { margin: 0 0 0.2rem; }
.askw-lead { padding: 0.1rem 0.55rem 0.35rem; }
.askw-hit {
  display: block; padding: 0.5rem 0.55rem; border-radius: 8px; text-decoration: none;
  color: var(--askw-ink); border: 1px solid transparent;
}
.askw-hit:hover { background: var(--askw-bg); border-color: var(--askw-line); }
.askw-hit:focus-visible { outline: 2px solid var(--askw-accent); outline-offset: 1px; }
.askw-hit b { display: block; font-weight: 650; }
.askw-hit span { display: block; font-size: 0.8125rem; color: var(--askw-muted); }
.askw-hit em { font-style: normal; font-size: 0.75rem; color: var(--askw-muted); }
/* a suggestion is an invitation, not a result — bordered so it does not read as an answer already found */
.askw-try { border-color: var(--askw-line); }
.askw-try b { font-weight: 500; }

/* the matched words, marked in the card they earned their place with. --askw-hi is the site's own
   --accent-bg, so the pair is the same AA-checked one the pages already use in both schemes. */
.askw-hit mark { background: var(--askw-hi); color: var(--askw-ink); border-radius: 3px; padding: 0 0.1em; }

.askw-note { margin: 0; padding: 0.45rem 0.9rem 0.8rem; font-size: 0.8125rem; color: var(--askw-muted);
             border-top: 1px solid var(--askw-line); }
.askw-note a { color: var(--askw-accent); }

@media (prefers-reduced-motion: no-preference) {
  .askw-panel { animation: askw-in 120ms ease-out; }
  @keyframes askw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* the launcher covers the footer's last line at 390px: pad the FOOTER (not the body), except where it is off */
@media (max-width: 30rem) {
  body:not([data-ask-launcher="off"]) .site-foot { padding-bottom: 4.5rem; }
}