/* ---------------------------------------------------------------------------
   ask — the inbound panel
   Source of truth for the form: DESIGN.md (type + CTA roles) and the Paper file
   `landing` for the material. Everything here is scoped under .ask so the
   landing's stylesheet stays untouched.

   Why a modal and not an inline panel: the three asks live inside .pane--row,
   which is `overflow: clip` and, from 1024 up, locked to the band height
   (--band-h). A panel expanding in there is either clipped or it breaks the
   band format DESIGN.md calls law — and the pane above it is `position: sticky`,
   so growing a section mid-scroll drags the pin. A <dialog> renders in the top
   layer, above every sticky pane and above the bandeau, and it costs nothing:
   the browser brings the focus trap, Escape, and inertness with it.

   The panel is navy: the page's own inversion. It arrives over a white sheet
   (dataset, deployment) or over the navy contact, and either way it reads as a
   different material, never as a box drawn on top.
   --------------------------------------------------------------------------- */

.ask {
  width: min(560px, calc(100vw - 2 * var(--page-inset)));
  max-width: 100%;
  max-height: min(92svh, 820px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink);
  overflow: visible;
}

/* Discrete-property transition: the dialog fades and rises in, and the browser
   keeps it in the top layer for the length of the exit. */
.ask,
.ask::backdrop {
  transition:
    opacity 220ms ease,
    translate 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
    overlay 260ms allow-discrete,
    display 260ms allow-discrete;
}

.ask {
  opacity: 0;
  translate: 0 14px;
}

.ask[open] {
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .ask[open] {
    opacity: 0;
    translate: 0 14px;
  }
}

/* The scrim matches the burger menu's, so the page dims the same way whichever
   overlay is open. Grain over it: no bare fill on this brand, backdrops
   included. */
.ask::backdrop {
  opacity: 0;
  background-color: rgb(10 36 104 / 82%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ask[open]::backdrop { opacity: 1; }

@starting-style {
  .ask[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ask,
  .ask::backdrop {
    transition: opacity 1ms linear, overlay 1ms allow-discrete, display 1ms allow-discrete;
    translate: none;
  }
  .ask[open] { translate: none; }
}

/* ---------------------------------------------------------------------------
   the ground — the same three veils the contact band carries: a cobalt wash so
   the navy is never uniform, a blueprint grid, and grain over everything.
   --------------------------------------------------------------------------- */
.ask__panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow: hidden;
  background-color: var(--color-paper);
  outline: 1px solid rgb(255 255 255 / 20%);
  outline-offset: -1px;
}

.ask__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the wash: a cobalt light in the top-right corner, as on the contact band */
.ask__veil--wash {
  z-index: -1;
  background-image: radial-gradient(
    ellipse 68% 62% at 88% 8% in oklab,
    oklab(45% -0.02 -0.14 / 42%) 0%,
    oklab(45% -0.02 -0.14 / 0%) 74%
  );
}

/* the blueprint grid, one module (24px). Masked out toward the foot so it
   never sits behind the plate. It is a texture, not a set of lines to read. */
.ask__veil--grid {
  z-index: -1;
  background-image:
    repeating-linear-gradient(to right, rgb(255 255 255 / 5%) 0 1px, transparent 1px var(--spacing-6)),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 5%) 0 1px, transparent 1px var(--spacing-6));
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 68%);
}

.ask__veil--grain {
  z-index: 3;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   head
   --------------------------------------------------------------------------- */
.ask__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3.33vw, 40px) 0;
}

/* Section title role: mono 700 at 32, never larger. */
.ask__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 4vw, var(--text-lg));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-lead);
  color: var(--color-ink);
}

/* the close mirrors the burger: same 48 square, same hairline, and it inverts
   to a chalk plate on hover the way the open burger does */
.ask__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -6px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background-color: transparent;
  color: var(--color-ink);
  outline: 1px solid rgb(255 255 255 / 34%);
  outline-offset: -1px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.ask__close:hover,
.ask__close:focus-visible {
  background-color: var(--color-ink);
  color: var(--color-paper);
  outline-color: var(--color-ink);
}

/* the note: mono carries the argument, per the two-family system */
.ask__note {
  margin: var(--spacing-4) 0 0;
  padding: 0 clamp(24px, 3.33vw, 40px);
  max-width: 54ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 26px;
  color: var(--color-ground);
}

/* ---------------------------------------------------------------------------
   body
   --------------------------------------------------------------------------- */
.ask__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 24px) clamp(24px, 3.33vw, 40px) var(--spacing-6);
}

.ask__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* UI caps role: mono 13, medium, uppercase, +0.14em */
.ask__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: rgb(244 247 255 / 58%);
  transition: color 160ms ease;
}

.ask__optional {
  text-transform: none;
  letter-spacing: 0;
  color: rgb(244 247 255 / 34%);
}

/* The underline is the control's affordance, not a separator: it says "you can
   type on this line". Nothing here divides two pieces of content. */
.ask__input,
.ask__select,
.ask__textarea {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--spacing-2) 0;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
  border-radius: var(--radius-none);
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 28px;
  color: var(--color-ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ask__input,
.ask__select { height: 44px; }

.ask__textarea {
  min-height: 80px;
  resize: vertical;
  padding-bottom: var(--spacing-3);
}

.ask__input::placeholder,
.ask__textarea::placeholder { color: rgb(244 247 255 / 26%); }

.ask__input:hover,
.ask__select:hover,
.ask__textarea:hover { border-bottom-color: rgb(255 255 255 / 50%); }

/* focus: the line goes to full chalk and its label lights up with it. No box
   grows, no colour appears. */
.ask__input:focus-visible,
.ask__select:focus-visible,
.ask__textarea:focus-visible {
  outline: 0;
  border-bottom: 2px solid var(--color-ink);
  padding-bottom: calc(var(--spacing-2) - 1px);
}

.ask__textarea:focus-visible { padding-bottom: calc(var(--spacing-3) - 1px); }

.ask__field:focus-within .ask__label { color: var(--color-ink); }

/* error: the field fills with material. That is what separates it from focus —
   a lit line means "you are here", a filled field means "this one is wrong".
   No red, no signal yellow: the brand has an inversion, not a palette. */
.ask__input[aria-invalid="true"],
.ask__select[aria-invalid="true"],
.ask__textarea[aria-invalid="true"] {
  background-color: rgb(255 255 255 / 9%);
  border-bottom-color: var(--color-ink);
}

.ask__error {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--color-ink);
}

.ask__error[hidden] { display: none; }

/* the select keeps the same line as the inputs; the chevron is drawn in chalk
   so the control never falls back to system chrome */
.ask__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--spacing-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23F4F7FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}

/* the popup is OS chrome; give it the brand's two colours so it is legible */
.ask__select option {
  background-color: var(--color-paper);
  color: var(--color-ink);
}

/* the honeypot. Off-canvas rather than display:none — a bot that skips hidden
   inputs still fills this one, which is the whole point. */
.ask__pot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   the alert — the failure state, and the way out of it.
   Chalk plate with navy type: the inversion is the emphasis.
   --------------------------------------------------------------------------- */
.ask__alert {
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.ask__alert[hidden] { display: none; }

.ask__alert p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 28px;
  color: rgb(10 36 104 / 82%);
}

/* the way out: a signature link, navy on chalk, lifting on hover like every
   other section closer on this site */
.ask__fallback {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-3);
  margin-top: var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--color-paper);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ask__fallback span { font-size: 0.6em; }

.ask__fallback:hover,
.ask__fallback:focus-visible { transform: translateY(-4px); }

.ask__fallback:focus-visible {
  outline: 1px solid var(--color-paper);
  outline-offset: 8px;
}

/* ---------------------------------------------------------------------------
   foot — the Plate: the one primary action of a navy ground
   --------------------------------------------------------------------------- */
.ask__foot {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: 0 clamp(24px, 3.33vw, 40px) clamp(24px, 3.33vw, 32px);
}

/* .btn / .btn--solid come from styles.css so the plate keeps one definition
   across the site; a <button> only needs the element reset on top. */
.ask__submit {
  border: 0;
  cursor: pointer;
  width: 192px;
  max-width: 100%;
  flex-shrink: 0;
}

.ask__submit:disabled {
  cursor: progress;
  background-color: rgb(244 247 255 / 62%);
}

.ask__submit:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 6px;
}

.ask__status {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: rgb(244 247 255 / 52%);
}

/* ---------------------------------------------------------------------------
   states — driven by data-state on the dialog
   --------------------------------------------------------------------------- */
.ask__done {
  display: none;
  padding: clamp(24px, 3.33vw, 32px) clamp(24px, 3.33vw, 40px) clamp(32px, 4vw, 48px);
}

.ask[data-state="sent"] .ask__body,
.ask[data-state="sent"] .ask__foot,
.ask[data-state="sent"] .ask__note { display: none; }

.ask[data-state="sent"] .ask__done { display: block; }

.ask__done-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 4vw, var(--text-lg));
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-lead);
  color: var(--color-ink);
}

.ask__done-line:focus-visible {
  outline: 1px solid var(--color-ink);
  outline-offset: 10px;
}

.ask__done-note {
  margin: var(--spacing-4) 0 0;
  max-width: 44ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 28px;
  color: var(--color-ground);
}

@media (prefers-reduced-motion: reduce) {
  .ask__close,
  .ask__fallback,
  .ask__input,
  .ask__select,
  .ask__textarea,
  .ask__label { transition: none; }
  .ask__fallback:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   small screens — the panel becomes the screen. A centred card at 390 leaves
   a 24px gutter of scrim on each side and the textarea has nowhere to go.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .ask {
    width: 100vw;
    max-width: 100vw;
    max-height: 100svh;
    height: 100svh;
    margin: 0;
  }

  .ask__panel {
    height: 100%;
    max-height: none;
    outline: 0;
  }

  /* full-bleed sheet: clear the notch and the home indicator */
  .ask__head { padding-top: max(20px, env(safe-area-inset-top)); }
  .ask__body { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .ask__foot { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

  .ask__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
  }

  .ask__submit { width: 100%; }

  .ask__status { text-align: center; }
}

/* On a short landscape phone the panel would otherwise have no room to
   scroll its own body. */
@media (max-height: 480px) {
  .ask {
    max-height: 100svh;
    height: 100svh;
    margin: 0 auto;
  }
  .ask__panel { height: 100%; max-height: none; }
}