/* ===== ITEM TOOLTIP BUNDLE ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/item_tooltip/main.md */

/* ===== THE BOX: ONE PER PAGE AT BODY LEVEL, ABOVE EVERY POPUP ===== */
.Item_Tooltip { position: fixed; left: 0; top: 0; z-index: 100090; box-sizing: border-box; width: 400px; max-width: calc((100vw - 16px) / var(--Canvas_Zoom, 1)); max-height: calc((100vh - 16px) / var(--Canvas_Zoom, 1)); overflow: hidden; text-align: left; font-family: var(--Font_Body); font-size: var(--Font_Text_Small); line-height: 1.4; color: var(--Color_Text); box-shadow: 0 6px 18px rgba(20, 30, 60, 0.28); pointer-events: none; zoom: var(--Canvas_Zoom, 1); transition: opacity 0.1s ease; }
@starting-style { .Item_Tooltip { opacity: 0; } }

/* ===== THE BAND: TWO TOP CORNERS, THE ART, THE NAME ===== */
.Item_Tooltip_Head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 12px; text-align: center; background: color-mix(in srgb, var(--Item_Tooltip_Tint, var(--Color_Muted)) 10%, transparent); }
.Item_Tooltip_Head:has(.Item_1) { --Item_Tooltip_Tint: var(--Color_Quality_1); }
.Item_Tooltip_Head:has(.Item_2) { --Item_Tooltip_Tint: var(--Color_Quality_2); }
.Item_Tooltip_Head:has(.Item_3) { --Item_Tooltip_Tint: var(--Color_Quality_3); }
.Item_Tooltip_Head:has(.Item_4) { --Item_Tooltip_Tint: var(--Color_Quality_4); }
.Item_Tooltip_Head:has(.Item_5) { --Item_Tooltip_Tint: var(--Color_Quality_5); }
.Item_Tooltip_Art { flex: none; width: 100px; height: 100px; }
.Item_Tooltip_Name { font-size: var(--Font_Text_Mid); line-height: 1.25; overflow-wrap: anywhere; }
.Item_Tooltip_Meta { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; line-height: 1.3; color: var(--Color_Text_Soft); }
.Item_Tooltip_Meta > span { display: flex; flex-direction: column; max-width: calc(50% - 60px); }
.Item_Tooltip_Meta > span:first-child { align-items: flex-start; text-align: left; }
.Item_Tooltip_Meta > span:last-child { align-items: flex-end; text-align: right; }
.Item_Tooltip_Quantity { white-space: nowrap; }

/* ===== SECTIONS: A 2PX RULE BETWEEN EACH, THE EXPIRY LINE JOINS THE TEXT ABOVE IT ===== */
.Item_Tooltip_Body > * + * { border-top: 2px solid var(--Color_Secondary_Line); }
.Item_Tooltip_Body > .Item_Tooltip_Text + .Item_Tooltip_Text { padding-top: 0; border-top: 0; }

/* ===== GEAR STATS: TWO COLUMNS WHERE THEY FIT, ONE ON A PHONE; THE LABEL LEFT, THE VALUE RIGHT ===== */
.Item_Tooltip_Stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 24px; padding: 8px 12px; font-weight: bold; }
.Item_Tooltip_Stat { display: flex; justify-content: space-between; gap: 10px; }
.Item_Tooltip_Stat > span:not([class]) { color: var(--Color_Text_Soft); }

/* ===== THE TEXT, AND THE FOOT: THE TRADE ICON AND MARKET VALUE AT THE LEFT, BASE VALUE AT THE RIGHT ===== */
.Item_Tooltip_Text { padding: 10px 12px; }
.Item_Tooltip_Text p { margin: 0; }
.Item_Tooltip_Text p + p { margin-top: 8px; }
.Item_Tooltip_Foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; color: var(--Color_Text_Soft); }
.Item_Tooltip_Foot > span { display: inline-flex; align-items: center; white-space: nowrap; }
.Item_Tooltip_Foot b { color: var(--Color_Text); }
.Item_Tooltip_Foot b, .Item_Tooltip_Foot i { position: relative; top: 0.6px; }
.Item_Tooltip_Foot b + img { margin-left: 5px; }
.Item_Tooltip_Market_Value > b, .Item_Tooltip_Market_Value > i { margin-left: 5px; }
.Item_Tooltip_Base_Value { margin-left: auto; }

/* ===== THE TREND AFTER THE MARKET VALUE'S COIN: THE ARROW UP OR DOWN, OR THE FLAT BAR ===== */
.Item_Tooltip_Trend { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; }
.Item_Tooltip_Trend svg { display: block; width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.Trend_Up { color: var(--Color_Positive); }
.Trend_Up svg { transform: rotate(-90deg); }
.Trend_Down { color: var(--Color_Negative); }
.Trend_Down svg { transform: rotate(90deg); }
.Trend_Flat { color: var(--Color_Muted); }
.Trend_Flat::before { content: ''; width: 10px; height: 2px; background: currentColor; }

/* ===== REDUCED MOTION; TOUCH: DEVICE-ANCHORED, TAPPABLE ===== */
@media (prefers-reduced-motion: reduce) { .Item_Tooltip { transition: none; } }
@media (hover: none) and (pointer: coarse)
	{
		.Item_Tooltip { zoom: var(--Device_Scale, 1); pointer-events: auto; max-width: var(--Device_Width, 100vw); max-height: calc(var(--Device_Height, 100vh) - 16px); overflow-y: auto; }
	}