/* Ask Handy AI: the question bar on the homepage, the header button, and the
   full-screen answer stage. Palette comes from the page's :root tokens; the
   site is dark-only, so there is no light variant here either. */

:root {
  --ask-ink: var(--text, #E6E6DE);
  --ask-muted: var(--text-secondary, #b8b8b0);
  --ask-bg: var(--background, #003F2E);
  --ask-card: var(--card-bg, #00543d);
  --ask-line: rgba(230, 230, 222, 0.14);
  --ask-line-strong: rgba(230, 230, 222, 0.28);
  --ask-accent: #8fe3b9;
  --ask-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* iOS sheet curve: quick to start, long soft landing. */
  --ask-ios: var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
  --ask-fold: 0.55s; /* FOLD_MS in ask.js */
}

/* ---------------------------------------------------------------- Header -- */

/* The header button is a .nav-pill from ui/shell.css; only its icon is ours. */
.ask-open svg { color: var(--ask-accent); }

/* ------------------------------------------------------------ Ask panel -- */

/* On the homepage the Ask bar sits in a panel under the featured story. */
.reader-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  /* A grid item sizes to its content's min-content by default, and the
     one-row suggestions would stretch it (and the phone layout) past the
     screen. */
  min-width: 0;
  margin: 0 auto;
  border-radius: var(--r-lg, 24px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(143, 227, 185, 0.08), rgba(143, 227, 185, 0) 55%),
    linear-gradient(180deg, rgba(230, 230, 222, 0.07), rgba(230, 230, 222, 0.035));
  box-shadow: 0 12px 34px rgba(0, 16, 11, 0.22);
}
/* The same 1px rim light as every surface in ui/shell.css. */
.reader-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim-soft, rgba(255, 255, 255, 0.1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.reader-panel .ask-home {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 16px 18px 18px;
}
.ask-home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 4px 12px;
}
.ask-home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12px/1 'Outfit', sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ask-accent);
}
.ask-home-kicker svg { width: 14px; height: 14px; }
/* The hand: a touch taller than the caps, standing on the baseline. */
.ask-home-kicker .hai-mark { height: 15px; margin-top: -2px; }
.ask-home-quota { font: 500 12.5px/1 'Outfit', sans-serif; color: var(--ask-muted); white-space: nowrap; }
.reader-panel .ask-bar {
  background: rgba(0, 30, 22, 0.42);
  border-color: rgba(230, 230, 222, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.reader-panel .ask-bar:focus-within {
  border-color: rgba(143, 227, 185, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(143, 227, 185, 0.1);
}
.reader-panel .ask-suggest { justify-content: flex-start; margin-top: 12px; }

@media (max-width: 640px) {
  .reader-panel { border-radius: 26px; }
  .reader-panel .ask-home { padding: 15px 14px 16px; }
  .ask-home-head { margin-bottom: 11px; }
}

/* -------------------------------------------------------- Newsletter pop -- */

/* Slides up now and then once the reader has scrolled a while; dismissing it
   snoozes it for weeks (ask.js decides when). */
.nl-pop {
  position: fixed;
  z-index: 890;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 24px));
  padding: 18px 18px 16px;
  color: var(--ask-ink);
  background: var(--glass-sheen, linear-gradient(transparent, transparent)), var(--glass-strong, rgba(4, 58, 43, 0.84));
  -webkit-backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
          backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
  border-radius: 24px;
  box-shadow: var(--glass-shine, inset 0 1px 0 rgba(255, 255, 255, 0.16)), 0 20px 60px rgba(0, 12, 8, 0.45);
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.55s var(--ask-ease), bottom 0.45s var(--ask-ease), width 0.45s var(--ask-ease);
}
.nl-pop[hidden] { display: none; }
.nl-pop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--rim, rgba(255, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.nl-pop.is-in { opacity: 1; transform: none; }
/* With the Ask bar floating, the popup rises out from behind it (it sits one
   layer below the bar) and hovers just above at the same width. */
body.ask-docked .nl-pop {
  width: var(--dock-w, min(640px, calc(100% - 24px)));
  bottom: calc(16px + var(--dock-h, 58px) + 10px + env(safe-area-inset-bottom));
}
.nl-pop-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ask-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nl-pop-close:hover, .nl-pop-close:focus-visible { color: var(--ask-ink); background: rgba(230, 230, 222, 0.08); outline: none; }
.nl-pop-close svg { width: 15px; height: 15px; }
.nl-pop-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 26px; margin-bottom: 14px; }
.nl-pop-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ask-accent);
  background: rgba(143, 227, 185, 0.1);
}
.nl-pop-icon svg { width: 18px; height: 18px; }
.nl-pop-title { margin: 0; font: 600 16px/1.3 'Outfit', sans-serif; color: var(--ask-ink); }
.nl-pop-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--ask-muted); }
.nl-pop .substack-subscribe-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 4px;
  background: rgba(0, 30, 22, 0.5);
  border: 1px solid var(--ask-line);
  border-radius: 999px;
  transition: border-color 0.2s ease;
}
.nl-pop .substack-subscribe-form:focus-within { border-color: var(--ask-line-strong); }
.nl-pop .substack-subscribe-form input[type="email"] {
  flex: 1;
  width: auto;
  min-width: 0;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 16px;
  box-shadow: none;
}
.nl-pop .substack-subscribe-form input[type="email"]:focus { box-shadow: none; }
.nl-pop .substack-subscribe-form button {
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ask-ink);
  color: var(--ask-bg);
  font: 600 14px/1 'Outfit', sans-serif;
}
.nl-pop .substack-subscribe-form button:hover { transform: none; box-shadow: none; opacity: 0.9; }
.nl-pop .subscribe-success { margin: 0; border-radius: 14px; }

@media (max-width: 720px) {
  .nl-pop,
  body.ask-docked .nl-pop {
    width: calc(100% - 28px);
    padding: 16px 16px 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
  /* No floating Ask bar on phones (see .ask-float), so nothing to clear but
     the tab bar, which tucks away while reading down. */
  html.chrome-tucked .nl-pop { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ Search bar -- */

.ask-home {
  margin: 4px auto 30px;
  max-width: 760px;
}

.ask-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: var(--ask-card);
  border: 1px solid var(--ask-line);
  border-radius: 999px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ask-bar:focus-within {
  border-color: var(--ask-line-strong);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(143, 227, 185, 0.08);
}
.ask-bar-icon { display: inline-flex; color: var(--ask-accent); flex: none; }
.ask-bar-icon svg { width: 18px; height: 18px; }
.ask-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ask-ink);
  font: 400 17px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  padding: 8px 0;
  outline: none;
}
.ask-bar input::placeholder { color: var(--ask-muted); opacity: 0.8; }
.ask-bar-quota {
  flex: none;
  font: 500 12px/1 'Outfit', sans-serif;
  color: var(--ask-muted);
  white-space: nowrap;
}
.ask-bar button {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--ask-ink);
  color: var(--ask-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ask-ease), opacity 0.2s ease;
}
.ask-bar button:hover { transform: scale(1.06); }
.ask-bar button:active { transform: scale(0.92); }
.ask-bar button:disabled { opacity: 0.45; cursor: default; transform: none; }
.ask-bar button svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- Floating bar -- */

/* A second bar, made by ask.js, that floats over the bottom of the screen in
   frosted glass once the reader is into the page. It only fades where it
   sits (opacity with a small rise); ask.js decides when (.is-shown). */
.ask-bar.ask-float {
  position: fixed;
  z-index: 900;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 24px));
  background: var(--glass-sheen, linear-gradient(transparent, transparent)), var(--glass, rgba(6, 72, 53, 0.62));
  border-color: transparent;
  -webkit-backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
          backdrop-filter: var(--glass-fx, blur(16px) saturate(2));
  box-shadow: var(--glass-shine, inset 0 1px 0 rgba(255, 255, 255, 0.16)), var(--glass-drop, 0 12px 34px rgba(0, 16, 11, 0.36));
  opacity: 0;
  translate: 0 10px;
  scale: 0.98;
  visibility: hidden;
  pointer-events: none;
  /* Out: a little quicker than in. Visibility flips once the fade is over,
     so a hidden bar cannot be tabbed into. */
  transition:
    opacity 0.26s ease,
    translate 0.32s var(--ask-ios),
    scale 0.32s var(--ask-ios),
    visibility 0s linear 0.32s,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
/* The rim light, as on the header and tab bar. */
.ask-bar.ask-float::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--rim, rgba(255, 255, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.ask-bar.ask-float > * { position: relative; }
.ask-bar.ask-float.is-shown,
.ask-bar.ask-float:focus-within {
  opacity: 1;
  translate: none;
  scale: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s ease,
    translate 0.45s var(--ask-ios),
    scale 0.45s var(--ask-ios),
    visibility 0s,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ask-bar.ask-float:focus-within {
  border-color: rgba(143, 227, 185, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 4px rgba(143, 227, 185, 0.1),
    0 12px 34px rgba(0, 16, 11, 0.36);
}
/* Out of the way behind the popup or sheet while a question is open. */
html.ask-lock .ask-bar.ask-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
/* Room at the end of the page so the floating bar never covers the footer. */
@media (min-width: 721px) {
  body.ask-has-float { padding-bottom: 84px; }
}
/* Phones never get it: Ask has its own button in the tab bar there, and the
   panel's own bar stays where it is on the homepage. */
@media (max-width: 720px) {
  .ask-bar.ask-float { display: none; }
}

/* One row, always. Overflow scrolls sideways under a fade instead of wrapping. */
.ask-suggest {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-right: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.ask-suggest::-webkit-scrollbar { display: none; }
.ask-suggest button {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--ask-line);
  background: transparent;
  color: var(--ask-muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.4s ease, transform 0.4s ease;
}
/* The homepage pills drift sideways on a loop (ask.js rotatePills). The row
   holds still under the pointer or focus; with reduced motion it is a plain
   row to swipe. */
.ask-suggest.has-marquee { overflow: hidden; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
.ask-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 36px), transparent);
}
.ask-marquee-track {
  display: flex;
  gap: 8px;
  width: max-content;
  padding-right: 8px;
  animation: ask-marquee 60s linear infinite;
}
.ask-marquee:hover .ask-marquee-track,
.ask-marquee:focus-within .ask-marquee-track { animation-play-state: paused; }
@keyframes ask-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ask-marquee { overflow-x: auto; scrollbar-width: none; }
  .ask-marquee::-webkit-scrollbar { display: none; }
  .ask-marquee-track { animation: none; }
  .ask-marquee-track button[aria-hidden] { display: none; }
}
.ask-suggest button:hover { color: var(--ask-ink); border-color: var(--ask-line-strong); }
.ask-suggest .ask-history-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ask-accent); border-color: rgba(143, 227, 185, 0.3); }
.ask-suggest .ask-history-chip[hidden] { display: none; }
.ask-suggest .ask-history-chip svg { width: 13px; height: 13px; }

.ask-suggest button { min-height: 34px; }

@media (max-width: 560px) {
  .ask-home { margin-bottom: 22px; }
  .ask-bar { padding-left: 14px; }
  .ask-bar input { font-size: 16px; }
  .ask-bar-quota { display: none; }
  .ask-home-quota { font-size: 12px; }
}

/* ----------------------------------------------------------------- Stage -- */

/* Desktop: a popup over the page, which blurs behind it. The blur is a static
   backdrop-filter and only its opacity animates, so the page never repaints
   per frame. Phones: a bottom sheet. /ask opened directly: a full page. */
html.ask-lock, html.ask-lock body { overflow: hidden; }

.ask-stage {
  position: fixed;
  inset: 0;
  z-index: 1000;
  color: var(--ask-ink);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(28px, 7vh) 24px 28px;
}
.ask-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 24, 17, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ask-stage.is-in .ask-backdrop { opacity: 1; }

.ask-sheet {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(143, 227, 185, 0.07), rgba(143, 227, 185, 0) 60%),
    var(--ask-bg);
  border: 1px solid transparent;
  border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(230, 230, 222, 0.12), 0 30px 90px rgba(0, 12, 8, 0.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.45s var(--ask-ease);
}
/* Anchored near the top so it grows downward as the answer streams in. */
.ask-stage.is-in .ask-sheet { opacity: 1; transform: none; }

.ask-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* A slim mint scrollbar in the sheet's own colors instead of the system's
   grey one. Chromium and Safari take the WebKit rules; Firefox the standard
   ones. */
.ask-scroll::-webkit-scrollbar { width: 12px; }
.ask-scroll::-webkit-scrollbar-track { background: transparent; }
.ask-scroll::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 4px solid transparent;
  border-radius: 999px;
  background: rgba(143, 227, 185, 0.34) padding-box;
}
.ask-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(143, 227, 185, 0.5); }
.ask-scroll::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  .ask-scroll { scrollbar-width: thin; scrollbar-color: rgba(143, 227, 185, 0.32) transparent; }
}
.ask-column {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 6px 28px 28px;
}

.ask-topbar {
  position: relative;
  flex: none;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 22px;
}
.ask-grab { display: none; }
.ask-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  color: var(--ask-ink);
}
.ask-brand svg { width: 16px; height: 16px; color: var(--ask-accent); }
/* The hand stands on the baseline of the label, a little taller than its
   caps (the brand is a flex row, so it is nudged rather than aligned). */
.ask-brand .hai-mark { height: 17px; margin-top: -3px; color: var(--ask-accent); }
.ask-top-actions { display: flex; align-items: center; gap: 8px; }
.ask-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  border: 0;
  background: rgba(230, 230, 222, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1);
  color: var(--ask-muted);
  font: 500 12.5px/1 'Outfit', sans-serif;
  cursor: pointer;
}
.ask-top-btn:hover { color: var(--ask-ink); background: rgba(230, 230, 222, 0.14); }
.ask-top-btn svg { width: 14px; height: 14px; }
.ask-top-btn[hidden],
.ask-stage:not(.is-running) .ask-top-btn { display: none; }
.ask-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(230, 230, 222, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(230, 230, 222, 0.1);
  color: var(--ask-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ask-close:hover, .ask-close:focus-visible { background: rgba(230, 230, 222, 0.16); outline: none; }
.ask-close:active, .ask-top-btn:active { scale: 0.92; }
.ask-close svg { width: 15px; height: 15px; }

/* Phones: a sheet that slides up from the bottom and drags back down. */
@media (max-width: 640px) {
  .ask-stage { padding: 0; align-items: flex-end; }
  .ask-sheet {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 28px 28px 0 0;
    border-bottom: 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ask-stage.is-running .ask-sheet { height: 92vh; height: 92dvh; }
  .ask-sheet.is-dragging { transition: none; }
  .ask-topbar { height: 56px; padding: 6px 10px 0 18px; touch-action: none; }
  .ask-grab {
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 5px;
    margin-left: -19px;
    border-radius: 999px;
    background: var(--ask-line-strong);
  }
  .ask-column { padding: 2px 16px 24px; }
}

/* /ask loaded directly: the same content as a page of its own. */
.ask-stage.is-page { padding: 0; }
.ask-stage.is-page .ask-backdrop { background: var(--ask-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ask-stage.is-page .ask-sheet {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  opacity: 1;
  padding-bottom: 0;
}
.ask-stage.is-page .ask-topbar { padding: 0 20px; max-width: 800px; width: 100%; margin: 0 auto; touch-action: auto; }
.ask-stage.is-page .ask-grab { display: none; }
.ask-stage.is-page .ask-column { max-width: 760px; padding: 18px 20px 80px; }

.ask-question {
  font: 600 clamp(20px, 2.6vw, 25px)/1.25 'Outfit', sans-serif;
  letter-spacing: -0.01em;
  margin: 4px 0 16px;
  transform-origin: 0 0;
  overflow-wrap: anywhere;
}
.ask-question.is-flying { transition: transform 0.75s var(--ask-ease), opacity 0.3s ease; }
.ask-question[hidden] { display: none; }

/* Compose: the input the header button opens to. */
.ask-compose { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.1s, transform 0.45s var(--ask-ease) 0.1s; }
.ask-stage.is-in .ask-compose { opacity: 1; transform: none; }
.ask-compose h2 { font: 600 clamp(21px, 3vw, 26px)/1.2 'Outfit', sans-serif; margin: 6px 0 16px; }
.ask-compose[hidden] { display: none; }
.ask-stage.is-page .ask-compose h2 { margin-top: 6vh; }

/* Saved questions, stored in this browser. */
.ask-history { margin-top: 26px; }
.ask-history[hidden] { display: none; }
.ask-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ask-history h3 {
  font: 600 11.5px/1 'Outfit', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ask-muted);
  margin: 0;
}
.ask-link {
  border: 0;
  background: none;
  color: var(--ask-muted);
  font: 400 12.5px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 2px;
  cursor: pointer;
}
.ask-link:hover { color: var(--ask-ink); }
.ask-history ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ask-line); }
.ask-history li button {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--ask-line);
  background: none;
  color: var(--ask-ink);
  text-align: left;
  font: 500 14.5px/1.35 'Outfit', sans-serif;
  cursor: pointer;
}
.ask-history li button:hover .ask-history-q { color: var(--ask-accent); }
.ask-history-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; }
.ask-history-when { flex: none; font-size: 12px; font-weight: 400; color: var(--ask-muted); }
.ask-history-note { font-size: 12px; color: var(--ask-muted); margin: 10px 0 0; opacity: 0.8; }

/* --------------------------------------------------------------- Process -- */

/* Kept small on purpose: the steps are a sideline to the answer. */
.ask-process {
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.5s var(--ask-ease);
  /* Folding changes height above the answer; let the browser anchor the
     scroll on the answer rather than on a step that is folding away. */
  overflow-anchor: none;
}
.ask-process.is-in { opacity: 1; transform: none; }
.ask-process[hidden] { display: none; }

/* When the answer starts, the steps fold into a one-line summary: the steps
   row animates from 1fr to 0fr while the summary row opens from 0fr to 1fr,
   both on the same curve, so the total height glides with no jump, and it
   keeps tracking the content even while thinking text is still arriving.
   Tapping the summary runs the same motion the other way. */
.ask-process-head,
.ask-process-body {
  display: grid;
  transition: grid-template-rows var(--ask-fold) var(--ask-ios), opacity 0.42s ease 0.06s, visibility 0s;
}
/* Whichever part is folded away is also hidden (once the fold is over), so
   its links and buttons drop out of the tab order. */
.ask-process-head {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows var(--ask-fold) var(--ask-ios), opacity 0.24s ease, visibility 0s linear var(--ask-fold);
}
.ask-process-body { grid-template-rows: 1fr; }
.ask-process-clip,
.ask-process-body > .ask-steps { min-height: 0; overflow: hidden; }
.ask-process.is-collapsed .ask-process-head {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows var(--ask-fold) var(--ask-ios), opacity 0.42s ease 0.06s, visibility 0s;
}
.ask-process.is-collapsed:not(.is-open) .ask-process-body {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  /* Fade out ahead of the fold, so nothing is seen squeezed. */
  transition: grid-template-rows var(--ask-fold) var(--ask-ios), opacity 0.24s ease, visibility 0s linear var(--ask-fold);
}

.ask-process-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ask-muted);
  font: 500 12.5px/1.3 'Outfit', sans-serif;
  padding: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ask-process-summary:focus-visible { outline: 2px solid rgba(143, 227, 185, 0.6); outline-offset: -2px; }
.ask-process-text { min-width: 0; }
.ask-process-hint {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ask-ink);
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.ask-process-summary:hover .ask-process-hint { opacity: 1; }
.ask-process-hint svg { width: 11px; height: 11px; transition: transform 0.4s var(--ask-ios); }
.ask-process.is-open .ask-process-hint svg { transform: rotate(90deg); }

/* Handy AI's avatar beside the summary; it breathes while the answer is
   still being written. */
.ask-avatar {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ask-accent);
  background: rgba(143, 227, 185, 0.12);
  box-shadow: inset 0 0 0 1px rgba(143, 227, 185, 0.2);
}
.ask-avatar .hai-mark { height: 13px; vertical-align: 0; }
.ask-process.is-working .ask-avatar { animation: ask-breathe 1.8s ease-in-out infinite; }

.ask-steps { list-style: none; margin: 0; padding: 0; }
.ask-step {
  position: relative;
  padding: 0 0 9px 21px;
  opacity: 0;
  transform: translateY(6px);
  animation: ask-rise 0.4s var(--ask-ease) forwards;
}
.ask-step::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: 1px;
  width: 1px;
  background: var(--ask-line);
}
.ask-step:last-child::before { display: none; }
.ask-step-icon {
  position: absolute;
  left: 0;
  top: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--ask-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ask-step.is-busy .ask-step-icon {
  border-color: var(--ask-accent);
  border-right-color: transparent;
  animation: ask-spin 0.8s linear infinite;
}
.ask-step.is-done .ask-step-icon { border-color: var(--ask-accent); background: var(--ask-accent); }
.ask-step.is-done .ask-step-icon::after {
  content: '';
  width: 5px;
  height: 2.5px;
  border-left: 1.4px solid var(--ask-bg);
  border-bottom: 1.4px solid var(--ask-bg);
  transform: translateY(-0.5px) rotate(-45deg);
}
.ask-step-label { font: 500 13px/1.35 'Outfit', sans-serif; color: var(--ask-ink); }
.ask-step.is-done .ask-step-label { color: var(--ask-muted); }
.ask-step-label q { color: var(--ask-ink); quotes: '\201C' '\201D'; }
.ask-step-detail { margin-top: 6px; }

.ask-thoughts {
  font: italic 400 12.5px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ask-muted);
  max-height: 3em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%);
          mask-image: linear-gradient(to bottom, transparent, #000 50%);
  white-space: pre-wrap;
}
/* Once folded away, the thinking shows in full for anyone who opens it. */
.ask-process.is-settled .ask-thoughts { max-height: none; -webkit-mask-image: none; mask-image: none; display: block; }
.ask-note { font-size: 12.5px; color: var(--ask-muted); }

/* Articles read during the search, as small thumbnail rows. */
.ask-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  margin: 0 -1px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ask-cards::-webkit-scrollbar { display: none; }
.ask-card {
  flex: none;
  width: 214px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  scroll-snap-align: start;
  background: var(--ask-card);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ask-ink);
  border: 1px solid var(--ask-line);
  opacity: 0;
  transform: translateY(6px);
  animation: ask-rise 0.45s var(--ask-ease) forwards;
  transition: border-color 0.2s ease;
}
.ask-card:hover { border-color: var(--ask-line-strong); }
.ask-card-img { flex: none; width: 50px; height: 38px; border-radius: 6px; background: rgba(0, 0, 0, 0.18) center / cover no-repeat; }
.ask-card-body { min-width: 0; }
.ask-card-kicker { font: 600 9.5px/1 'Outfit', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ask-accent); }
.ask-card-title {
  font: 500 12px/1.25 'Outfit', sans-serif;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ask-card-date { display: none; }

/* Web results as chips. */
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--ask-line);
  color: var(--ask-muted);
  text-decoration: none;
  font-size: 11.5px;
  opacity: 0;
  animation: ask-rise 0.4s var(--ask-ease) forwards;
}
.ask-chip:hover { color: var(--ask-ink); border-color: var(--ask-line-strong); }
.ask-chip img { width: 14px; height: 14px; border-radius: 4px; background: rgba(230, 230, 222, 0.1); }
.ask-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

/* ---------------------------------------------------------------- Answer -- */

/* Rises in under the steps as they fold away, on the same curve. */
.ask-answer {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.46s ease 0.08s, transform var(--ask-fold) var(--ask-ios) 0.04s;
}
.ask-answer.is-in { opacity: 1; transform: none; }
.ask-answer[hidden] { display: none; }

/* The answer sits straight on the sheet, lined up with the question: no
   box around it. Only the picture keeps rounded corners. */
.ask-report { position: relative; }

.ask-hero { margin: 4px 0 0; position: relative; overflow: hidden; border-radius: 18px; }
.ask-hero:not([hidden]) + .ask-body { padding-top: 18px; }
.ask-hero[hidden] { display: none; }
/* The picture's place, held from the start of the answer (its source may
   only be known later), so it fades in without moving the text. */
.ask-hero-ph {
  aspect-ratio: 16 / 8;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.2) 35%, rgba(230, 230, 222, 0.05) 50%, rgba(0, 0, 0, 0.2) 65%) 0 0 / 300% 100%, rgba(0, 0, 0, 0.12);
  animation: ask-shimmer 1.8s linear infinite;
}
.ask-hero.is-in .ask-hero-ph { animation: none; }
.ask-hero.is-dropping { transition: height var(--ask-fold) var(--ask-ios), opacity 0.3s ease; opacity: 0; }
.ask-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.8s ease, transform 1.4s var(--ask-ease);
}
.ask-hero.is-in .ask-hero-img { opacity: 1; transform: none; }
.ask-hero figcaption { opacity: 0; transition: opacity 0.5s ease 0.25s; }
.ask-hero.is-in figcaption { opacity: 1; }
.ask-hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 24px 12px;
  font-size: 12.5px;
  color: rgba(230, 230, 222, 0.9);
  background: linear-gradient(to top, rgba(0, 84, 61, 0.96), rgba(0, 84, 61, 0));
}
.ask-hero figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(230, 230, 222, 0.35); }

.ask-body {
  padding: 14px 0 8px;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  color: var(--ask-ink);
  overflow-wrap: break-word;
}
.ask-body > :first-child { margin-top: 0; }
.ask-body p { margin: 0 0 14px; }
.ask-body p.ask-lede { font-size: 19px; line-height: 1.5; }
.ask-body strong { font-weight: 650; color: #fff; }
.ask-body h3, .ask-body h4 {
  font: 600 19px/1.3 'Outfit', sans-serif;
  margin: 22px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ask-line);
}
.ask-body ul, .ask-body ol { margin: 0 0 14px; padding-left: 20px; }
.ask-body li { margin: 0 0 6px; }
.ask-body li::marker { color: var(--ask-accent); }
.ask-body code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0, 0, 0, 0.2); padding: 1px 5px; border-radius: 5px; }
.ask-body a {
  color: var(--ask-ink);
  text-decoration: underline;
  text-decoration-color: rgba(143, 227, 185, 0.55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.ask-body a:hover { text-decoration-color: var(--ask-accent); }
.ask-body sup.ask-ref { font: 600 10.5px/1 'Outfit', sans-serif; margin-left: 2px; }
.ask-body sup.ask-ref a {
  text-decoration: none;
  color: var(--ask-bg);
  background: var(--ask-accent);
  border-radius: 999px;
  padding: 1px 5px;
}
.ask-body figure { margin: 6px 0 18px; }
.ask-body figure img { width: 100%; border-radius: 12px; display: block; }
.ask-body figcaption { font-size: 13px; color: var(--ask-muted); margin-top: 6px; }

/* Words fade in as they stream. */
.ask-w { opacity: 0; animation: ask-word 0.5s ease forwards; }
.ask-cursor::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  border-radius: 2px;
  background: var(--ask-accent);
  animation: ask-blink 1s steps(2, start) infinite;
}

.ask-sources { padding: 6px 0 4px; }
.ask-sources[hidden] { display: none; }
.ask-sources h3 {
  font: 600 12px/1 'Outfit', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ask-muted);
  margin: 10px 0 12px;
}
.ask-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ask-source {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 7px;
  border-radius: 10px;
  border: 1px solid var(--ask-line);
  background: rgba(0, 63, 46, 0.45);
  color: var(--ask-ink);
  text-decoration: none;
  opacity: 0;
  animation: ask-rise 0.45s var(--ask-ease) forwards;
  transition: border-color 0.2s ease;
}
.ask-source:hover { border-color: var(--ask-line-strong); }
.ask-source-thumb {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ask-source-thumb img { width: 18px; height: 18px; border-radius: 5px; }
.ask-source-meta { min-width: 0; }
.ask-source-kicker { font: 600 9.5px/1.2 'Outfit', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ask-accent); }
.ask-source-kicker b { display: inline-block; min-width: 16px; margin-right: 4px; color: var(--ask-bg); background: var(--ask-accent); border-radius: 999px; text-align: center; padding: 1px 4px; }
.ask-source-title {
  font: 500 12.5px/1.28 'Outfit', sans-serif;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ask-also { margin-top: 12px; font-size: 13px; color: var(--ask-muted); }
.ask-also a { color: var(--ask-muted); }

.ask-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ask-foot.is-in { opacity: 1; }
.ask-foot-note { font-size: 13px; color: var(--ask-muted); }
.ask-foot-actions { display: flex; gap: 10px; }
.ask-btn {
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 14px/1 'Outfit', sans-serif;
  cursor: pointer;
  border: 1px solid var(--ask-line-strong);
  background: transparent;
  color: var(--ask-ink);
  text-decoration: none;
}
.ask-btn.is-primary { background: var(--ask-ink); color: var(--ask-bg); border-color: var(--ask-ink); }
.ask-btn:disabled { opacity: 0.4; cursor: default; }
.ask-share { display: inline-flex; align-items: center; gap: 7px; }
.ask-share svg { width: 15px; height: 15px; }
.ask-share.is-busy { opacity: 0.55; cursor: progress; }
.ask-share.is-icon { padding-left: 10px; padding-right: 10px; }

.ask-message {
  background: var(--ask-card);
  border: 1px solid var(--ask-line);
  border-radius: 18px;
  padding: 22px 24px;
  font-size: 16px;
  line-height: 1.55;
}
.ask-message h3 { font: 600 20px/1.3 'Outfit', sans-serif; margin: 0 0 6px; }
.ask-message p { margin: 0; color: var(--ask-muted); }
.ask-message a { color: var(--ask-ink); }

.ask-disclaimer { margin-top: 14px; font-size: 12px; color: var(--ask-muted); opacity: 0.8; }

@media (max-width: 560px) {
  .ask-body { padding: 12px 0 6px; font-size: 16px; }
  .ask-body p.ask-lede { font-size: 17.5px; }
  .ask-sources { padding: 4px 0 4px; }
  .ask-hero figcaption { padding: 36px 18px 10px; }
  .ask-card { width: 196px; }
}

@keyframes ask-rise { to { opacity: 1; transform: none; } }
@keyframes ask-word { to { opacity: 1; } }
@keyframes ask-spin { to { transform: rotate(360deg); } }
@keyframes ask-blink { to { visibility: hidden; } }
@keyframes ask-shimmer { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
@keyframes ask-breathe {
  0%, 100% { background-color: rgba(143, 227, 185, 0.1); }
  50% { background-color: rgba(143, 227, 185, 0.26); }
}

@media (prefers-reduced-motion: reduce) {
  .nl-pop { transition: opacity 0.2s ease; transform: none; }
  .ask-question.is-flying,
  .ask-sheet { transition: opacity 0.2s ease; }
  .ask-w, .ask-step, .ask-card, .ask-chip, .ask-source { animation-duration: 0.01s; }
  .ask-step.is-busy .ask-step-icon { animation-duration: 2.4s; }
  /* The steps fold at once (a plain fade); the answer fades without rising. */
  .ask-process-head,
  .ask-process-body,
  .ask-process.is-collapsed .ask-process-head,
  .ask-process.is-collapsed:not(.is-open) .ask-process-body { transition: opacity 0.2s ease; }
  .ask-answer { transform: none; transition: opacity 0.2s ease; }
  .ask-process.is-working .ask-avatar,
  .ask-hero-ph { animation: none; }
  .ask-hero-img { transform: none; transition: opacity 0.3s ease; }
  /* The floating bar fades only. */
  .ask-bar.ask-float,
  .ask-bar.ask-float.is-shown { translate: none; scale: none; }
}

/* The small print under every answer. */
.ask-disclaimer { flex: 1 0 100%; margin: 0 0 2px; font-size: 12px; line-height: 1.45; color: var(--ask-muted); opacity: 0.85; }
.ask-disclaimer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(230, 230, 222, 0.3); text-underline-offset: 2px; }
.ask-disclaimer a:hover { color: var(--ask-ink); }