/* ═══ INFO ICON — [FEATURE-INFOICON-01] ONE owner of how an (i) looks and sits, for the app AND onboarding ═══
 * Loaded by index.html and onboard.html. Colour variables fall back from the app's names to onboarding's, so the icon is identical in both.
 * Placement rule [FEATURE-INFOPLACE-01]: slight upper right of the card, bubble or field it explains. It takes no layout space. */
.apk-info-btn {
  background: none; border: none; padding: 0 0 0 4px; margin: 0; cursor: pointer;
  color: var(--text-secondary, var(--t3, #94a3b8)); vertical-align: -3px; line-height: 1;
}
.apk-info-btn:hover { color: var(--primary-text, var(--primary, #2563eb)); }
.apk-info-btn .material-symbols-outlined { font-size: 15px; pointer-events: none; }
.apk-info-corner { position: absolute; top: 4px; right: 4px; padding: 2px; opacity: .55; z-index: 2; min-width: 0; min-height: 0; }
.apk-info-corner:hover, .apk-info-corner:focus-visible { opacity: 1; }
.apk-info-corner .material-symbols-outlined { font-size: 13px; }
:has(> .apk-info-corner) { position: relative; }
.apk-info-pop {
  position: fixed; z-index: 14600;
  padding: 11px 13px; border-radius: 11px;
  background: var(--bg-secondary, var(--bg2, #1e293b)); border: 1px solid var(--border, var(--bd, #334155));
  box-shadow: 0 8px 28px rgba(0,0,0,.4);
  font-size: 12.5px; line-height: 1.55; color: var(--text-primary, var(--t1, #f1f5f9));
}
/* A chat bubble or form group that carries the icon keeps its text clear of it. */
.obc-b:has(> .apk-info-corner) { padding-right: 30px; }
.form-group:has(> .apk-info-corner) > label { padding-right: 26px; }