/* ══════════ THE O5 INFO ICON ══════════

   A small (i) beside a technical term -- TX1, DTCM, capture ID -- that
   explains it from the shared glossary (glossary.<term>.title / .body).
   Used in the admin (Webix), the promoter panel and the Staff Portal
   (Thymeleaf); see o5-info.js for the API.

   DEPENDS ON NOTHING, like o5-dialog.css: literal colours, o5-info-* names
   only, so Bootstrap, Webix and the themes cannot reach in. Left and right
   are logical, so Arabic mirrors by itself. */

.o5-info{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:18px;height:18px;min-width:18px;margin:0;margin-inline-start:6px;padding:0;vertical-align:-3px;
  border:1.5px solid #b3b3b3;border-radius:50%;background:transparent;color:#6b6b6b;
  font:800 11px/1 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;
  cursor:help;transition:border-color .12s,color .12s,background .12s;-webkit-tap-highlight-color:transparent}
.o5-info::before{content:'i';font-style:normal}
.o5-info:hover{border-color:#1a1a1a;color:#1a1a1a}
.o5-info[aria-expanded="true"]{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.o5-info:focus{outline:none}
.o5-info:focus-visible{outline:3px solid rgba(214,33,51,.35);outline-offset:2px}
/* A bigger target on touch screens, without a bigger icon. */
@media (pointer:coarse){.o5-info{position:relative}.o5-info::after{content:'';position:absolute;inset:-12px}}

.o5-info-pop{position:fixed;z-index:2147482000;box-sizing:border-box;max-width:min(300px,calc(100vw - 16px));
  padding:12px 14px 13px;border-radius:12px;background:#1a1a1a;color:#fff;text-align:start;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .12s ease-out,transform .12s ease-out}
.o5-info-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.o5-info-pop.is-above{transform:translateY(-4px)}.o5-info-pop.is-above.is-open{transform:none}
.o5-info-pop[hidden]{display:none !important}
/* An icon whose term has no glossary entry is hidden by o5-info.js, and
   .o5-info's inline-flex above used to draw it anyway. The panels do not load
   public/master.html's global rule, so the icon carries its own. */
.o5-info[hidden]{display:none !important}
.o5-info-pop::before{content:'';position:absolute;top:0;inset-inline:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,#d62133,#ff6f3c)}
[dir="rtl"] .o5-info-pop::before,[data-dir="rtl"] .o5-info-pop::before{background:linear-gradient(270deg,#d62133,#ff6f3c)}
.o5-info-pop-title{display:block;margin:0 0 4px;font-size:13px;font-weight:800;line-height:1.3;letter-spacing:.01em}
.o5-info-pop-body{display:block;margin:0;font-size:12.5px;font-weight:500;line-height:1.5;color:#d9d9d9;overflow-wrap:anywhere}
/* The arrow: placed by o5-info.js along the edge that faces the icon. */
.o5-info-pop-arrow{position:absolute;width:10px;height:10px;background:#1a1a1a;transform:rotate(45deg);top:-5px}
.o5-info-pop.is-above .o5-info-pop-arrow{top:auto;bottom:-5px}
@media (prefers-reduced-motion:reduce){.o5-info,.o5-info-pop{transition:none}}