/* Ask box for the public landing page and guide articles.
 *
 * The guides define their palette as :root custom properties in their own <style> block
 * (--panel, --panel2, --border, --label, --accent …) and the landing page defines the same
 * names in landing-redesign.css, so this file names the tokens and inherits whichever
 * theme it lands in rather than restating either. Every declaration carries a literal
 * fallback so the box is still legible if it is ever dropped onto a page that defines no
 * tokens at all. */
.pa-box{
  margin:34px 0;
  background:linear-gradient(180deg,var(--panel2,#14181d),var(--panel,#0e1114));
  border:1px solid var(--border,rgba(148,170,194,.14));
  border-radius:var(--radius,14px);
  padding:20px 22px;
}
.pa-head{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted,#6b7888);margin:0 0 12px;
}
.pa-form{display:flex;gap:10px;flex-wrap:wrap}
.pa-input{
  flex:1 1 240px;min-width:0;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(148,170,194,.14));
  border-radius:9px;padding:11px 13px;
  color:var(--text,#eaf1f8);font:inherit;font-size:15px;
}
.pa-input::placeholder{color:var(--muted,#6b7888)}
.pa-input:focus{
  outline:none;
  border-color:var(--accent,#b9c8d6);
  box-shadow:0 0 0 3px rgba(185,200,214,.14);
}
.pa-send{
  flex:0 0 auto;
  background:var(--accent,#b9c8d6);color:#0b0e12;
  border:1px solid var(--accent,#b9c8d6);border-radius:9px;
  padding:11px 20px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.pa-send:hover{filter:brightness(1.08)}
.pa-send:focus-visible{outline:2px solid var(--accent,#b9c8d6);outline-offset:2px}
/* The region is empty until an answer lands; give it no height until then, so asking does
   not push the rest of the article down before there is anything to read. */
.pa-out{display:none}
.pa-out.is-shown{display:block;margin-top:14px}
.pa-answer{
  color:var(--text,#eaf1f8);font-size:15.5px;line-height:1.6;margin:0;
  white-space:pre-wrap;
}
.pa-link{display:inline-block;margin-top:10px;font-size:15px}
.pa-note{
  color:var(--muted,#6b7888);font-size:13px;line-height:1.5;margin:14px 0 0;
}
@media (max-width:520px){
  .pa-box{padding:16px 16px}
  .pa-send{width:100%}
}