/* Elf Watch "why?" tips (Paul, 29 Oct 2026): a small circle with "why?" beside a feature whose title
   needs explaining; js/why.js shows the bubble. Gold on the night-sky pages; light pages (the CRM) set
   --why-colour and --why-ink on their own body. */
.why{display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto;height:34px;min-width:34px;margin:0 0 0 8px;padding:0 6px;box-sizing:border-box;
  border-radius:999px;border:1.5px solid var(--why-colour,#F5C24A);background:transparent;color:var(--why-colour,#F5C24A);
  font:800 10.5px/1 'Plus Jakarta Sans','Inter',sans-serif;letter-spacing:.01em;cursor:pointer;vertical-align:middle;position:relative}
/* A bigger tap area than it looks (phones). */
.why::after{content:"";position:absolute;inset:-6px}
.why[aria-expanded="true"]{background:var(--why-colour,#F5C24A);color:var(--why-ink,#0B1D4D)}
.why:focus-visible{outline:3px solid var(--why-colour,#F5C24A);outline-offset:2px}
h1 .why,h2 .why,h3 .why{transform:translateY(-2px)}
.why-pop{position:absolute;z-index:1000;max-width:min(300px,calc(100vw - 16px));box-sizing:border-box;padding:12px 14px;border-radius:14px;
  background:#FFF8E8;color:#0B1D4D;font:500 15px/1.5 Inter,sans-serif;text-align:left;box-shadow:0 14px 34px rgba(4,12,40,.45);white-space:pre-line}
.why-pop::before{content:"";position:absolute;top:-7px;left:var(--why-arrow,24px);margin-left:-7px;border:7px solid transparent;border-top:0;border-bottom-color:#FFF8E8}
.why-pop.above::before{top:auto;bottom:-7px;border-bottom:0;border-top:7px solid #FFF8E8;border-left-color:transparent;border-right-color:transparent}
@media (prefers-reduced-motion:no-preference){.why-pop{animation:whyIn .14s ease-out}@keyframes whyIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}}

/* Round 4 (2 Nov 2026): a full 44px tap box that still looks small: the pill is drawn inside it. */
.why{height:44px;min-width:44px;margin-top:-5px;margin-bottom:-5px;padding:0 11px;border-color:transparent!important;background:transparent!important;isolation:isolate}
.why::before{content:"";position:absolute;left:0;right:0;top:5px;bottom:5px;border:1.5px solid var(--why-colour,#F5C24A);border-radius:999px;z-index:-1}
.why[aria-expanded="true"]::before{background:var(--why-colour,#F5C24A)}
.why::after{inset:0}