/* =============================================================================
   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);
  animation: ask-thinking 1.4s ease-in-out infinite;
}

@keyframes ask-thinking {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ask-turn__a--pending {
    animation: none;
  }
}

.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,
.ask-enquiry__policy a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Starter questions: shown in the empty state, hidden with the first turn. */
.ask-chat__starters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.ask-chat__starters[hidden],
.ask-chat__bar[hidden] {
  display: none;
}

.ask-chat__starter,
.ask-chat__reset {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  overflow-wrap: anywhere;
}

.ask-chat__starter:hover:not(:disabled),
.ask-chat__reset:hover {
  color: var(--ink-strong);
  border-color: var(--line-strong);
  background: var(--surface-inset);
}

.ask-chat__bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  padding: var(--space-xs) var(--space-md) 0;
}

.ask-chat__reset {
  min-height: 2.75rem;
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

/* "From these pages": the sources of a written answer, folded until asked for. */
.ask-turn__from,
.ask-turn__more {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-caption);
}

.ask-turn__from-summary {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 2.75rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.ask-turn__from-summary::after {
  content: "+";
  margin-left: 0.5rem;
}

details[open] > .ask-turn__from-summary::after {
  content: "\2212";
}

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

.ask-turn__from .ask-turn__sources {
  margin-top: 0;
}

/* -----------------------------------------------------------------------------
   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__cta {
  margin: 0.5rem 0 0;
}

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

/* A text button, not a box: the form is not on the page until it is asked for. */
.ask-enquiry__open,
.ask-enquiry__later {
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  background: transparent;
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  touch-action: manipulation;
}

.ask-enquiry__open {
  margin-left: -0.75rem; /* the text lines up with the answer above it; the 44px target stays */
}

.ask-enquiry__later {
  border-color: var(--line);
  text-decoration: none;
}

.ask-enquiry__open:hover,
.ask-enquiry__later:hover,
.ask-enquiry__close:hover {
  background: var(--surface-inset);
}

.ask-enquiry__open:focus-visible,
.ask-enquiry__later:focus-visible,
.ask-enquiry__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ask-enquiry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0 0.75rem;
}

.ask-enquiry__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.ask-enquiry__close {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.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);
}

/* ---- the chat collects an email, then shows the "Send this to Michael?" card ------------------ */
.ask-collect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.ask-collect[hidden],
.ask-collect [hidden],
.ask-card[hidden],
.ask-card [hidden] {
  display: none;
}

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

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

.ask-card__subject {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

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

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

.ask-card__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body-sm);
}

.ask-card__list dt {
  color: var(--ink-muted);
}

.ask-card__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

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

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