/* Ask Kevin — built from the site's own tokens.

   DESIGN NOTES, because the previous version failed on all three and it is worth
   saying why so it doesn't regress:

   1. ALIGNMENT. The module used to set its own max-width (56rem) and its own
      horizontal padding (1.5rem) *inside* a page wrapper that already had a column
      and padding. On ai.html that put the bot's text 24px right of the h1 above it;
      on index.html it was a 704px block inside a 1200px hero. The module now owns
      NO column of its own where a parent provides one, and matches the site's column
      (1200px / 2rem) where it is a direct child of <main>.

   2. HIERARCHY. Cream page, cream input, slightly-darker-cream answer box, separated
      by one hairline. Three surfaces, no contrast, nothing for the eye to land on.
      Fixed by removing the boxes entirely: the transcript is now typographic, the way
      an interview reads, and the only filled element is the composer — the one thing
      you actually interact with.

   3. FINDABILITY. The question was 15px at 72% opacity — smaller and fainter than the
      answer. Scrolling back through a session, there was no anchor. The question is now
      the largest, darkest thing in the turn, with a rule above it. That is what makes a
      transcript scannable, and it is the one rule every good Q&A layout follows.
*/

.ask{
  --ak-ink:      var(--indigo, #2a2d4a);
  --ak-ink-soft: var(--indigo-soft, #3d4060);
  --ak-muted:    var(--indigo-muted, #6a6d85);
  --ak-bg:       var(--cream, #f7f3ec);
  --ak-bg-deep:  var(--cream-deep, #efe9dd);
  --ak-bg-deeper:var(--cream-deeper, #e6dfd0);
  --ak-accent:   var(--oxblood, #5a1e1b);
  --ak-accent-2: var(--amber-deep, #8a5f1c);
  --ak-rule:     var(--rule, rgba(42,45,74,.15));
  --ak-rule-str: var(--rule-strong, rgba(42,45,74,.3));

  /* The site's column. Matches .work-list and .home-hero. */
  --ak-col: 1200px;
  /* Reading measure for prose. Alignment is a container job; readability is a text job. */
  --ak-measure: 68ch;

  max-width:var(--ak-col); margin:0 auto; padding:0 2rem;
  font-family:Inter,-apple-system,system-ui,sans-serif;
  color:var(--ak-ink);
}

/* ai.html only. site-integrate.sh places this INSIDE .contact-wrap, which already owns
   the column (900px / 2rem), so the module must take no width and no padding of its own.
   If it is ever moved back outside that wrapper this goes full-bleed to x:0 — which is
   exactly what happened once, and why build-deploy.sh now asserts the nesting. */
.ask--page{ max-width:none; padding:0; margin-top:3.5rem; }

/* Standalone placement (work.html) follows page content directly, so it has to make its
   own break. The rule sits on the site's column, so it lines up with the .work-item
   rules above it instead of floating at a different width. */
.ask:not(.ask--page){
  margin-top:3rem; padding-top:3.5rem;
  border-top:1px solid var(--ak-rule-str);
}
.ask-drop .ask:not(.ask--page){ margin-top:0; padding-top:0; border-top:0; }

.ask__inner{ padding:0; }
.ask__sub{
  font-size:1.0625rem; line-height:1.6; color:var(--ak-ink-soft);
  margin:0 0 1.75rem; max-width:var(--ak-measure);
}
.ask__sub b{ font-weight:600; }

/* Visually-hidden label. Without this the words "Your question" render on the page. */
.ask .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   COMPOSER — the only filled surface in the module.
   Everything else is type on the page ground, so this reads
   unambiguously as the thing you use.
   ============================================================ */
.ask__form{
  display:flex; align-items:stretch; gap:0;
  max-width:var(--ak-measure);
  background:var(--ak-bg-deeper);
  border:1px solid var(--ak-rule-str);
  border-bottom:2px solid var(--ak-ink);
  transition:border-color .18s;
}
.ask__form:focus-within{ border-bottom-color:var(--ak-accent); }

.ask__input{
  flex:1; border:0; background:transparent;
  padding:1.05rem 1.25rem;
  font:inherit; font-size:1.0625rem; line-height:1.55; color:var(--ak-ink);
}
.ask__input::placeholder{ color:var(--ak-muted); opacity:1; }
/* Focus lives on the form, not the field — an inset outline on a transparent input
   drew a second box inside the first and made the composer look broken. */
.ask__input:focus{ outline:0; }

/* padding-left used to be 0 here, so typed text sat flush against the border. */
textarea.ask__input{
  resize:vertical; min-height:3.4rem; max-height:22rem;
  font-family:inherit; padding:1.05rem 1.25rem;
}

.ask__send{
  border:0; background:var(--ak-ink); color:var(--ak-bg);
  padding:0 1.75rem; font:inherit; font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  white-space:nowrap; transition:background .18s;
}
.ask__send:hover:not(:disabled){ background:var(--ak-accent); }
.ask__send:disabled{ opacity:.45; cursor:default; }

/* ============================================================
   STARTER QUESTIONS — chips, not grey text.
   These were .93rem in --indigo-muted with no affordance: hard
   to read and not obviously clickable.
   ============================================================ */
.ask__seeds{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin:1.25rem 0 0; max-width:var(--ak-measure);
}
.ask__seeds button{
  border:1px solid var(--ak-rule-str); border-radius:2rem;
  background:transparent; padding:.5rem 1rem;
  font:inherit; font-size:.9375rem; line-height:1.35;
  color:var(--ak-ink); cursor:pointer; text-align:left;
  transition:background .16s, color .16s, border-color .16s;
}
.ask__seeds button:hover,
.ask__seeds button:focus-visible{
  background:var(--ak-ink); border-color:var(--ak-ink); color:var(--ak-bg); outline:0;
}

/* ============================================================
   TRANSCRIPT — no box, no background, no border.
   Separation comes from space and rules, the way the rest of
   the site handles it.
   ============================================================ */
.ask__log{
  display:block; margin:2.5rem 0 0; padding:0;
  background:none; border:0; min-height:0; max-height:none; overflow:visible;
}
.ask__log:empty{ display:none; }

.ask__turn{ margin:0; padding:0 0 2.25rem; }
.ask__turn + .ask__turn{
  margin-top:2.25rem; border-top:1px solid var(--ak-rule);
  padding-top:2.25rem;
}
.ask__turn:last-child{ padding-bottom:.5rem; }

/* THE ANCHOR. Largest, darkest thing in the turn, with a rule above it, so
   scrolling back through a session gives the eye something to catch. */
.ask__q{
  position:relative;
  margin:0 0 1.1rem; padding-top:1rem;
  max-width:var(--ak-measure);
  font-size:1.1875rem; font-weight:700; letter-spacing:-.015em; line-height:1.4;
  color:var(--ak-ink);
  overflow-wrap:break-word; word-break:break-word;
}
.ask__q::before{
  content:""; position:absolute; top:0; left:0;
  width:2.25rem; height:2px; background:var(--ak-accent);
}

.ask__a{
  max-width:var(--ak-measure);
  font-size:1.0625rem; line-height:1.72; color:var(--ak-ink-soft);
  overflow-wrap:break-word; word-break:break-word;
}
.ask__a p{ margin:0 0 1rem; }
.ask__a p:last-child{ margin-bottom:0; }

/* Round bullets. These were a .4rem x 1px amber line — literally a dash. */
.ask__a ul{ margin:0 0 1.1rem; padding-left:0; list-style:none; }
.ask__a ul li{ position:relative; padding-left:1.35rem; margin:0 0 .7rem; }
.ask__a ul li::before{
  content:""; position:absolute; left:.25rem; top:.62em;
  width:.375rem; height:.375rem; border-radius:50%;
  background:var(--ak-accent-2);
}
.ask__a ol{ margin:0 0 1.1rem; padding-left:1.5rem; }
.ask__a ol li{ margin:0 0 .7rem; padding-left:.25rem; }
.ask__a ol li::marker{ color:var(--ak-accent-2); font-weight:700; }
.ask__a li:last-child{ margin-bottom:0; }
.ask__a li > ul, .ask__a li > ol{ margin:.6rem 0 0; }

/* Bold is the emphasis of last resort, so make it actually read as emphasis. */
.ask__a strong{ font-weight:700; color:var(--ak-ink); }
.ask__a em{ font-style:italic; }
.ask__a a{ color:var(--ak-accent); text-underline-offset:.18em; }
.ask__a a:hover{ color:var(--ak-ink); }
.ask__a blockquote{
  margin:0 0 1.1rem; padding-left:1rem;
  border-left:2px solid var(--ak-rule-str); color:var(--ak-ink);
}

/* thinking */
.ask__dots{ display:inline-flex; gap:.32rem; padding-top:.35rem; }
.ask__dots i{
  width:.4rem; height:.4rem; background:var(--ak-muted); border-radius:50%;
  animation:ak-pulse 1.3s ease-in-out infinite;
}
.ask__dots i:nth-child(2){ animation-delay:.18s }
.ask__dots i:nth-child(3){ animation-delay:.36s }
@keyframes ak-pulse{ 0%,60%,100%{opacity:.22} 30%{opacity:.9} }

/* footnotes */
.ask__note{
  margin:1.75rem 0 0; max-width:var(--ak-measure);
  font-size:.8125rem; line-height:1.6; color:var(--ak-muted);
}
.ask__note strong{ font-weight:700; color:var(--ak-ink); }
.ask__note a{ color:var(--ak-accent); }
.ask__truncated{ margin:.85rem 0 0; font-size:.875rem; font-style:italic; color:var(--ak-muted); }
.ask__limit{ margin:1.5rem 0 0; font-size:.9375rem; color:var(--ak-ink); }
.ask__limit a{ color:var(--ak-accent); }
.ask__clipped{ margin:.6rem 0 0; font-size:.8125rem; color:var(--ak-accent); max-width:var(--ak-measure); }

@media (max-width:640px){
  .ask{ padding:0 1.25rem; }
  .ask__form{ flex-direction:column; }
  .ask__send{ padding:.95rem; }
  .ask__q{ font-size:1.0625rem; }
  .ask__turn{ padding-bottom:1.75rem; }
  .ask__turn + .ask__turn{ margin-top:1.75rem; padding-top:1.75rem; }
}
@media (prefers-reduced-motion:reduce){ .ask__dots i{ animation:none; opacity:.5 } }

/* ================================================================
   HOME PAGE — collapsed line that expands in place.
   Matches .home-hero's column (1200 / 2rem) so the line sits on the
   hero's own left edge instead of floating in a narrower block.
   ================================================================ */
.ask-drop{ max-width:1200px; margin:0 auto; padding:0 2rem; }

.ask-drop__toggle{
  width:100%; display:flex; align-items:baseline; gap:1rem;
  background:transparent; border:0;
  border-top:1px solid var(--rule-strong, rgba(42,45,74,.3));
  border-bottom:1px solid var(--rule-strong, rgba(42,45,74,.3));
  padding:1.4rem 0; font:inherit; color:inherit; cursor:pointer; text-align:left;
}
.ask-drop__toggle:hover .ask-drop__label{ color:var(--oxblood, #5a1e1b); }
.ask-drop__toggle:focus-visible{ outline:2px solid var(--oxblood, #5a1e1b); outline-offset:3px; }

.ask-drop__eyebrow{
  flex:0 0 auto; font-size:.7rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-deep, #8a5f1c);
}
.ask-drop__label{
  flex:1; font-size:clamp(1.05rem,2.4vw,1.35rem); font-weight:700;
  letter-spacing:-.02em; line-height:1.3;
}
.ask-drop__hint{ flex:0 0 auto; font-size:.85rem; color:var(--indigo-muted, #6a6d85); }
.ask-drop__sign{
  flex:0 0 auto; width:1.5rem; height:1.5rem; position:relative;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.ask-drop__sign::before, .ask-drop__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px;
  background:var(--indigo, #2a2d4a); transform:translateY(-50%);
}
.ask-drop__sign::after{ transform:translateY(-50%) rotate(90deg); transition:opacity .28s; }
.ask-drop__toggle[aria-expanded="true"] .ask-drop__sign{ transform:rotate(180deg); }
.ask-drop__toggle[aria-expanded="true"] .ask-drop__sign::after{ opacity:0; }

.ask-drop__beta{
  display:inline-block; margin-left:.45rem; padding:.1rem .4rem;
  border:1px solid var(--rule-strong, rgba(42,45,74,.3)); border-radius:2px;
  font-size:.6rem; letter-spacing:.1em; color:var(--indigo-muted, #6a6d85);
  vertical-align:.08em;
}

.ask-drop__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
.ask-drop__panel > div{ overflow:hidden; }
.ask-drop[data-open="true"] .ask-drop__panel{ grid-template-rows:1fr; }

/* Nested inside .ask-drop, which already owns the column. */
.ask-drop .ask{ max-width:none; padding:0; margin:0; }
.ask-drop .ask__inner{ padding:2.25rem 0 1rem; }
/* The home placement is a peek, not the whole session — cap it and let it scroll. */
.ask-drop .ask__log{ max-height:26rem; overflow-y:auto; }

@media (prefers-reduced-motion:reduce){
  .ask-drop__panel{ transition:none }
  .ask-drop__sign{ transition:none }
}
@media (max-width:640px){
  .ask-drop{ padding:0 1.25rem; }
  .ask-drop__hint{ display:none }
  .ask-drop__toggle{ gap:.75rem }
}