.pen-cost-hint {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .75rem; min-height: 44px; margin-inline: .25rem;
  border: 0; border-radius: 999px; background: transparent;
  color: inherit; font: inherit; font-size: .75rem; font-weight: 500;
  line-height: 1.5; text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
/* Keep a compact badge inside the full keyboard/touch target. */
.pen-cost-hint::before {
  content: ""; position: absolute; inset: .5rem 0; z-index: -1;
  border-radius: inherit; background: currentColor; opacity: .06;
  pointer-events: none;
}
.pen-cost-hint:hover::before,
.pen-cost-hint:focus-visible::before { opacity: .1; }
.pen-cost-hint[data-pen-hint-cost="0"] { display: none; }
.pen-cost-hint:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* The Spotty composers (ticket 02202c95, 2026-10-31): beside the field the
   "Uses 1 Pen · Understood" note left a 61px message field at 360px. Below
   the sm breakpoint the note wraps onto its own line UNDER the field, right
   under the send disc, and the field keeps the row's full width; the chip
   and the word keep their 44px touch targets through their hit areas while
   the line itself stays 32px high. The line KEEPS that height while a reply
   streams (the chip reads 0 and hides, hint_note.css hides the word with it):
   the composer is bottom-anchored, so without it the field jumped ~30px
   down and back on every send. Desktop is unchanged. */
@media (max-width: 639.98px) {
  .pen-cost-note-row { flex-wrap: wrap; }
  .pen-cost-note { flex-basis: 100%; min-height: 32px; justify-content: flex-end; margin-top: -2px; }
  .pen-cost-note .pen-cost-hint { min-height: 32px; padding-top: .25rem; padding-bottom: .25rem; }
  .pen-cost-note .pen-cost-hint::after { content: ""; position: absolute; inset: -6px 0; }
  .pen-cost-note .hint-understood { min-height: 32px; }
}
.pen-cost-tooltip {
  position: fixed; z-index: 100000; max-width: min(20rem, calc(100vw - 2rem));
  padding: .65rem .8rem; border: 1px solid currentColor; border-radius: .65rem;
  background: Canvas; color: CanvasText; box-shadow: 0 3px 16px #0002;
  font: 500 .8rem/1.5 system-ui, sans-serif; pointer-events: auto;
}
.pen-purchase-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; text-decoration: underline; }
.pen-cost-tooltip .pen-purchase-link { display: flex; }
/* Spotty banner (2026-10-29): "12 Pens +" on one line — the "+" is the pack door: orange, no circle (2026-10-30). */
.spotty-pen-balance { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: .75rem; line-height: 1.2; }
.pen-purchase-plus { position: relative; justify-content: center; width: 14px; height: 14px; min-height: 0; text-decoration: none; color: #D85A30; }
.pen-purchase-plus::before { content: ""; position: absolute; inset: -15px; }
.pen-purchase-plus svg { width: 14px; height: 14px; }
.pen-purchase-plus:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }