children of a bare list, distinct from the .ody-list__item row API.
---------------------------------------------------------------------------- */
.ody-list--plain{ display:flex; flex-direction:column; gap:var(--ody-sp-2); color:var(--ody-ink-2); font-size:var(--ody-fs-body); }
.ody-list--plain > li{ padding-left:var(--ody-sp-4); position:relative; }
.ody-list--plain > li::before{ content:""; position:absolute; left:2px; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--ody-ink-4); }
.ody-list--check{ display:flex; flex-direction:column; gap:var(--ody-sp-2); color:var(--ody-ink-2); font-size:var(--ody-fs-body); }
.ody-list--check > li{ padding-left:var(--ody-sp-6); position:relative; }
.ody-list--check > li::before{
content:""; position:absolute; left:0; top:.14em; width:16px; height:16px;
background:var(--ody-ok); border-radius:50%;
-webkit-mask:url('data:image/svg+xml;utf8, with NO visual style of its own — only the
legacy .ody-tooltip__pop had a bubble. Give the *floating* .ody-tooltip
a real bubble + per-placement arrow + .is-open transition.
2. Popover: add an optional arrow + structural __head/__body/__foot
(dist only ships __title).
3. .ody-hovercard — NEW rich hover surface (CSS-only reveal, host-safe).
============================================================================ */
/* ---- Tooltip: visual for the JS-driven floating node -------------------- */
/* Scoped to the body-level node the JS builds (it carries BOTH .ody-tooltip
AND a .ody-tooltip--{placement} modifier); the bare trigger only ever has
[data-ody-tooltip], so this never restyles triggers. */
.ody-tooltip[class*="ody-tooltip--"]{
position:absolute; z-index:80; max-width:220px; padding:5px var(--ody-sp-2);
border-radius:var(--ody-r-xs); background:var(--ody-ink); color:var(--ody-surface);
font-size:var(--ody-fs-micro); font-weight:var(--ody-fw-medium); line-height:1.3;
box-shadow:var(--ody-sh-md); pointer-events:none; opacity:0; transform:translateY(2px);
transition:opacity var(--ody-dur) var(--ody-ease), transform var(--ody-dur) var(--ody-ease);
}
.ody-tooltip[class*="ody-tooltip--"].is-open{ opacity:1; transform:translateY(0); }
/* arrow — a rotated square tinted to the bubble ink */
.ody-tooltip[class*="ody-tooltip--"]::after{
content:""; position:absolute; width:8px; height:8px; background:var(--ody-ink);
border-radius:1px;
}
.ody-tooltip--top::after{ bottom:-3px; left:50%; transform:translateX(-50%) rotate(45deg); }
.ody-tooltip--bottom::after{ top:-3px; left:50%; transform:translateX(-50%) rotate(45deg); }
.ody-tooltip--left::after{ right:-3px; top:50%; transform:translateY(-50%) rotate(45deg); }
.ody-tooltip--right::after{ left:-3px; top:50%; transform:translateY(-50%) rotate(45deg); }
/* ---- Popover: optional arrow + structural head/body/foot ---------------- */
.ody-popover__head{
display:flex; align-items:center; gap:var(--ody-sp-2);
margin:calc(var(--ody-sp-4) * -1) calc(var(--ody-sp-4) * -1) var(--ody-sp-3);
padding:var(--ody-sp-3) var(--ody-sp-4); border-bottom:1px solid var(--ody-hairline);
font-weight:var(--ody-fw-semibold); color:var(--ody-ink);
}
.ody-popover__body{ color:var(--ody-ink-2); font-size:var(--ody-fs-body); }
.ody-popover__body > p{ margin:0 0 var(--ody-sp-2); }
.ody-popover__body > p:last-child{ margin-bottom:0; }
.ody-popover__foot{
display:flex; justify-content:flex-end; gap:var(--ody-sp-2);
margin:var(--ody-sp-3) calc(var(--ody-sp-4) * -1) calc(var(--ody-sp-4) * -1);
padding:var(--ody-sp-3) var(--ody-sp-4); border-top:1px solid var(--ody-hairline);
background:var(--ody-surface-2);
}
/* opt-in arrow via .ody-popover--arrow (top-anchored / placement=bottom) */
.ody-popover--arrow::before{
content:""; position:absolute; top:-5px; left:var(--ody-sp-5); width:10px; height:10px;
background:var(--ody-surface); border-left:1px solid var(--ody-border);
border-top:1px solid var(--ody-border); transform:rotate(45deg); border-radius:2px 0 0 0;
}
/* ---- Hover card: NEW rich hover surface (CSS-only, host-safe) ------------ */
.ody-hovercard{ position:relative; display:inline-flex; }
.ody-hovercard__panel{
position:absolute; top:calc(100% + var(--ody-sp-2)); left:0; z-index:85;
width:280px; max-width:min(320px, 90vw); padding:var(--ody-sp-4);
background:var(--ody-surface); border:1px solid var(--ody-border);
border-radius:var(--ody-r); box-shadow:var(--ody-sh-pop); color:var(--ody-ink-2);
font-size:var(--ody-fs-body); opacity:0; visibility:hidden; transform:translateY(-4px);
transition:opacity var(--ody-dur) var(--ody-ease), transform var(--ody-dur) var(--ody-ease),
visibility var(--ody-dur); pointer-events:none;
}
/* invisible hover bridge so the pointer can cross the gap into the panel */
.ody-hovercard__panel::before{
content:""; position:absolute; left:0; right:0; top:calc(var(--ody-sp-2) * -1); height:var(--ody-sp-2);
}
.ody-hovercard:hover > .ody-hovercard__panel,
.ody-hovercard:focus-within > .ody-hovercard__panel{
opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.ody-hovercard--right > .ody-hovercard__panel{ left:auto; right:0; }
.ody-hovercard__media{
display:flex; align-items:center; gap:var(--ody-sp-3); margin-bottom:var(--ody-sp-3);
}
.ody-hovercard__media img,.ody-hovercard__avatar{
flex:0 0 auto; width:44px; height:44px; border-radius:var(--ody-r-pill);
object-fit:cover; background:var(--ody-surface-2); display:grid; place-items:center;
color:var(--ody-ink-3); border:1px solid var(--ody-hairline);
}
.ody-hovercard__title{ display:block; font-weight:var(--ody-fw-semibold); color:var(--ody-ink); line-height:1.25; }
.ody-hovercard__meta{ display:block; font-size:var(--ody-fs-sm); color:var(--ody-ink-3); }
.ody-hovercard__body{ display:block; color:var(--ody-ink-2); font-size:var(--ody-fs-sm); line-height:1.45; }
.ody-hovercard__foot{
display:flex; align-items:center; gap:var(--ody-sp-4); margin-top:var(--ody-sp-3);
padding-top:var(--ody-sp-3); border-top:1px solid var(--ody-hairline);
font-size:var(--ody-fs-sm); color:var(--ody-ink-3);
}
/* respect reduced motion for every overlay added here */
@media (prefers-reduced-motion: reduce){
.ody-tooltip[class*="ody-tooltip--"],
.ody-hovercard__panel{ transition:none; }
}