/* ============================================================
   Medical Arts — ASK BOX (knowledge base entry point)
   Replaces the search field + 13 category chips that used to sit
   under the FAQ hero. Uses ONLY the :root tokens from css/site.css.
   ============================================================ */

/* The card lifts into the hero, so the hero above it needs matching clearance
   or it sits on top of the last line of the intro. It also inherits the site
   wrap rather than setting its own, so its left edge lines up with the hero
   headline and with the answers below it. */
.ask{position:relative;z-index:4;margin-top:-64px}
body:has(.ask) .phero>.wrap{padding-bottom:112px}

.askcard{background:var(--paper);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
  box-shadow:0 1px 2px rgba(24,21,9,.05),0 26px 60px -34px rgba(24,21,9,.42)}

.ask-lede{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ask-lede .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.ask-lede span{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* the input itself: one field, generous, no chrome until focus */
.ask-f{display:flex;align-items:flex-end;gap:12px;
  background:var(--cream);border-radius:var(--r-s);padding:6px 6px 6px 18px;
  box-shadow:inset 0 0 0 1.5px var(--hair);
  transition:box-shadow .2s var(--ease),background .2s var(--ease)}
.ask-f:focus-within{background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--green-cta),0 0 0 4px var(--green-pale)}
.ask-f textarea{flex:1;border:0;outline:none;background:none;resize:none;
  font-family:var(--f);font-size:1.06rem;line-height:1.5;color:var(--ink);
  padding:14px 0;max-height:132px;overflow-y:auto}
.ask-f textarea::placeholder{color:var(--muted)}
.ask-go{flex:0 0 auto;width:46px;height:46px;border-radius:12px;border:0;cursor:pointer;
  background:var(--green-cta);color:var(--paper);display:flex;align-items:center;
  justify-content:center;transition:transform .18s var(--ease),background .18s}
.ask-go:hover{background:var(--ink);transform:translateY(-1px)}
.ask-go:disabled{background:var(--oat);color:var(--muted);cursor:default;transform:none;
  box-shadow:inset 0 0 0 1.5px var(--hair)}
.ask-go svg{width:20px;height:20px}

.ask-hint{margin-top:12px;font-size:.8rem;color:var(--muted);line-height:1.5}

/* starter prompts, deliberately few. The old UI had 13 chips competing. */
.ask-seed{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ask-seed button{font-family:var(--f);font-size:.85rem;font-weight:500;color:var(--body);
  background:var(--oat);border:0;border-radius:var(--r-b);padding:9px 15px;cursor:pointer;
  min-height:38px;transition:background .18s var(--ease),color .18s}
.ask-seed button:hover{background:var(--green-pale);color:var(--green-dk)}

/* answers */
.ask-out{margin-top:22px}
.ask-out[hidden]{display:none}
.ask-status{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.ask-status b{color:var(--ink2);font-weight:600}

.ask-hit{border-top:1px solid var(--hair);padding:20px 0}
.ask-hit:first-of-type{border-top:0;padding-top:4px}
.ask-hit h3{font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.35}
.ask-hit .cat{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green-dk);background:var(--green-pale);
  border-radius:var(--r-b);padding:4px 10px;margin-bottom:9px}
.ask-hit .body{margin-top:9px;font-size:.97rem;line-height:1.6;color:var(--body)}
.ask-hit .body p+p{margin-top:10px}
.ask-hit .body ul{margin:10px 0 0 18px;display:flex;flex-direction:column;gap:6px}
.ask-hit .more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:.88rem;font-weight:600;color:var(--green-dk)}
.ask-hit .more:hover{text-decoration:underline;text-underline-offset:3px}

/* nothing matched */
.ask-none{background:var(--oat);border-radius:var(--r-s);padding:22px 24px}
.ask-none b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink)}
.ask-none p{margin-top:8px;font-size:.94rem;line-height:1.55;color:var(--body)}
.ask-none .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* browse-by-topic, demoted below the ask box rather than competing with it */
.ask-browse{margin-top:26px;border-top:1px solid var(--hair);padding-top:20px}
/* inline-flex + fit-content so the keyboard focus ring hugs the label instead
   of painting a full-width rectangle across the card. The ring stays, it just
   fits what it is outlining. */
.ask-browse summary{cursor:pointer;list-style:none;font-size:.86rem;font-weight:600;
  color:var(--body);display:inline-flex;align-items:center;gap:8px;
  width:fit-content;border-radius:var(--r-b);padding:4px 2px}
.ask-browse summary:focus-visible{outline:3px solid var(--green);outline-offset:3px;
  border-radius:var(--r-b)}
.ask-browse summary::-webkit-details-marker{display:none}
.ask-browse summary svg{width:15px;height:15px;color:var(--muted);
  transition:transform .2s var(--ease)}
.ask-browse[open] summary svg{transform:rotate(180deg)}
.ask-browse summary:hover{color:var(--green-dk)}

@media(max-width:720px){
  .ask{margin-top:-34px}
  .ask-f{padding-left:14px}
  .ask-f textarea{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  .ask-go,.ask-seed button,.ask-browse summary svg{transition:none}
}