/* The round magnet that pins every sticky note: fridge notes, filled demand slots, fact stickies, the hero note, the shop's price tags and notes, the guides' callouts, Grandma's dealt notes, the submit page's note and checklist, the dashboard's notes and slips, the public pages' project cards, the order page's sums and stop note, the share note on a project's page, the status note on an error page. */
.note::before, .slot[data-tier]::before, .sticky::before, .stage-note::before, .price-tag::before, .guest-note::before, .howto-note::before, .callout::before, .dnote::before, .submit-note::before, .submit-checks::before, .dash-note::before, .slip::before, .pub-card::before, .order-sums::before, .order-stop::before, .share-note::before, .error-note::before {
  content: ""; position: absolute; top: -0.6rem; left: 50%;
  width: 1.1rem; height: 1.1rem; margin-left: -0.55rem;
  background: var(--red); border: 3px solid var(--ink); border-radius: 50%;
}

/* Speech bubbles: Grandma talking, in the pay calculator (.bubble) and in every dialogue (.talk-bubble). One frame and one
   tail for both; each page's own CSS adds its layout. */
.bubble, .talk-bubble {
  position: relative; background: var(--canvas); border: var(--line) solid var(--ink); border-radius: var(--wobble-a);
}
.bubble::before, .bubble::after, .talk-bubble::before, .talk-bubble::after { /* tail pointing at Grandma */
  content: ""; position: absolute; left: -22px; top: 40%; width: 0; height: 0;
  border: 14px solid transparent; border-right: 22px solid var(--ink); border-left: 0;
}
.bubble::after, .talk-bubble::after { left: -15px; border-right-color: var(--canvas); }
@media (max-width: 800px) {   /* stacked layout: the tail points up at Grandma */
  .bubble::before, .bubble::after, .talk-bubble::before, .talk-bubble::after { left: 2.5rem; top: -22px; border: 14px solid transparent; border-bottom: 22px solid var(--ink); border-top: 0; }
  .bubble::after, .talk-bubble::after { top: -15px; border-bottom-color: var(--canvas); }
}

/* Something went wrong: a pink sticky note under the box that caused it (sign-in, dialogues). */
.oops { margin: 0; padding: 0.35rem 0.8rem; font-weight: 700; line-height: 1.25; background: var(--note-pink); border: 3px solid var(--ink); rotate: -0.6deg; }