/* The Ask a question panel (src/partials/chat.html), from base.css: the redrawn pages and Home no longer load base.css, so the panel opened unstyled at the foot of the page (Colin 9 Nov 2026 20:0x). The pill itself (.cw-btn) is styled by each page already. */
.cw :focus-visible{outline-color:#b8950a}
.cw-hint{position:fixed;right:22px;bottom:92px;z-index:80;max-width:260px;background:#fff;color:#16302b;border-radius:16px 16px 4px 16px;padding:12px 44px 12px 14px;font:600 14px/1.45 Manrope,sans-serif;box-shadow:0 18px 40px -16px rgba(6,38,33,.55);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease)}
.cw-hint.show{opacity:1;transform:none;pointer-events:auto}
.cw-hint button{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#4d6862;font-size:20px;line-height:1;cursor:pointer;padding:0;border-radius:12px}
.cw{position:fixed;right:22px;bottom:22px;z-index:90;width:396px;max-height:min(680px,calc(100vh - 44px));display:flex;flex-direction:column;background:#fff;color:#16302b;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(6,38,33,.7),0 0 0 1px rgba(16,61,54,.08);transform-origin:bottom right;font-family:Manrope,"Segoe UI",sans-serif;animation:cwIn .3s var(--ease) both}
.cw-head{background:var(--green);color:#fff;padding:14px 14px 14px 16px;display:flex;gap:12px;align-items:center;flex:0 0 auto}
.cw-head .av{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:0 0 40px}
.cw-head .av img{width:26px;height:26px}
.cw-head h2{font:800 17px/1.2 Manrope,sans-serif;letter-spacing:-.01em;margin:0;color:#fff}
.cw-head p{margin:2px 0 0;color:#bcd3cb;font-size:13px;line-height:1.35}
.cw-head .x{margin-left:auto;border:0;background:rgba(255,255,255,.12);color:#fff;width:40px;height:40px;border-radius:12px;cursor:pointer;display:grid;place-items:center;flex:0 0 40px}
.cw-head .x svg{width:16px;height:16px}
.cw-body{flex:1 1 auto;overflow:auto;padding:16px;background:#f4f7f5;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.cw-intro{background:#fff;border:1px solid #e1e8e5;border-radius:16px 16px 16px 6px;padding:12px 14px;font-size:14.5px;line-height:1.5;margin:0}
.cw-topics{display:flex;flex-wrap:wrap;gap:7px;border:0;margin:0;padding:0;min-width:0}
.cw-topics legend{font-size:12.5px;font-weight:700;color:#35524b;margin-bottom:6px;padding:0}
.cw-topics button{border:1.5px solid #cbdad4;background:#fff;color:#103d36;border-radius:999px;padding:8px 12px;font:700 13px Manrope,sans-serif;cursor:pointer;transition:border-color .2s,background .2s}
.cw-topics button:hover,.cw-topics button[aria-pressed="true"]{border-color:var(--gold);background:#fffbe6}
.cw-form{display:grid;gap:10px;background:#fff;border:1px solid #e1e8e5;border-radius:16px;padding:14px;position:relative}
.cw-form .f{display:grid;gap:5px}
.cw-form label{font-size:13px;font-weight:700;color:#35524b}
.cw-form label small{font-weight:500;color:#4d6862}
.cw-form input,.cw-form textarea{width:100%;font:500 15px Manrope,sans-serif;padding:10px 12px;border-radius:10px;border:1.5px solid #cfdcd6;background:#f7faf8;color:#103d36}
.cw-form textarea{min-height:92px;resize:vertical}
.cw-form input:focus,.cw-form textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--green)}
.cw-form [aria-invalid="true"]{border-color:#b53535;background:#fdf6f5}
.cw-form .err{color:#9b2c2c;font-size:12.5px;font-weight:700}
.cw-form .trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.cw-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--gold);color:var(--green);font:800 15px Manrope,sans-serif;min-height:48px;padding:12px 16px;border-radius:999px;cursor:pointer}
.cw-send svg{width:16px;height:16px}
.cw-send:disabled{opacity:.7;cursor:wait}
.cw-status{margin:0;font-size:13.5px;line-height:1.5}
.cw-status:not(:empty){padding:10px 12px;border-radius:10px;background:#fdf1f0;color:#6d1f1f;border-left:4px solid #b53535}
.cw-done{background:#fff;border:1px solid #cfeedb;border-radius:16px;padding:16px;font-size:14.5px;line-height:1.55}
.cw-done h3{font:800 17px/1.25 Manrope,sans-serif;margin:0 0 6px;letter-spacing:-.01em}
.cw-done p{margin:0 0 12px}
.cw-done button{border:1.5px solid #cbdad4;background:#fff;color:#103d36;border-radius:999px;padding:9px 14px;font:700 13.5px Manrope,sans-serif;cursor:pointer}
.cw-legal{font-size:12px;color:#4d6862;padding:10px 16px 12px;background:#fff;border-top:1px solid #e6ebe9;line-height:1.45;margin:0;flex:0 0 auto}
.cw-legal a{color:inherit}
@media (max-width:520px){.cw{left:8px;right:8px;bottom:8px;width:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:20px}.cw-hint{right:14px;bottom:78px;max-width:calc(100vw - 28px)}}
@media (prefers-reduced-motion:reduce){.cw{animation:none}}
.cw[hidden],.cw-hint[hidden]{display:none!important}

/* The pill pops (Colin 9 Nov 2026 20:3x: "make it pop out a bit more then and give it a little jiggle"): gold with dark words, a light
   ring and a lifted shadow, so it stands out on the dark heroes and the light pages; a short wiggle 4 s after load, then every 24 s. */
.cw-btn{background:var(--gold,#eac51b)!important;color:#103d36!important;box-shadow:0 0 0 3px #ffffffd9,0 18px 40px -12px #062621cc!important;animation:cw-jiggle 24s ease-in-out 4s infinite}
.cw-btn svg{color:#103d36!important}
.cw-btn:hover{animation-play-state:paused}
@keyframes cw-jiggle{0%,3.4%,100%{transform:none}0.6%{transform:rotate(-6deg) scale(1.04)}1.2%{transform:rotate(5deg) scale(1.04)}1.8%{transform:rotate(-4deg)}2.4%{transform:rotate(3deg)}3%{transform:rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.cw-btn{animation:none}}