/* "Ask about our studies" on research.html. The look of Arc's AI Composer
   block, rebuilt for this static site in site tokens: a quiet card with the
   composer as its centerpiece. It starts centered under a greeting with
   three suggestions, then glides to the bottom once the first message is
   sent. Script: assets/studies-helper.js. Server: api/studies-ask.js. */
.sh{--sh-col:760px;--sh-ink:var(--text,#2D3748);--sh-ink2:#475569;--sh-mute:#64748B;--sh-line:#E2E8F0;--sh-line2:#CBD5E0;--sh-soft:#EEF2F7;--sh-hover:rgba(15,28,63,.06);--sh-press:rgba(15,28,63,.1);--sh-ease:cubic-bezier(.22,1,.36,1);background:#F5F7FA;padding:40px 0 48px;border-bottom:1px solid var(--hair,#E2E8F0)}
.sh *,.sh *::before,.sh *::after{box-sizing:border-box}
.sh-box{position:relative;display:flex;flex-direction:column;justify-content:center;max-width:1040px;min-height:460px;margin-inline:auto;padding:48px 24px 22px;border:1px solid var(--sh-line);border-radius:28px;background:#fff;box-shadow:0 1px 2px rgba(15,28,63,.03),0 24px 48px -32px rgba(15,28,63,.18);color:var(--sh-ink);font-family:var(--f,'Outfit',system-ui,sans-serif)}
.sh-box.is-thread{justify-content:flex-start;height:clamp(540px,80vh,780px);padding-top:0}

/* ----- Greeting ----- */
.sh-intro{width:100%;max-width:var(--sh-col);margin:0 auto 28px;text-align:center;animation:sh-up .42s var(--sh-ease) both}
.sh-box.is-thread .sh-intro{display:none}
.sh-h{margin:0;font-family:var(--f);font-size:clamp(1.875rem,4.2vw,2.75rem);font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--navy,#27277C);text-wrap:balance}
.sh-sub{max-width:54ch;margin:12px auto 0;color:var(--sh-ink2);font-size:1.0625rem;line-height:1.55;text-wrap:pretty}
@keyframes sh-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ----- New chat ----- */
.sh-new{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--sh-line,#E2E8F0);border-radius:999px;background:#fff;color:var(--sh-ink);font:500 .9375rem/1 var(--font-display,inherit);cursor:pointer;transition:background-color .12s,color .16s}
/* In a thread the suggestions stay under the box as ideas for the next question. */
.sh-chips-label{flex-basis:100%;text-align:center;font-size:.875rem;color:var(--sh-ink2);margin-bottom:2px}
.sh-new[hidden]{display:none}
.sh-new:active{background:var(--sh-press)}

/* ----- Thread ----- */
.sh-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:28px;margin:0 -24px;padding:64px max(24px,calc((100% - var(--sh-col)) / 2)) 16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sh-thread:empty{display:none}
.sh-msg-you{align-self:flex-end;max-width:min(85%,560px);margin:0;padding:11px 18px;border-radius:22px;background:var(--sh-soft);color:var(--sh-ink);font-size:1rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;transform-origin:100% 100%}
.sh-rise{animation:sh-rise .42s var(--sh-ease) both}
@keyframes sh-rise{from{transform:translateY(36px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.sh-msg-bot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;align-self:stretch;max-width:100%}
.sh-who{display:flex;align-items:center;gap:8px;margin:0;color:var(--sh-ink2);font-size:.9375rem;font-weight:500}
.sh-mark{display:block;width:22px;height:22px;flex:none;border-radius:999px;object-fit:contain}
.sh-grow{width:100%;overflow:hidden;transition:height .24s var(--sh-ease)}
.sh-body{min-height:1.7em;color:var(--sh-ink);font-size:1.0625rem;line-height:1.7;overflow-wrap:anywhere}
.sh-body a{color:var(--blue,#1E3EAF);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sh-body a:hover{color:var(--navy,#27277C)}
.sh-c{animation:sh-fade .2s ease-out both}
@keyframes sh-fade{from{opacity:0}}
.sh-think{display:inline-block;font-size:.9375rem;font-weight:500;color:var(--sh-mute);background:linear-gradient(90deg,var(--sh-mute) 0%,var(--sh-mute) 35%,#D5DCE6 50%,var(--sh-mute) 65%,var(--sh-mute) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sh-shimmer 1.8s linear infinite}
@keyframes sh-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.sh-acts{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin:-4px 0 0 -10px}
.sh-act{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--sh-ink2);font:400 .9375rem/1 var(--f);cursor:pointer;transition:background-color .12s,color .16s}
.sh-act svg{width:16px;height:16px}
.sh-act:active{background:var(--sh-press)}
.sh-state{margin:-6px 0 0;font-size:.9375rem;color:#B42318}

/* ----- Composer ----- */
.sh-form{position:relative;z-index:2;display:flex;flex-direction:column;width:100%;max-width:var(--sh-col);margin:0 auto;padding:10px;border:1px solid var(--sh-line);border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(15,28,63,.04),0 10px 30px -12px rgba(15,28,63,.16);cursor:text;transition:border-color .16s,box-shadow .2s}
.sh-form:focus-within{border-color:rgba(30,62,175,.45);box-shadow:0 1px 2px rgba(15,28,63,.04),0 12px 34px -12px rgba(30,62,175,.28)}
.sh-q{display:block;width:100%;min-height:52px;max-height:200px;margin:0;padding:8px 8px 4px;border:0;outline:0;resize:none;background:transparent;color:var(--sh-ink);font:400 1rem/1.5 var(--f);scrollbar-width:thin}
.sh-q::placeholder{color:var(--sh-mute);opacity:1}
.sh-side{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:2px 2px 0}
.sh-count{margin-right:auto;padding-left:8px;font-size:.875rem;color:var(--sh-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-count.is-over{color:#B42318;font-weight:500}

/* Send: muted until there is something to send, blue when ready, a stop
   square ringed by the reply's progress while it runs. */
.sh-send{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:999px;background:var(--blue,#1E3EAF);color:#fff;cursor:pointer;transition:background-color .16s,color .16s,transform .12s}
.sh-send:active{transform:scale(.94)}
.sh-send:disabled{background:var(--sh-soft);color:#94A3B8;cursor:default;transform:none}
.sh-send svg{grid-area:1/1}
.sh .sh-i-send,.sh .sh-new svg{width:20px;height:20px}
.sh .sh-i-stop{width:12px;height:12px;fill:currentColor;stroke:none}
.sh-send .sh-i-stop,.sh-send .sh-ring{display:none}
.sh-send.is-stop{background:var(--sh-soft);color:var(--sh-ink)}
.sh-send.is-stop .sh-i-stop,.sh-send.is-stop .sh-ring{display:block}
.sh-send.is-stop .sh-i-send{display:none}
.sh .sh-ring{position:absolute;inset:-4px;width:52px;height:52px;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.sh-ring circle{fill:none;stroke-width:1.75}
.sh-ring-t{stroke:var(--sh-line)}
.sh-ring-a{stroke:var(--blue,#1E3EAF);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .12s linear}
.sh-send.is-wait .sh-ring{animation:sh-spin 1.1s linear infinite}
.sh-send.is-wait .sh-ring-a{stroke-dashoffset:.72}
@keyframes sh-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

/* ----- Suggestions and note ----- */
.sh-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:var(--sh-col);margin:16px auto 0}
.sh-chips[hidden]{display:none}
.sh-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 14px;border:1px solid var(--sh-line);border-radius:999px;background:transparent;color:var(--sh-ink2);font:400 .9375rem/1.3 var(--f);text-align:left;cursor:pointer;transition:background-color .12s,color .16s,border-color .16s}
.sh-chip svg{width:16px;height:16px;flex:none;color:var(--sh-mute);transition:color .16s}
.sh-chip:active{background:var(--sh-press)}
.sh-note{width:100%;max-width:var(--sh-col);margin:18px auto 0;font-size:.875rem;line-height:1.5;color:var(--sh-mute);text-align:center;text-wrap:pretty}
.sh-box.is-thread .sh-note{margin-top:10px}
.sh-note a{color:var(--blue,#1E3EAF);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .sh-new:hover,.sh-act:hover{background:var(--sh-hover);color:var(--sh-ink)}
  .sh-form:not(:focus-within):hover{border-color:var(--sh-line2)}
  .sh-send:not(:disabled):hover{background:var(--navy,#27277C)}
  .sh-send.is-stop:hover{background:#E2E8F0}
  .sh-chip:hover{border-color:var(--sh-line2);background:var(--sh-hover);color:var(--sh-ink)}
  .sh-chip:hover svg{color:var(--blue,#1E3EAF)}
}
.sh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sh-new:focus-visible,.sh-send:focus-visible,.sh-chip:focus-visible,.sh-act:focus-visible,.sh-body a:focus-visible,.sh-note a:focus-visible{outline:3px solid var(--accent,#1C88ED);outline-offset:2px}

@media(max-width:640px){
  .sh{padding:44px 0 52px}
  .sh-box{min-height:420px;padding:40px 14px 16px;border-radius:22px}
  .sh-box.is-thread{height:clamp(520px,82vh,720px)}
  .sh-thread{margin:0 -14px;padding:60px 14px 12px}
  .sh-msg-you{max-width:92%}
  .sh-form{border-radius:20px;padding:8px}
}
@media(max-width:420px){
  .sh-chip{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .sh-intro,.sh-rise,.sh-c,.sh-think,.sh-send.is-wait .sh-ring{animation:none}
  .sh-think{-webkit-text-fill-color:currentColor;background:none}
  .sh-grow,.sh-ring-a,.sh-send,.sh-form,.sh-chip,.sh-act,.sh-new{transition:none}
}
html[data-motion="reduce"] .sh-intro,html[data-motion="reduce"] .sh-rise,html[data-motion="reduce"] .sh-c,html[data-motion="reduce"] .sh-think,html[data-motion="reduce"] .sh-send.is-wait .sh-ring{animation:none}
html[data-motion="reduce"] .sh-think{-webkit-text-fill-color:currentColor;background:none}
html[data-motion="reduce"] .sh-grow,html[data-motion="reduce"] .sh-ring-a,html[data-motion="reduce"] .sh-send{transition:none}
html[data-a11y-motion="off"] .sh-intro,html[data-a11y-motion="off"] .sh-rise,html[data-a11y-motion="off"] .sh-c,html[data-a11y-motion="off"] .sh-think,html[data-a11y-motion="off"] .sh-send.is-wait .sh-ring{animation:none}
html[data-a11y-motion="off"] .sh-think{-webkit-text-fill-color:currentColor;background:none}
html[data-a11y-motion="off"] .sh-grow,html[data-a11y-motion="off"] .sh-ring-a,html[data-a11y-motion="off"] .sh-send{transition:none}