/* The ask box (public/ask/ask.js). One stylesheet for every page that has one:
   the React pages link it, and /find's string-rendered pages (lib/answer-page.ts) too. */
.ask,.ask-chips{--ask-forest:#1a3a2a;--ask-forest2:#245038;--ask-sage:#7d9b76;--ask-sand:#e8dcc8;--ask-warm:#faf7f2;--ask-warm2:#f3ede3;--ask-ink:#1c1c1c;--ask-body:#3a3a3a;--ask-gold:#d4a654;}
.ask{position:relative;width:100%}
.ask-box{position:relative;background:#fff;border:2px solid var(--ask-forest);border-radius:14px;display:flex;align-items:center;box-shadow:0 10px 34px rgba(26,58,42,.12);transition:box-shadow .2s,border-color .2s;margin:0}
.ask-box:focus-within{box-shadow:0 12px 40px rgba(26,58,42,.2);border-color:var(--ask-forest2)}
.ask-glass{width:22px;height:22px;margin-left:18px;flex:0 0 auto;color:var(--ask-sage)}
.ask-box input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:1.15rem;color:var(--ask-ink);padding:19px 14px;margin:0}
.ask-box input::placeholder{color:#8f9c8f;opacity:1}
.ask-box button{margin:7px;background:var(--ask-forest);color:#fff;border:0;border-radius:10px;padding:13px 26px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;white-space:nowrap;transition:background .18s}
.ask-box button:hover{background:var(--ask-forest2)}
.ask.ask-sm .ask-box input{font-size:1.02rem;padding:14px 12px}
.ask.ask-sm .ask-box button{padding:10px 20px;font-size:.95rem}
.ask.ask-sm .ask-glass{width:19px;height:19px;margin-left:15px}

.ask-dd{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:#fff;border:1px solid var(--ask-sand);border-radius:14px;box-shadow:0 18px 44px rgba(26,58,42,.16);padding:8px;max-height:min(440px,62vh);overflow:auto;text-align:left}
.ask-dd[hidden]{display:none}
.ask-h{font-family:var(--font-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ask-sage);padding:8px 10px 4px}
.ask-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px;border-radius:9px;cursor:pointer;font-size:.96rem;line-height:1.35;color:var(--ask-ink)}
.ask-row>span:first-child{flex:1 1 auto;min-width:0}
.ask-row:hover,.ask-row.ask-hl{background:var(--ask-warm2)}
.ask-row.ask-first:not(.ask-hl){background:rgba(243,237,227,.45)}
.ask-row.ask-first::after{content:"Tab";flex:0 0 auto;font-family:var(--font-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;color:var(--ask-sage);border:1px solid var(--ask-sand);border-radius:5px;padding:1px 6px}
.ask-rt{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ask-ct{font-family:var(--font-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:.8rem;color:var(--ask-forest);font-weight:600}
.ask-pr{font-family:var(--font-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:.75rem;color:var(--ask-sage);background:var(--ask-warm);border:1px solid var(--ask-warm2);border-radius:6px;padding:2px 7px;white-space:nowrap}
.ask-tpl{color:var(--ask-sage);font-style:italic}
.ask-note{font-size:.8rem;color:#5f7a59;padding:6px 10px 4px;line-height:1.45}
.ask-mod{background:linear-gradient(transparent 56%,rgba(212,166,84,.42) 56%);border-radius:2px;padding:0 1px}

.ask-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask-lbl{font-family:var(--font-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ask-sage);margin-right:4px}
.ask-chip{border:1px solid var(--ask-sand);background:#fff;color:var(--ask-body);border-radius:99px;padding:7px 14px;font-size:.87rem;line-height:1.3;text-decoration:none;transition:border-color .16s,color .16s,background .16s}
.ask-chip:hover{border-color:var(--ask-sage);color:var(--ask-forest)}
.ask-chip.ask-on{background:var(--ask-forest);border-color:var(--ask-forest);color:#fff}
.ask-chip.ask-on .ask-mod{background:none;color:var(--ask-gold)}

@media(max-width:640px){
  .ask-box input{font-size:1rem;padding:15px 10px}
  .ask-box button{padding:11px 16px}
  .ask-glass{margin-left:13px}
  .ask-row{font-size:.92rem}
  .ask-row.ask-first::after{display:none}
  .ask-chip{white-space:normal;max-width:100%}
}