/* "i" button that shows the explanation on tap (use <details class="i"><summary>i</summary><div class="pop">…</div></details> inside a block with position:relative). */
details.i{position:absolute;top:12px;right:12px}
details.i summary{list-style:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:italic 600 13px/19px Georgia,serif;text-align:center;cursor:pointer;box-sizing:border-box}
details.i summary::-webkit-details-marker{display:none}
/* 44 px touch area around the 22 px circle */
details.i summary{position:relative}
details.i summary::after{content:"";position:absolute;inset:-11px}
details.i[open] summary{color:var(--text);border-color:var(--text)}
details.i .pop{position:absolute;right:0;top:28px;width:min(340px,calc(100vw - 48px));background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:20;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:13px;line-height:1.5;text-align:left}
details.i .pop p,details.i .pop ol{margin:0}
details.i .pop ol{padding-left:18px}
details.i .pop{max-height:60vh;overflow:auto}
details.i.solto{position:relative;top:auto;right:auto;display:inline-block}
details.i.solto .pop{left:0;right:auto}