/* "Search or ask" (ask.js), shared by /docs and the complete reference. It takes each page's own
   variables (--bg, --ink, --ink-soft, --line; the accent is --accent on /docs and --sel on the
   reference), so it reads as part of whichever page it's on, in either ground. The system's rules
   hold here too: no faint text, every control clears 44px on touch (36px with a mouse, over WCAG 2.2's
   24px), square corners for what you tap, the one focus ring, and the brand mark's own trace for "working". */
.ask-trigger, .ask-scrim {
  --ask-acc: var(--accent, var(--sel, #7E9BE0));
  --ask-line: var(--line-2, rgba(242,240,234,.22));
  --ask-hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --ask-on: color-mix(in srgb, var(--ask-acc) 18%, transparent);
}
.ask-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.ask-scrim svg, .ask-trigger svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ask-scrim kbd, .ask-trigger kbd { font: 11px/1 var(--mono); color: var(--ink-soft); border: 1px solid var(--ask-line); border-radius: 4px; padding: 3px 5px; }

/* ---------- the button in the top bar ---------- */
.ask-trigger { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 248px; padding: 0 9px 0 12px; border-radius: 10px;
  border: 1px solid var(--ask-line); background: var(--ask-hover); color: var(--ink-soft); font: 14px/1 var(--body); cursor: pointer; }
.ask-trigger svg { width: 18px; height: 18px; flex: none; }
.ask-trigger span { flex: 1; text-align: left; white-space: nowrap; }
.ask-trigger:hover { color: var(--ink); border-color: var(--ink-soft); }
@media (max-width: 900px) {
  .ask-trigger { min-width: 0; width: 44px; padding: 0; justify-content: center; border-radius: 12px; border-color: var(--line); background: none; }
  .ask-trigger span, .ask-trigger kbd { display: none; }
}
/* With a mouse, the top bar's controls share one desktop height: 36px, under the 44px touch floor
   and over WCAG 2.2's 24px minimum (2.5.8). Touch keeps 44px. */
@media (hover: hover) and (pointer: fine) {
  .ask-trigger { height: 36px; border-radius: 8px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
  .ask-trigger { width: 36px; border-radius: 8px; }
}

/* ---------- the dialog ---------- */
html.ask-open { overflow: hidden; }
.ask-scrim { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; background: rgba(10,14,34,.62); }
.ask-scrim[hidden] { display: none; }
.ask-dlg { position: relative; width: min(680px, 100%); max-height: min(720px, 80vh); display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--ink); border: 1px solid var(--ask-line); border-radius: 16px; box-shadow: 0 24px 80px rgba(10,14,34,.5);
  font: 15px/1.6 var(--body); text-align: left; }
.ask-dlg a { color: var(--ink); }
.ask-dlg :focus-visible { outline: 2px solid var(--ask-acc); outline-offset: 2px; }

.ask-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
.ask-bar:focus-within { border-bottom-color: var(--ink-soft); }
.ask-bar > svg { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.ask-bar input { flex: 1; min-width: 0; height: 58px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 17px var(--body); outline: none; }
.ask-bar input::placeholder { color: var(--ink-soft); opacity: 1; }
.ask-bar input:focus-visible { outline: none; }   /* the bar's rule darkens: its focus ring */
.ask-stop, .ask-close { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--ask-line); background: none; color: var(--ink); font: 14px/1 var(--body); cursor: pointer; }
.ask-stop[hidden] { display: none; }
.ask-stop::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.ask-close { border-color: transparent; color: var(--ink-soft); }
.ask-close svg { width: 18px; height: 18px; display: none; }
.ask-stop:hover, .ask-close:hover { background: var(--ask-hover); color: var(--ink); }

.ask-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; scroll-padding: 8px; }

/* ---------- the list: suggestions, then sections as you type ---------- */
.ask-list[hidden] { display: none; }
.ask-lbl { padding: 14px 12px 6px; font: 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ask-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.ask-opt[aria-selected="true"] { background: var(--ask-hover); }
.ask-msg { cursor: default; color: var(--ink-soft); font-size: 14px; }
.ask-msg[aria-selected="true"] { background: none; }
.ask-msg b { color: var(--ink); font-weight: 650; }
.ask-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-soft); }
.ask-ic svg { width: 18px; height: 18px; }
.ask-t { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.ask-t b { font-weight: 650; }
.ask-t b i { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.ask-hd { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ask-hd b { flex: none; }
.ask-hd i { font-style: normal; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-hd i::before { content: "› "; }
.ask-t code { font: 13px/1.4 var(--mono); background: var(--ask-hover); border-radius: 4px; padding: 1px 5px; }
.ask-ask .ask-t { display: block; align-self: center; }
.ask-ask q { font-weight: 650; }
.ask-snip { font-size: 14px; line-height: 1.45; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-snip mark { background: none; color: var(--ink); font-weight: 650; }
.ask-hint { flex: none; align-self: center; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink-soft); visibility: hidden; }
.ask-hint svg { width: 16px; height: 16px; }
.ask-opt[aria-selected="true"] .ask-hint { visibility: visible; }

/* the brand mark: the assistant answers in the system's own voice */
.ask-mk { width: 22px; height: 22px; }
.ask-mk .d { fill: var(--ink); stroke: none; }
.ask-mk .o circle { fill: var(--mark-dot, #9698A0); stroke: none; }
.ask-mk .t { fill: none; stroke: var(--bg); stroke-width: 3.9; stroke-linecap: round; stroke-linejoin: round; }
/* while it works, the hook draws and retracts: the mark's own draw, retract and pause (1400, 1000 and
   500ms), with a shorter hold so it reads as busy */
@media (prefers-reduced-motion: no-preference) {
  .ask-live .ask-mk .t { stroke-dasharray: 1 1; animation: ask-trace 3600ms cubic-bezier(.4, 0, .2, 1) infinite; }
  .ask-dlg { animation: ask-in 160ms ease-out; }
  .ask-caret { animation: ask-blink 1s steps(2, start) infinite; }
}
@keyframes ask-trace { 0% { stroke-dashoffset: 1; } 39% { stroke-dashoffset: 0; } 58% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: -1; } 100% { stroke-dashoffset: -1; } }
@keyframes ask-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ask-blink { to { visibility: hidden; } }

/* ---------- answers ---------- */
.ask-thread:empty { display: none; }
.ask-card { padding: 14px 8px 18px; border-bottom: 1px solid var(--line); }
.ask-q { margin: 0 0 12px 36px; font-weight: 650; font-size: 16px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.ask-a { display: flex; gap: 12px; align-items: flex-start; }
.ask-a > .ask-ic { margin-top: 1px; }
.ask-text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.ask-text p { margin: 0 0 10px; max-width: none; color: var(--ink); }
.ask-text p:last-child { margin-bottom: 0; }
.ask-text ul, .ask-text ol { margin: 0 0 10px; padding-left: 20px; }
.ask-text li { margin: 3px 0; color: var(--ink); }
.ask-text strong { font-weight: 700; }
.ask-text code { font: 13px/1.5 var(--mono); background: var(--ask-hover); border-radius: 4px; padding: 1px 5px; }
.ask-reading { color: var(--ink-soft) !important; }
.ask-flag { color: var(--ink-soft) !important; }
.ask-cite { position: relative; display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; margin: 0 1px; border-radius: 4px;
  font: 11px/1 var(--mono); vertical-align: 2px; text-decoration: none; color: var(--ink); background: var(--ask-on); }
.ask-cite::after { content: ""; position: absolute; inset: -12px -6px; }
.ask-cite:hover { background: var(--ask-acc); color: var(--bg); text-decoration: none; }
.ask-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: 1px; background: var(--ask-acc); }

.ask-more { padding-left: 36px; }
.ask-more:empty { display: none; }
.ask-src, .ask-local { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.ask-local { margin-top: 8px; }
.ask-src a, .ask-local a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line);
  font-size: 14px; line-height: 1.35; text-decoration: none; color: var(--ink); }
.ask-src a:hover, .ask-local a:hover { background: var(--ask-hover); border-color: var(--ask-line); text-decoration: none; }
.ask-src a span { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px; background: var(--ask-on); font: 11px/1 var(--mono); }
.ask-fu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-fu button { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ask-line); background: none; color: var(--ink);
  font: 14px/1.35 var(--body); text-align: left; cursor: pointer; }
.ask-fu button:hover { background: var(--ask-hover); }

.ask-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line);
  font: 12px/1.5 var(--body); color: var(--ink-soft); }
.ask-keys { white-space: nowrap; }
.ask-keys kbd { margin: 0 3px 0 0; }
.ask-keys kbd:not(:first-child):not(kbd + kbd) { margin-left: 8px; }
.ask-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line, always */

/* ---------- phones: the whole screen ---------- */
@media (max-width: 600px), (max-height: 520px) {
  .ask-scrim { padding: 0; background: var(--bg); }
  .ask-dlg { width: 100%; height: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
  .ask-bar { padding-top: env(safe-area-inset-top); padding-left: 12px; }
  .ask-close kbd { display: none; }
  .ask-close svg { display: block; }
  .ask-keys { display: none; }
  .ask-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .ask-card { padding-left: 4px; padding-right: 4px; }
  .ask-q { margin-left: 0; }
  .ask-more { padding-left: 0; }
}
@media (hover: none) { .ask-close kbd { display: none; } .ask-close svg { display: block; } .ask-keys { display: none; } }