.tooltip{--tooltip-top:auto;--tooltip-right:auto;--tooltip-bottom:calc(100% + 8px);--tooltip-left:50%;--tooltip-transform-hidden:translate(-50%,-4px);--tooltip-transform-visible:translate(-50%,-8px);align-items:center;display:inline-flex;position:relative}.tooltip-content{z-index:50;top:var(--tooltip-top,auto);right:var(--tooltip-right,auto);bottom:var(--tooltip-bottom,calc(100% + 8px));left:var(--tooltip-left,50%);transform:var(--tooltip-transform-hidden,translate(-50%,-4px));width:max-content;min-width:240px;max-width:min(420px,100vw - 32px);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--color-border-light);background:var(--color-bg-primary);box-shadow:var(--shadow-md);font-size:var(--font-xs);color:var(--color-text-secondary);text-align:left;white-space:normal;word-break:break-word;writing-mode:horizontal-tb;text-orientation:mixed;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);line-height:1.4;position:absolute}.tooltip:hover .tooltip-content,.tooltip:focus-within .tooltip-content{opacity:1;visibility:visible;transform:var(--tooltip-transform-visible,translate(-50%,-8px))}.tooltip.tooltip-right{--tooltip-top:50%;--tooltip-bottom:auto;--tooltip-left:calc(100% + 8px);--tooltip-transform-hidden:translate(4px,-50%);--tooltip-transform-visible:translate(8px,-50%)}