/* The ask widget: a dot, and a small panel.
 *
 * Every colour carries a literal fallback. The widget sits in the layout on
 * every page, and home.css — where --accent-d and friends are defined — is
 * only pulled in by the pages that ask for it, so a token-only value would
 * render an invisible button on the pages that do not.
 */

.askdot{
  position:fixed;right:22px;bottom:22px;z-index:9998;
  width:56px;height:56px;border-radius:50%;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink, #16181c);color:var(--paper, #faf9f5);
  box-shadow:0 6px 22px rgba(0,0,0,.32);
  transition:transform .18s ease, background .18s ease;
  font:inherit;text-decoration:none;
}
.askdot:hover{background:#2a2e36;transform:translateY(-2px)}
.askdot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.askdot svg{width:22px;height:22px;display:block;fill:currentColor}
/* "D." in the brand face, the same stack .zwof-brand-tag uses — and reversed
   out of near-black, which is what lets the full stop keep the brand's red.
   On the earlier red button the stop had to go cream; here the mark is the
   wordmark exactly as the masthead sets it. */
.askdot__q{
  font-family:'ABC Normal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1;
  display:block;padding-left:2px;
}
.askdot__stop{color:var(--accent, #e1251b)}
/* Specificity, not order: ".askdot svg" is (0,1,1) and would beat a bare
   ".askdot__x" at (0,1,0), so the close icon was never hidden and the button
   rendered "?x" side by side. Both toggles are scoped to the parent to sit
   above that rule. */
.askdot .askdot__x{display:none}
.askdot.is-open .askdot__q{display:none}
.askdot.is-open .askdot__x{display:block}

@media (max-width:600px){
  .askdot{right:16px;bottom:16px;width:50px;height:50px}
  .askdot svg{width:22px;height:22px}
}

/* The panel. Anchored to the dot on a desktop; a sheet on a phone, because
   380px beside a 360px viewport is the whole screen anyway. */
.askpanel{
  position:fixed;right:22px;bottom:88px;z-index:9999;
  width:380px;max-width:calc(100vw - 44px);
  max-height:min(560px, calc(100vh - 130px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--paper, #faf9f5);color:var(--ink, #16181c);
  border:1px solid var(--line-d, #d5cbb7);border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.26);
}
.askpanel.is-open{display:flex}

@media (max-width:600px){
  .askpanel{
    right:0;left:0;bottom:0;width:auto;max-width:none;
    max-height:82vh;border-radius:12px 12px 0 0;border-bottom:0;
  }
}

.askpanel__head{
  flex:none;padding:14px 16px 12px;border-bottom:1px solid var(--line, #e2dacb);
  background:var(--panel, #e7ded0);
}
.askpanel__title{
  margin:0 0 2px;font-size:14px;font-weight:600;letter-spacing:.01em;
}
.askpanel__sub{margin:0;font-size:12px;line-height:1.45;opacity:.7}

.askpanel__form{display:flex;gap:8px;padding:12px 16px;flex:none}
.askpanel__form input{
  flex:1 1 auto;min-width:0;padding:10px 12px;font:inherit;font-size:15px;
  color:inherit;background:#fff;
  border:1px solid var(--line-d, #d5cbb7);border-radius:5px;
}
.askpanel__form input:focus{outline:2px solid var(--accent, #e1251b);outline-offset:-1px}
.askpanel__form button{
  flex:none;padding:10px 15px;font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;border:0;border-radius:5px;
  background:var(--accent, #e1251b);color:#fff;
}
.askpanel__form button:hover{background:var(--accent-d, #b31217)}
.askpanel__form button[disabled]{opacity:.55;cursor:default}

.askpanel__body{
  flex:1 1 auto;overflow-y:auto;padding:0 16px 14px;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

.askpanel__eg{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px}
.askpanel__eg button{
  font:inherit;font-size:12.5px;padding:5px 9px;cursor:pointer;
  background:var(--panel, #e7ded0);color:inherit;
  border:1px solid var(--line, #e2dacb);border-radius:3px;
}
.askpanel__eg button:hover{border-color:var(--accent, #e1251b);color:var(--accent-d, #b31217)}

.askgroup{margin:14px 0 0}
.askgroup__h{
  margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-d, #b31217);
}
.askgroup a{
  display:block;padding:9px 0;text-decoration:none;color:inherit;
  border-top:1px solid var(--line, #e2dacb);
}
.askgroup a:hover .askgroup__t{color:var(--accent-d, #b31217)}
.askgroup__t{display:block;font-size:14px;font-weight:600;line-height:1.35}
.askgroup__m{display:block;font-size:12.5px;line-height:1.5;opacity:.75;margin-top:3px}
.askgroup__meta{display:block;font-size:11.5px;opacity:.6;margin-top:3px;font-weight:500}

.asknote{font-size:13px;line-height:1.55;opacity:.8;margin:14px 0 0}
.asknote a{color:var(--accent-d, #b31217)}

/* Nothing here animates for anybody who asked not to be animated at. */
@media (prefers-reduced-motion:reduce){
  .askdot{transition:none}
  .askdot:hover{transform:none}
}