/* THE ANSWER BOX — quick answers drawn from the site's own FAQ page.
   No network call, no account, no third party. Colors and type come from style.css. */

/* THE HELP LAUNCHER (owner order 2026-09-29). One plain word, large and high-contrast on every
   ground the site has: a gold fill with navy letters (8.45:1) and a navy ring, so it stands out on the
   cream pages AND on the navy bands and the gate. A 52px-tall target (above the 44px minimum), fixed
   bottom-right and clear of a phone's home indicator (safe-area insets). */
.abx-open {
  position: fixed; z-index: 900;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5.5rem; min-height: 52px; padding: 0.75rem 1.4rem;
  border: 3px solid var(--ink-deep); border-radius: 999px;
  font-family: var(--sans); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1;
  color: var(--ink-deep); background: var(--gold-bright);
  box-shadow: 0 0 0 2px var(--navy-band-text), var(--shadow-2); cursor: pointer;
}
/* The page keeps room at its foot for the button, so the button never covers the page's last control
   (the door's "Continue to my read", a form's button); focus and in-page jumps stop clear of it too.
   The gate, which centres its few items in the full screen, has room already and is left as it is. */
html.abx-help-on { scroll-padding-bottom: calc(52px + 2.5rem); }
html.abx-help-on body:not(.gate-body) { padding-bottom: calc(52px + 2rem); }
.abx-open:hover { background: var(--navy-band-text); }
.abx-open:focus-visible { outline: 3px solid var(--ink-deep); outline-offset: 4px; }
.abx-open[hidden] { display: none; }

.abx-panel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 901;
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--parchment-deep); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.abx-panel[hidden] { display: none; }

.abx-head {
  padding: 0.85rem 1rem; background: var(--ink-deep); color: var(--navy-band-text);
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.abx-title { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.abx-note { margin: 0.2rem 0 0; font-family: var(--sans); font-size: 0.8rem; color: var(--navy-band-soft); }
.abx-close {
  margin-left: auto; flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--navy-band-text); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.abx-close:hover { background: rgba(255, 255, 255, 0.14); }
.abx-close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.abx-body { padding: 0.9rem 1rem 1rem; overflow-y: auto; font-family: var(--sans); font-size: 0.95rem; }
.abx-lead { margin: 0 0 0.6rem; color: var(--ink-soft); }

.abx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.abx-chip {
  border: 1px solid var(--parchment-deep); background: var(--parchment);
  color: var(--ink); border-radius: 999px; padding: 0.4rem 0.75rem;
  font: inherit; text-align: left; cursor: pointer;
}
.abx-chip:hover { border-color: var(--gold); background: var(--parchment-deep); }
.abx-chip:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.abx-answer { margin: 0; }
.abx-answer-q { margin: 0 0 0.4rem; font-family: var(--serif); font-size: 1.05rem; font-weight: 700; }
.abx-answer-a { margin: 0; white-space: pre-line; }
.abx-more { margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--parchment-deep); }
.abx-more-lead { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.abx-link {
  display: inline-block; margin-top: 0.7rem;
  color: var(--gold-deep); font-weight: 600; text-underline-offset: 3px;
}

.abx-form { display: flex; gap: 0.4rem; padding: 0.75rem 1rem; border-top: 1px solid var(--parchment-deep); background: var(--parchment); }
.abx-input {
  flex: 1 1 auto; min-width: 0; padding: 0.6rem 0.7rem;
  border: 1px solid var(--parchment-deep); border-radius: var(--radius);
  font: inherit; font-family: var(--sans); color: var(--ink); background: var(--cream);
}
.abx-input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.abx-send {
  flex: none; padding: 0.6rem 0.9rem; border: 0; border-radius: var(--radius);
  background: var(--gold); color: #24170A; font: inherit; font-weight: 700; cursor: pointer;
}
.abx-send:hover { background: var(--gold-bright); }
.abx-send:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 30rem) {
  .abx-panel { right: 0.5rem; left: 0.5rem; bottom: 0.5rem; width: auto; max-height: calc(100vh - 1rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .abx-panel { animation: abx-rise 160ms ease-out; }
  @keyframes abx-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media print { .abx-open, .abx-panel { display: none !important; } }