/* preview-card.css — the popup preview-card.js positions. Link it from any page that calls previewCards(); see that file for the behaviour. The look is the base-ui PreviewCard hand-over of 2026-09-19: a 240px card on the page's own canvas colour, 8px radius, 8px padding, an 8px gap between an image and a 14px paragraph, a hairline outline, a soft shadow, and an arrow drawn from the same canvas and hairline. It enters and leaves as scale(.9)/opacity 0 from the arrow's side. Colour comes from five tokens, so one page can dress it as paper and another as glass. The defaults are the browser's own light/dark canvas, which is what the hand-over used; a page sets them on :root or on any ancestor of . */ :root { --pc-bg: Canvas; --pc-fg: CanvasText; --pc-line: rgba(0, 0, 0, 0.14); --pc-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.28); --pc-w: 240px; --pc-r: 8px; --pc-font: inherit; } .pc-popup { position: fixed; z-index: 1000; width: var(--pc-w); padding: 8px; border-radius: var(--pc-r); background: var(--pc-bg); color: var(--pc-fg); outline: 1px solid var(--pc-line); box-shadow: var(--pc-shadow); font-family: var(--pc-font); transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.16s ease; pointer-events: auto; } .pc-popup.is-starting, .pc-popup.is-ending { transform: scale(0.9); opacity: 0; } .pc-popup.is-ending { pointer-events: none; } .pc-body { display: flex; flex-direction: column; gap: 8px; } .pc-body img { display: block; width: 100%; height: auto; border-radius: 2px; } .pc-body p { margin: 0; font-size: 14px; line-height: 1.45; text-wrap: pretty; } .pc-body strong { font-weight: 700; } /* The arrow: 20x10, centred on the trigger by preview-card.js through `left`. */ .pc-arrow { position: absolute; width: 20px; height: 10px; margin-left: -10px; line-height: 0; } .pc-arrow svg { display: block; } .pc-arrow-fill { fill: var(--pc-bg); } .pc-arrow-line { fill: var(--pc-line); } .pc-popup[data-side="top"] .pc-arrow { bottom: -8px; transform: rotate(180deg); } .pc-popup[data-side="bottom"] .pc-arrow { top: -8px; } @media (prefers-reduced-motion: reduce) { .pc-popup { transition: none; } }