/* Ask Barform on the website — linked only while it's live (src/_data/ask.js), after site.css on the
   landing and legal pages and after docs.css on the docs. Two parts:

   1. The public assistant's button and panel (src/_includes/ask-widget.njk, src/js/ask.js). The
      panel reads --w-* tokens, mapped from the page's own: data-host="site" → the site's dark
      palette; data-host="docs" → the docs' tokens, so it follows their light/dark theme. The closed
      button is the same quiet dark pill everywhere, with the brass roundel (CLAUDE.md rule 4).
      Small text and placeholders use the muted tokens in the dark: faint is under 4.5:1 on the dark
      panel and fields (the typing dots only).
   2. The landing section and its replay of the back-office panel (src/_includes/ask-showcase.njk). */

/* ── 1. The public assistant ───────────────────────────── */
.ask-w {
  --w-bg: var(--bg1, #1E1A14);
  --w-surface: var(--bg2, #282218);
  --w-sunken: var(--bg0, #15120D);
  --w-line: var(--line, #383024);
  --w-line-strong: #4A4030;
  --w-text: var(--cream, #F3EDDF);
  --w-muted: var(--muted, #B3A78F);
  --w-faint: var(--faint, #8C8168);
  --w-placeholder: var(--muted, #B3A78F); /* faint is under 4.5:1 on the dark fields */
  --w-accent: var(--brass, #E0A93E);
  --w-accent-line: rgba(224, 169, 62, .45);
  --w-ok: #7BC98A;
  --w-err: #E07A5F;
  --w-focus: #E0A93E;
  --w-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  font-family: "Hanken", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* The docs, dark theme (their default) */
.ask-w[data-host="docs"] {
  --w-bg: var(--surface);
  --w-surface: var(--sunken);
  --w-sunken: var(--bg);
  --w-line: var(--line);
  --w-line-strong: var(--line-strong);
  --w-text: var(--text);
  --w-muted: var(--muted);
  --w-faint: var(--faint);
  --w-placeholder: var(--muted);
  --w-accent: var(--accent);
  --w-accent-line: var(--accent-line);
  --w-err: var(--warn);
  --w-focus: var(--accent);
  --w-shadow: var(--shadow);
}
/* The docs, light theme: the panel is paper, like the page */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ask-w[data-host="docs"] {
    --w-bg: var(--bg);
    --w-surface: var(--surface);
    --w-sunken: var(--sunken);
    --w-placeholder: var(--faint);
    --w-ok: #256B42;
  }
}
:root[data-theme="light"] .ask-w[data-host="docs"] {
  --w-bg: var(--bg);
  --w-surface: var(--surface);
  --w-sunken: var(--sunken);
  --w-placeholder: var(--faint);
  --w-ok: #256B42;
}

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

/* Closed: the quiet dark pill, bottom right — smaller than the waitlist button */
.ask-pill {
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 7px 14px 7px 8px;
  border: 1px solid #4A4030; border-radius: 999px;
  background: #1E1A14; color: #F3EDDF;
  font: 700 14px/1 "Hanken", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease, border-color .12s ease;
}
.ask-pill[hidden] { display: none; }
.ask-pill:hover { border-color: #A87716; }
.ask-pill:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 3px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 0 3px rgba(224, 169, 62, .35); }
.ask-roundel, .ask-head .ask-roundel {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: #E0A93E; color: #15120D;
  font-weight: 800; font-size: 15px; line-height: 1;
}
.ask-chip {
  font: 700 10px/1 "Hanken", ui-sans-serif, system-ui, sans-serif; letter-spacing: .1em;
  color: #E0A93E; border: 1px solid #A87716; border-radius: 999px; padding: 3px 6px;
}
.ask-pill-short { display: none; }
@media (max-width: 600px) {
  .ask-pill-long { display: none; }
  .ask-pill-short { display: inline; }
}
/* On the landing, out of the way until the hero is scrolled past; hidden while the panel is open */
.ask-w.is-tucked .ask-pill { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.ask-w.is-open .ask-pill { display: none; }

/* Open: docked at the bottom right on a computer; the whole screen on a phone (.is-full) */
.ask-panel {
  position: fixed; z-index: 46;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px));
  height: min(664px, calc(100vh - 96px));
  height: min(664px, calc(100dvh - 96px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--w-bg); color: var(--w-text);
  border: 1px solid var(--w-line); border-radius: 18px;
  box-shadow: var(--w-shadow);
  font-size: 14.5px; line-height: 1.5; text-align: left;
}
.ask-panel[hidden] { display: none; }
.ask-panel.is-full {
  inset: 0; z-index: 90;
  width: auto; height: auto;
  border: 0; border-radius: 0; box-shadow: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.ask-lock, html.ask-lock body { overflow: hidden; }
.ask-panel :focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }

.ask-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--w-line); }
.ask-titles { display: grid; gap: 1px; min-width: 0; }
.ask-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.ask-title .ask-chip { color: var(--w-accent); border-color: var(--w-accent); }
.ask-sub { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--w-muted); }
.ask-x {
  margin-left: auto; flex: none;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--w-line); border-radius: 10px;
  background: transparent; color: var(--w-muted); cursor: pointer;
}
.ask-x:hover { color: var(--w-text); border-color: var(--w-line-strong); }
.ask-x svg { width: 16px; height: 16px; }

.ask-note { margin: 0; padding: 9px 14px; font-size: 12.5px; line-height: 1.45; color: var(--w-muted); background: var(--w-sunken); border-bottom: 1px solid var(--w-line); }

.ask-log {
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: var(--w-line-strong) transparent;
}
.ask-log:focus-visible { outline-offset: -3px; }
.ask-sugs { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-sug {
  font: inherit; font-size: 13px; line-height: 1.3; text-align: left;
  color: var(--w-text); background: transparent;
  border: 1px solid var(--w-line-strong); border-radius: 999px;
  padding: 7px 11px; min-height: 34px; cursor: pointer;
}
.ask-sug:hover { border-color: var(--w-accent); }

.ask-q {
  align-self: flex-end; max-width: 86%;
  margin: 0; padding: 9px 12px;
  background: var(--w-surface); border: 1px solid var(--w-line);
  border-radius: 14px 14px 4px 14px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.ask-a { display: grid; gap: 10px; overflow-wrap: anywhere; }
.ask-md { display: grid; gap: 8px; }
.ask-md p, .ask-md ul, .ask-md ol { margin: 0; }
.ask-md ul, .ask-md ol { padding-left: 20px; display: grid; gap: 4px; }
.ask-md strong { font-weight: 700; }
.ask-a a, .ask-state a, .ask-print a {
  color: var(--w-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.ask-srcs { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-a .ask-src {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; line-height: 1.3; color: var(--w-muted);
  border: 1px solid var(--w-line-strong); border-radius: 8px; padding: 6px 9px;
  background: var(--w-bg); text-decoration: none;
}
.ask-a .ask-src:hover { color: var(--w-text); border-color: var(--w-accent); }
.ask-src svg { width: 14px; height: 14px; flex: none; color: var(--w-accent); }

.ask-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.ask-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--w-faint); animation: ask-blink 1.2s infinite both; }
.ask-dots i:nth-child(2) { animation-delay: .2s; }
.ask-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* When it can't answer: the message, then help search */
.ask-state {
  display: grid; gap: 10px; justify-items: start;
  padding: 12px 14px; border: 1px solid var(--w-line); border-left: 3px solid var(--w-accent); border-radius: 10px;
  background: var(--w-sunken);
}
.ask-state[data-code="budget"], .ask-state[data-code="error"] { border-left-color: var(--w-err); }
.ask-state p { margin: 0; }
.ask-act {
  display: inline-flex; align-items: center; min-height: 36px;
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--w-text); background: var(--w-bg);
  border: 1px solid var(--w-line-strong); border-radius: 9px; padding: 7px 12px; cursor: pointer;
}
.ask-act:hover { border-color: var(--w-accent); }
.ask-state .ask-act { color: var(--w-text); text-decoration: none; } /* on the landing it is a link to the docs */

/* The waitlist card (posts to /api/waitlist/ with source "ask") */
.ask-card {
  display: grid; gap: 8px;
  padding: 12px; border: 1px solid var(--w-line-strong); border-radius: 12px;
  background: var(--w-surface);
}
.ask-card p { margin: 0; }
.ask-card-title { font-size: 14px; font-weight: 700; }
.ask-card-body { font-size: 12.5px; color: var(--w-muted); }
.ask-card input:not(.ask-hp) {
  width: 100%; min-width: 0;
  font: 500 16px "Hanken", ui-sans-serif, system-ui, sans-serif;
  color: var(--w-text); background: var(--w-bg);
  border: 1px solid var(--w-line-strong); border-radius: 9px; padding: 9px 10px;
}
.ask-card input::placeholder { color: var(--w-placeholder); opacity: 1; }
.ask-card input:focus { outline: none; border-color: var(--w-accent); box-shadow: 0 0 0 3px var(--w-accent-line); }
.ask-card-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ask-card-row input:not(.ask-hp) { flex: 1 1 150px; width: auto; }
.ask-btn {
  border: 0; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #F2C05C, #E0A93E 55%, #A87716 145%); color: #15120D;
  font: 700 13.5px/1 "Hanken", ui-sans-serif, system-ui, sans-serif;
  padding: 11px 13px; border-radius: 9px; min-height: 40px;
}
.ask-btn:disabled { opacity: .6; cursor: default; }
.ask-card-msg { font-size: 13px; font-weight: 600; }
.ask-card-msg:empty { display: none; }
.ask-card-msg.is-ok { color: var(--w-ok); }
.ask-card-msg.is-err { color: var(--w-err); }
.ask-card.is-sent input:not(.ask-hp), .ask-card.is-sent .ask-card-row, .ask-card.is-sent .ask-card-body { display: none; }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The question box and the fine print */
.ask-foot { margin: 0; border-top: 1px solid var(--w-line); padding: 10px 12px 12px; display: grid; gap: 7px; }
.ask-field {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--w-surface); border: 1px solid var(--w-line-strong); border-radius: 12px;
  padding: 6px 6px 6px 12px;
}
.ask-field:focus-within { border-color: var(--w-accent); box-shadow: 0 0 0 3px var(--w-accent-line); }
.ask-field textarea {
  flex: 1; min-width: 0; max-height: 132px; resize: none;
  border: 0; outline: none; background: transparent; color: var(--w-text);
  font: 400 16px/1.4 "Hanken", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 7px 0;
}
.ask-field textarea::placeholder { color: var(--w-placeholder); opacity: 1; }
/* the field's ring is the focus indicator */
.ask-field textarea:focus, .ask-field textarea:focus-visible { outline: none; }
.ask-field textarea:disabled { cursor: not-allowed; }
.ask-send {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: #E0A93E; color: #15120D; cursor: pointer;
}
.ask-send svg { width: 16px; height: 16px; }
.ask-send:disabled { opacity: .45; cursor: default; }
.ask-print { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; line-height: 1.4; color: var(--w-muted); }

@media print {
  .ask-w { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-dots i { animation: none; opacity: .6; }
  .ask-pill, .ask-w.is-tucked .ask-pill { transition: none; transform: none; }
}

/* ── 2. The landing section (site.css tokens; always dark) ── */
.nav-links .nav-new { color: var(--cream); position: relative; }
.nav-links .nav-new::after { content: ""; position: absolute; right: -9px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }

.ask-show {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 52px; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 72px 24px 80px;
  border-top: 1px solid var(--line);
  background: radial-gradient(520px 320px at 82% 45%, rgba(224, 169, 62, .075), transparent 70%);
}
.ask-show h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.ask-show-lead { color: var(--muted); font-size: 17px; margin-top: 14px; max-width: 50ch; }
.ask-show-lead q { color: var(--cream); quotes: "“" "”"; }
.ask-points { list-style: none; display: grid; gap: 14px; margin-top: 26px; max-width: 52ch; }
.ask-points li { display: grid; gap: 2px; }
.ask-points b { font-weight: 700; font-size: 16px; }
.ask-points b::before { content: "— "; color: var(--brass); }
.ask-points span { color: var(--muted); font-size: 15px; padding-left: 1.15em; }
.ask-show .ask-fine { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 13px; color: var(--muted); }
.ask-show .ask-fine li { display: inline-flex; align-items: center; gap: 8px; }
.ask-show .ask-fine li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brass-deep); flex: none; }
.ask-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.ask-demo-link { font-weight: 600; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.ask-demo-link:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* The replay: the back office's panel, drawn in HTML. The three examples share one grid cell, so the
   panel is as tall as the longest and never jumps when it moves on. */
.ask-replay { min-width: 0; }
.rp {
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  background: var(--bg1); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  font-size: 14px; line-height: 1.55;
}
.rp-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.rp-roundel { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brass); color: var(--bg0); font-weight: 800; font-size: 13px; line-height: 1; }
.rp-title { display: grid; gap: 1px; min-width: 0; }
.rp-title b { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rp-title small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rp-chip { font: 700 10px/1 "Hanken", sans-serif; letter-spacing: .1em; color: var(--brass); border: 1px solid var(--brass-deep); border-radius: 999px; padding: 4px 7px; }
.rp-tag { margin-left: auto; font: 600 10.5px/1.2 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; color: #7BA8C9; border: 1px dashed rgba(123, 168, 201, .55); border-radius: 7px; padding: 5px 7px; text-align: center; white-space: nowrap; }
.rp-tag span { display: block; }
.rp-body { display: grid; padding: 16px; }
.rp-ex { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; }
.rp-ex.is-on { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.rp-q { justify-self: end; max-width: 86%; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 9px 12px; }
.rp-a { display: grid; gap: 10px; }
.rp-a ol { padding-left: 20px; display: grid; gap: 4px; }
.rp-a strong { font-weight: 700; }
.rp-fig { background: var(--bg0); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rp-range { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.rp-range::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); flex: none; }
.rp-fig table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rp-fig td { padding: 7px 12px; border-bottom: 1px solid rgba(56, 48, 36, .7); }
.rp-fig tr:last-child td { border-bottom: 0; }
.rp-fig td.n { text-align: right; color: var(--muted); width: 3.5em; white-space: nowrap; }
.rp-fig td.m { text-align: right; font-weight: 700; width: 7em; white-space: nowrap; }
.rp-fig tr.sum td { font-weight: 800; }
.rp-fig small { color: var(--muted); font-size: 11.5px; }
.rp-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--brass); border: 1px solid var(--brass-deep); border-radius: 10px; padding: 7px 11px; }
.rp-src { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.rp-go svg, .rp-src svg { width: 14px; height: 14px; flex: none; }
.rp-foot { border-top: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 8px; }
.rp-field { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; color: var(--muted); font-size: 14px; min-height: 46px; }
.rp-send { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--brass); color: var(--bg0); display: grid; place-items: center; flex: none; }
.rp-send svg { width: 15px; height: 15px; }
.rp-quota { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.rp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.rp-steps { display: flex; gap: 6px; flex: none; }
.rp-steps[hidden] { display: none; }
.rp-steps button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #4A4030; background: transparent; font: 700 12px/1 "Hanken", sans-serif; color: var(--muted); cursor: pointer; }
.rp-steps button[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--bg0); }
.rp-steps button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rp-ex, .rp-ex.is-on { transition: none; }
}
@media (max-width: 900px) {
  .ask-show { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 56px 24px 64px; }
}
@media (max-width: 560px) {
  .ask-show { padding: 44px 18px 52px; }
  /* the demo tag drops under the title, on one line */
  .rp-head { flex-wrap: wrap; row-gap: 8px; }
  .rp-tag { order: 3; margin-left: 34px; white-space: normal; text-align: left; }
  .rp-tag span { display: inline; }
  .rp-tag span + span::before { content: " · "; }
  .rp-body { padding: 14px 12px; }
  .rp-fig td { padding: 7px 10px; }
  .rp-meta { align-items: flex-start; }
}