@layer components {
/* ── the tooltip (tip.js) ────────────────────────────────────────── */
/* Below its element, or above when there is no room; past a screen
   edge it slides along instead. A slidey element's pie follows the
   text, one line per option in its page's hue. */
@scope (#tip) {
  :scope {
    position-anchor: --tip; position-area: bottom;
    position-try-fallbacks: flip-block, bottom span-right, top span-right,
      bottom span-left, top span-left;
    position-visibility: anchors-visible;
    inset: auto; margin: 6px; max-width: min(18rem, calc(100vw - 12px));
    padding: .35rem .55rem; border: 1px solid var(--line); border-radius: calc(.5rem * var(--round));
    background: var(--bg); color: var(--ink); box-shadow: var(--float);
    font-size: .8rem; line-height: 1.3; pointer-events: none;
    opacity: 0; scale: .96;
    transition: opacity .14s ease-out, scale .14s ease-out,
      display .14s allow-discrete, overlay .14s allow-discrete;

    &:popover-open {
      opacity: 1; scale: 1;
      @starting-style { opacity: 0; scale: .96; }
    }
  }
  .tiphead {
    margin: .35rem 0 .1rem; color: var(--pg);
    font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  }
  .tiptext + .tiphead { border-top: 1px solid var(--line); padding-top: .3rem; }
  .tipopt {
    display: grid; grid-template-columns: 1.1em 1.4em 1fr auto; align-items: baseline;
  }
  .dir { color: var(--pg); font-weight: 600; }
  .glyph { font-family: var(--mono); text-align: center; }
  .keys { font: .7rem var(--mono); color: var(--dim); padding-left: .8em; }
}
} /* @layer components */