/* Hari Villa — tooltips for interactive controls. * * The `title` attribute is useless on touch, which is where this app lives. * The pattern (see docs/TOOLTIPS-TRILINGUAL.md): * - every control carries data-tip (English now; data-tip-hi / data-tip-pa * held in the markup for a one-line language switch later) AND an * aria-label if it is icon-only. * - pointer devices reveal data-tip on :hover / :focus-visible. * - touch devices reveal it on the FIRST tap of an icon-only control; a * second tap runs the action (tooltips.js). Text controls are not gated. * * The tooltip is a ::after bubble that is display:none until revealed — so a * hidden tooltip adds nothing to layout and the mobile-overflow guard still * measures a clean page. */ .hv-tip { position: relative; } .hv-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 80; display: none; /* hidden costs no layout — keeps the overflow guard clean */ width: max-content; max-width: min(220px, 78vw); background: var(--navy); color: var(--paper); font-size: 0.75rem; line-height: 1.45; font-weight: 500; text-align: left; white-space: normal; padding: 0.4rem 0.55rem; border-radius: 6px; box-shadow: 0 6px 20px rgba(4, 12, 24, 0.28); pointer-events: none; } /* No tip string → no bubble (e.g. before the language columns are filled). */ .hv-tip:not([data-tip])::after, .hv-tip[data-tip=""]::after { content: none; } /* Edge controls anchor to their own edge so the bubble stays on screen instead of pushing past the viewport (which a centred bubble would, and the overflow guard would then catch). --end opens leftward (right cluster); --start opens rightward (the far-left menu button). */ .hv-tip--end::after { left: auto; right: 0; transform: none; } .hv-tip--start::after { left: 0; right: auto; transform: none; } /* The whole reveal is gated on the site-wide toggle: an admin can set data-tooltips="off" on (Control Panel) and no bubble shows anywhere. Absent attribute = on, so the default is tooltips enabled. The aria-labels stay regardless — turning off the visual tooltip must not un-name a control for a screen reader. */ /* Pointer devices: hover / keyboard focus reveal it. */ @media (hover: hover) and (pointer: fine) { :root:not([data-tooltips="off"]) .hv-tip:hover::after, :root:not([data-tooltips="off"]) .hv-tip:focus-visible::after { display: block; } } /* Touch: tooltips.js adds this on the first tap of an icon-only control. */ :root:not([data-tooltips="off"]) .hv-tip.is-tip-open::after { display: block; } /* Control Panel: the site-wide toggle row. */ .hv-setting { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; cursor: pointer; } .hv-setting input { width: 18px; height: 18px; accent-color: var(--navy); }