/* ============================================================ CONDITION TOOLTIP — the bubble only. The icon that opens it is styled in css/condition-rows.css, next to the row it belongs to. Every selector here is .cond-tip-prefixed and the element is a direct child of , so this file cannot reach the cards, the selector or any other page. Styled as a miniature result card — white, hairline border, soft shadow — rather than the usual inverted dark tooltip, so it reads as part of the same surface family as everything around it. ============================================================ */ .cond-tip{ position:fixed; /* Under the bottom sheet (1200) and the header, above the cards. */ z-index:900; /* Narrow enough to force the copy into 2–4 short lines instead of one long ribbon. The viewport clamp is what keeps it on screen at 360px; js/condition-tooltip.js additionally clamps its LEFT edge, so the two together cover both axes. */ max-width:min(216px, calc(100vw - 24px)); padding:10px 13px; border-radius:11px; background:#fff; border:1px solid #E5E8E3; color:#3D4440; /* 400, not 500: this is a short informational note, not a callout, and the extra weight was reading as emphasis. 400 is a real loaded Inter weight (the URL requests 400;500;600;700), so there is no synthesised faux-bold here — the same trap that widened the condition labels on a real iPhone. Line-height is 1.45 and letter-spacing .1px; both already suit a 400 face, so neither moves and the box geometry is unchanged. */ font-family:'Inter';font-size:.84rem;font-weight:400;line-height:1.45; letter-spacing:.1px; /* Two very soft layers: a wide ambient one to lift the card off the page and a 1px contact shadow so the hairline border does not have to carry the edge on its own. Deliberately lighter than the result cards' own shadow — this floats above them, but it must not read as heavier than the row it describes. */ box-shadow:0 4px 14px rgba(28,36,30,.09), 0 1px 3px rgba(28,36,30,.05); /* Never eats a tap: the bubble is informational, and swallowing the tap that dismisses it would trap the seller on mobile. */ pointer-events:none; /* Fade up. No scale — a growing tooltip pulls the eye, which is the opposite of what this element is for. */ opacity:0;transform:translateY(4px); transition:opacity 130ms ease-out, transform 130ms ease-out; } .cond-tip.is-open{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .cond-tip{transition:none;} } /* The caret is a rotated square, not a solid CSS triangle: a triangle is a single flat colour and cannot carry the card's 1px border, so against a white bubble it would read as a floating grey wedge. Two adjacent borders on a 9px square give a properly outlined arrow, and the square's unbordered half sits back over the bubble's own border and hides the seam. Its horizontal position comes from a custom property set in js/condition-tooltip.js, so it keeps pointing at the icon even when the bubble has been clamped against a viewport edge. */ .cond-tip-arrow{ position:absolute; left:var(--cond-tip-arrow-x, 50%); width:9px;height:9px; margin-left:-4.5px; background:#fff; transform:rotate(45deg); } /* Bubble ABOVE the icon — caret hangs off the bottom, so the two lower diagonals (the right and bottom edges, once rotated) are the ones that need the outline. */ .cond-tip .cond-tip-arrow{ top:100%;margin-top:-5.5px; border-right:1px solid #E5E8E3; border-bottom:1px solid #E5E8E3; } /* Bubble BELOW the icon — caret sits on top, so the opposite pair outlines it. */ .cond-tip.is-below .cond-tip-arrow{ top:auto;bottom:100%; margin-top:0;margin-bottom:-5.5px; border-right:0;border-bottom:0; border-left:1px solid #E5E8E3; border-top:1px solid #E5E8E3; }