/* =============================================================================
   css/ask.css — the "Ask" assistant (header button, mobile tab, dialog, /ask/).

   Published unless the build runs with ASK_ENABLED=0 (build/ask_flag.py; on by default);
   css/global.css is untouched, so an ASK_ENABLED=0 site is byte-identical to before.
   Colour, type and radius all come from the tokens in global.css, which means the
   light and dark themes need no rules of their own here. Loaded straight after
   global.css (ref/ask.html, head-css).
   ========================================================================== */

/* No JavaScript, no assistant: the triggers do nothing without ask.js, so they are
   not offered. theme.js adds .js to <html> before first paint. */
html:not(.js) .ask-trigger,
html:not(.js) .nav__item--ask {
  display: none;
}

/* -----------------------------------------------------------------------------
   1. Triggers
   -------------------------------------------------------------------------- */
.ask-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  background: transparent;
  border: var(--hair) solid var(--line-hair);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

.ask-trigger:hover {
  color: var(--ink-strong);
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

.ask-trigger__icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
}

/* Phones get the tab in the bottom bar instead; the header keeps wordmark + theme. */
@media (max-width: 767px) {
  .ask-trigger {
    display: none;
  }
}

/* The bottom-bar tab. Tablet and desktop use the header button. */
.nav__item--ask {
  display: none;
}

@media (max-width: 767px) {
  .nav__item--ask {
    display: block;
  }

  /* Same box and type as ".nav a" in global.css, for a <button>. */
  .nav .nav__ask {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-height: 3.25rem;
    margin: 0;
    padding: 0.4rem 0.125rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav .nav__ask:focus-visible {
    outline-offset: -2px;
  }

  .nav .nav__ask:active {
    background: var(--surface-inset);
  }
}

@media (max-width: 359px) {
  .nav .nav__ask {
    font-size: 0.5625rem;
    letter-spacing: -0.01em;
    padding-inline: 0.0625rem;
  }
}

/* -----------------------------------------------------------------------------
   2. The dialog: right-hand panel (tablet, desktop), bottom sheet (phone)
   -------------------------------------------------------------------------- */

/* The page behind a modal does not scroll. --ask-sbw replaces the scrollbar's width
   so the page does not jump sideways when the scrollbar goes. */
html.ask-open {
  overflow: hidden;
  padding-right: var(--ask-sbw, 0px);
}

.ask-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: min(26.25rem, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: var(--hair) solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}

.ask-dialog:not([open]) {
  display: none;
}

.ask-dialog[open] {
  animation: ask-panel-in var(--dur-base) var(--ease-out-expo);
}

.ask-dialog::backdrop {
  background: rgba(8, 10, 14, 0.55);
}

html[data-theme="light"] .ask-dialog::backdrop {
  background: rgba(15, 19, 25, 0.32);
}

@keyframes ask-panel-in {
  from {
    transform: translateX(1.5rem);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes ask-sheet-in {
  from {
    transform: translateY(2rem);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.ask-dialog__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.ask-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: var(--hair) solid var(--line-hair);
}

.ask-dialog__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 400;
  line-height: 1.1;
}

.ask-dialog__sub {
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

.ask-dialog__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: var(--hair) solid var(--line-hair);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.ask-dialog__close:hover {
  color: var(--ink-strong);
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

/* Phone: a bottom sheet. It is 100dvh less the top safe-area inset; the home-indicator
   inset is padding inside it. While the on-screen keyboard is up, js/ask.js sets
   --ask-vvh and --ask-vvtop from visualViewport so the input stays above the keys. */
@media (max-width: 767px) {
  .ask-dialog {
    top: var(--ask-vvtop, env(safe-area-inset-top, 0px));
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: var(--ask-vvh, calc(100vh - env(safe-area-inset-top, 0px)));
    height: var(--ask-vvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    border-left: 0;
    border-top: var(--hair) solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .ask-dialog[open] {
    animation-name: ask-sheet-in;
  }

  .ask-dialog__head {
    padding: var(--space-sm) var(--space-sm) var(--space-xs) var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ask-dialog[open] {
    animation: none;
  }

  .ask-trigger {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   3. The conversation (shared by the dialog and /ask/)
   -------------------------------------------------------------------------- */
.ask-chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ask-chat__scroll {
  flex: 1 1 auto;
  min-height: 8rem;
  padding: var(--space-md);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ask-chat__empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-body-sm);
}

.ask-chat__empty[hidden] {
  display: none;
}

.ask-turn + .ask-turn {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--hair) solid var(--line-hair);
}

.ask-turn__q {
  margin: 0 0 var(--space-xs);
  color: var(--ink-strong);
  font-weight: 600;
  font-size: var(--text-body-sm);
  overflow-wrap: anywhere;
}

.ask-turn__a {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ask-turn__a--pending {
  color: var(--ink-muted);
}

.ask-turn__label {
  margin: var(--space-xs) 0 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ask-turn__sources {
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}

.ask-turn__sources li {
  margin: 0;
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.ask-turn__sources a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ask-turn__sources a:hover {
  color: var(--accent-strong);
}

.ask-turn__links {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-caption);
}

.ask-turn__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-right: var(--space-sm);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ask-chat__form {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: var(--hair) solid var(--line-hair);
  background: var(--surface-raised);
}

.ask-chat__row {
  display: flex;
  gap: var(--space-xs);
}

.ask-chat__field {
  flex: 1 1 auto;
  min-width: 0;
}

.ask-chat__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  background: var(--surface-inset);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-strong);
  font-family: var(--font-ui);
  /* 16px: anything smaller makes iOS Safari zoom the page when the field is focused. */
  font-size: 1rem;
}

.ask-chat__input::placeholder {
  color: var(--ink-faint);
}

.ask-chat__send {
  flex: 0 0 auto;
  min-width: 4.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--accent);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-on);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.ask-chat__send:hover:not(:disabled) {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.ask-chat__send:disabled {
  opacity: 0.55;
  cursor: progress;
}

.ask-chat__count,
.ask-chat__notice,
.ask-chat__policy {
  margin: var(--space-xs) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

.ask-chat__count {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  text-align: right;
}

.ask-chat__notice:empty {
  display: none;
}

.ask-chat__policy a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* -----------------------------------------------------------------------------
   4. /ask/ — the page, with the conversation inline
   -------------------------------------------------------------------------- */
.ask-page__facts {
  max-width: var(--measure);
  margin: var(--space-md) 0;
  padding-left: 1.1rem;
  color: var(--ink);
}

.ask-page__facts li + li {
  margin-top: var(--space-xs);
}

.ask-page__facts a,
.ask-nojs a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The inline conversation exists only once ask.js has taken it over. */
.ask-inline {
  display: none;
  max-width: 40rem;
  margin: var(--space-md) 0;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

html[data-ask="ready"] .ask-inline {
  display: block;
}

html[data-ask="ready"] .ask-nojs {
  display: none;
}

.ask-nojs {
  max-width: var(--measure);
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

.ask-inline .ask-chat__scroll {
  max-height: 28rem;
}

/* ---- the enquiry form inside the chat (posted by the browser to Web3Forms) ------------------- */
.ask-enquiry {
  /* Inside the scrolling conversation, so on a short phone sheet it scrolls with the answers. */
  margin: 0.75rem 0 0;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-card);
}

.ask-enquiry[hidden] {
  display: none;
}

.ask-enquiry__summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  cursor: pointer;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
}

.ask-enquiry__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ask-enquiry__form {
  display: grid;
  gap: 0.6rem;
  padding: 0 0.75rem 0.75rem;
}

.ask-enquiry__lede,
.ask-enquiry__policy,
.ask-enquiry__result {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.ask-enquiry__field {
  display: grid;
  gap: 0.25rem;
  color: var(--ink);
  font-size: var(--text-body-sm);
}

.ask-enquiry__field input,
.ask-enquiry__field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-inset);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: 1rem;
}

.ask-enquiry__field textarea {
  resize: vertical;
  min-height: 6rem;
}

.ask-enquiry__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.ask-enquiry__send {
  min-width: 4.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--accent);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-on);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  cursor: pointer;
}

.ask-enquiry__send:disabled {
  opacity: 0.55;
  cursor: progress;
}

.ask-enquiry__result.is-error {
  color: var(--danger, var(--ink-strong));
}

.ask-enquiry__result.is-success {
  color: var(--accent);
}