/* ==========================================================================
   ASK BOX — the global search / ask surface
   --------------------------------------------------------------------------
   ONE box, wherever it appears (Home, Reports). It was copied inline onto both
   screens and drifted — Reports looked wrong because it had the same .ask-box
   rules but had never linked button.css or input.css, so the primitives inside
   it fell back to browser defaults (Peter, 28 Jul).

   Requires: input.css + button.css (the box only sizes the primitives).

     <div class="ask-box">
       <label class="visually-hidden" for="ask-input">…</label>
       <input class="input" id="ask-input" type="text" placeholder="…">
       <button type="button" class="btn btn--primary" id="ask-go">Ask</button>
     </div>
     <div class="ask-suggests" id="ask-suggests" hidden>…</div>
     <div class="ask-answer-wrap"><div class="answer" id="ask-answer" hidden></div></div>
   ========================================================================== */

/* width:100% matters — a flex child with auto side margins shrinks to its content,
   which collapsed the box inside the home screen's column (Peter, 27 Jul). */
/* The box spans the content column, like everything else on the screen (Peter, 28 Jul).
   It used to be capped at 640 and centred, so the box, its answers, "This week" and the
   cards all started on different left edges — three ragged edges on the one screen that
   is meant to read calm. One left edge now, top to bottom. */
/* THE PILL IS THE BOX (Peter, 14 Aug): the mic and the Ask button sit INSIDE
   the field, the Bullet mark leads it, and focusing the input changes nothing
   — "don't make us have a borderline… just leave it as is". The container
   carries the pill chrome; the input inside is naked. */
.ask-box {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-inline: 0;
  min-height: 52px;
  padding: 5px 5px 5px 16px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
}
.ask-box .input {
  flex: 1;
  height: 40px;
  font-size: var(--text-base);
  border: none;
  background: transparent;
  padding-left: 8px;
}
.ask-box .input:focus { border: none; outline: none; }
.ask-box .btn { height: 40px; }
.ask-box .btn--primary { border-radius: var(--radius-full); padding-inline: 20px; }
/* the small Bullet mark before the placeholder (injected by js/ask.js) */
.ask-brand { flex: none; display: inline-flex; }
.ask-brand img { display: block; width: 19px; height: 19px; }

/* ---- THE ANSWER IS THE BOX, CONTINUED (Peter, 28 Jul) -----------------------
   Testers were not connecting the answer with the thing they had just typed into:
   it read as a separate bordered card floating below. So while an answer is open,
   the field squares off its bottom corners and the panel picks them up — no gap,
   no second border between them, one object. ask.js puts .is-answering on the box.

   The panel sits under the FIELD, not the Ask button, which is what makes it read
   as hanging off the field rather than off the whole row. --ask-btn-w is the button
   plus the flex gap; the JS measures the real button and sets it. */
/* The pill container squares off now, not the input — the whole box IS the
   field since the mic + Ask moved inside it (Peter, 14 Aug). */
.ask-box.is-answering {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-border-strong);
}
/* The prompt pills are what you read INSTEAD of an answer. Once there is an answer they
   would sit between the field and the panel and break the join, so they stand down —
   any follow-ups appear inside the panel, in the same column. */
.ask-box.is-answering ~ .ask-suggests { display: none; }

/* The wrap holds the column; the panel inside it is inset by the button's width.
   The gap has to go too: on Home the box sits in a flex column with a 12px row-gap,
   which would leave a seam between the field and the panel. Scoped to the ask
   section by :has(> …), so it only ever collapses the group it belongs to. */
:has(> .ask-box.is-answering) { row-gap: 0; }
.ask-box.is-answering ~ .ask-answer-wrap { margin-top: 0; }
/* Only the FIRST card hangs off the field — and since the newest answer is now on top
   (Peter, 29 Jul), that is always the one you just asked for. The cards below it are
   ordinary answers: a second card with its top border cut off, joined to nothing, was
   the seam we removed here in the first place. */
.ask-box.is-answering ~ .ask-answer-wrap .answer:first-child {
  border-color: var(--color-border-strong);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* The Ask button lives inside the pill now, so the panel spans the full box —
   the old --ask-btn-w inset kept it under the field when the button sat
   outside (superseded 14 Aug). */
.ask-box.is-answering ~ .ask-answer-wrap .answer-stack { margin-right: 0; }

/* Suggested questions — quiet pills under the box. */
.ask-suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  margin-inline: 0;   /* one left edge, like the box above them (Peter, 28 Jul) */
  /* NOTHING SNAPS (Peter, 31 Jul): they fold away — opacity + a gentle
     collapse on the exit easing — and unfold the same way. */
  max-height: 480px;
  overflow: hidden;
  transition: opacity .26s ease, transform .26s ease,
              max-height .34s cubic-bezier(0.32, 0, 0.1, 1),
              margin-top .34s cubic-bezier(0.32, 0, 0.1, 1);
}
.ask-suggests.is-away {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-top: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .ask-suggests { transition: none; } }
.ask-suggest {
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 8px 15px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ask-suggest:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.ask-suggest:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* Same left edge as the box above it and the cards below it (Peter, 28 Jul). */
.ask-answer-wrap { margin-top: 20px; width: 100%; margin-inline: 0; }

/* ---- "I want to …" prompts (Peter, 28 Jul; pills 14 Aug) ------------------
   A sentence you finish — the lead-in stays quiet — but they sit in a
   HORIZONTAL wrapped row of tappable pills, not full-width rows (Peter,
   14 Aug: "stack these in a linear line… as pills people can click on"). */
.ask-suggests--sentences { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ask-suggests--sentences .ask-suggest {
  display: inline-block;
  width: auto;
  text-align: left;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  padding: 8px 16px;
  font-size: var(--text-base);
  color: var(--color-text);
  transition: background-color .15s ease;
}
.ask-suggests--sentences .ask-suggest:hover { background: var(--color-border); border-color: transparent; }
.ask-suggests--sentences .ask-suggest > span { color: var(--color-text-muted); }

/* ---- the clear × (Peter, 31 Jul) ------------------------------------------
   js/ask.js wraps the input in .ask-field and drops the × inside its right
   edge, visible while there is text. */
.ask-field { flex: 1; position: relative; display: flex; min-width: 0; }
.ask-field .input { flex: 1; width: 100%; padding-right: 40px; }
.ask-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  display: none;
  border-radius: 50%;
}
.ask-field.has-text .ask-clear { display: block; }
.ask-clear:hover { color: var(--color-text); }
.ask-clear:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }