/* ix-info-v1.0.0.css
   ════════════════════════════════════════════════════════════════
   INBXIFY ix series — SURFACE INFO BADGE + POPOVER · styling
   Companion to ix-info-v1_0_0.js. The popover's critical geometry
   and card colors are inline-!important in the JS (cascade-proof);
   this file styles the badge and the popover's typography.
   Requires ix-tokens v1.0.4+.
*/

.ix-info-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent; color: inherit;
  border-radius: 999px; padding: 3px 10px 3px 6px;
  font-family: var(--ix-font-mono, 'DM Mono', monospace);
  font-size: 11px; cursor: pointer; line-height: 1;
}
.ix-info-badge:hover { border-color: rgba(255, 255, 255, .7); }
.ix-info-i {
  width: 15px; height: 15px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ix-gold, #C4A35A); color: #1A3A3A;
  font-style: normal; font-weight: 700; font-size: 10px;
  font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif);
}
.ix-info-v { opacity: .85; }

/* Popover typography — card geometry/colors are inline in the JS. */
.ix-info-pop { font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif); font-size: 13px; }
.ix-info-t { font-family: var(--ix-font-display, Fraunces, Georgia, serif); font-size: 16.5px; font-weight: 600; color: var(--ix-teal, #1A3A3A); margin-bottom: 3px; }
.ix-info-f { font-family: var(--ix-font-mono, 'DM Mono', monospace); font-size: 10.5px; color: #5A6478; margin-bottom: 9px; overflow-wrap: break-word; }
.ix-info-b { line-height: 1.5; margin-bottom: 10px; white-space: pre-line; }
.ix-info-h { font-family: var(--ix-font-mono, 'DM Mono', monospace); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #5A6478; margin: 0 0 5px; }
.ix-info-s { line-height: 1.45; margin-bottom: 4px; }
.ix-info-s b { color: var(--ix-teal, #1A3A3A); font-weight: 600; }