/* The rose figure (static/js/home-figure.js), wherever it is mounted: a .rose-wrap holding a
   .rose host with data-rose. The home page sizes its own copy in home.css. */
.rose-wrap { position: relative; }
.rose svg { display: block; }
/* letter-spacing in user units, not em: Safari collapses em spacing on SVG text, which merges
   the glyphs under the paper halo */
.rose text { font-family: var(--font-mono); letter-spacing: 0.35px; }
/* the petal hit areas are focusable for the hover effect; no ring or tap flash */
.rose path { -webkit-tap-highlight-color: transparent; }
.rose path:focus { outline: none; }
/* the hover card */
.rose-wrap .tip {
  position: absolute; pointer-events: none; z-index: 5; display: none;
  background: var(--paper); border: 2px solid var(--ink);
  padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: 11px;
  line-height: 1.6; color: var(--ink); max-width: 240px;
}
@media (max-width: 640px) {
  .rose-wrap .tip { font-size: 11px; padding: var(--sp-1) var(--sp-2); line-height: 1.45; max-width: 170px; }
}