/* bubbles.css — the three speech bubbles of THE-MIND.md (bubbles.js draws them): a paper backing in the bubble's own shape (the page's own
   paper, attached to the viewport so the gradient and the tooth line up with the sheet underneath), the brush's outline over it, the words
   and the actions above. Only the ink multiplies; the backing is opaque, so nothing under a bubble reads through its words. */
.bubble { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity 0.22s ease; contain: layout style; }
.bubble.on { opacity: 1; }
.bubble[hidden] { display: none; }
.bubble .b-paper { position: absolute; left: 0; top: 0; pointer-events: auto; clip-path: polygon(0 0);
  background: radial-gradient(120% 90% at 50% 38%, rgba(255, 253, 247, 0.6) 0%, rgba(255, 253, 247, 0) 60%), linear-gradient(160deg, rgba(255, 255, 252, 0.3), rgba(120, 100, 80, 0.05)), var(--paper);
  background-attachment: fixed, fixed, scroll; }
.bubble .b-paper::before { content: ""; position: absolute; inset: 0; background-image: var(--tooth); background-size: 512px 512px; background-attachment: fixed; mix-blend-mode: multiply; opacity: var(--tooth-opacity, 0.2); }
.bubble .b-paper::after { content: ""; position: absolute; inset: 0; background-image: var(--mottle); background-size: 1024px 1024px; background-attachment: fixed; mix-blend-mode: multiply; opacity: var(--mottle-opacity, 0.05); }
.bubble .b-shape { position: absolute; left: 0; top: 0; display: block; mix-blend-mode: multiply; filter: url(#soak); pointer-events: none; }
.bubble.k-nudge .b-shape { opacity: 0.5; }   /* the open grey oval: the ink at the squiggle's grey */
.bubble .b-typed { align-self: stretch; }
.bubble .b-body { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: auto; color: var(--ink); }
.bubble .b-content { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bubble .b-content canvas, .bubble .b-link canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); }
.bubble .b-typed { margin: 0; font-family: var(--type); line-height: 1.45; letter-spacing: 0.01em; color: var(--ink); white-space: normal; overflow-wrap: anywhere; position: relative; }
.bubble .b-typed .carriage { opacity: 0.55; }
.bubble .b-body .tw-controls { position: absolute; right: -10px; top: -26px; }
.bubble .b-body .tw-controls button { opacity: 0.55; } .bubble .b-body .tw-controls button:hover { opacity: 1; }
.bubble .b-fallback { font-family: Kalam, cursive; font-weight: 700; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.bubble .b-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 0; margin-top: 2px; opacity: 0; transition: opacity 0.2s; }
.bubble .b-links.shown { opacity: 1; }
.bubble .b-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; cursor: pointer; outline: none; color: inherit; text-decoration: none; border: 0; -webkit-tap-highlight-color: transparent; }
.bubble .b-link .b-ul { position: absolute; left: -2px; bottom: 7px; opacity: 0.45; transition: opacity 0.15s; pointer-events: none; }
.bubble .b-link:hover .b-ul, .bubble .b-link:focus-visible .b-ul { opacity: 1; }
.bubble .b-link:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: 1px; border-radius: 4px; }
.bubble .b-link-typed { font-family: var(--type); line-height: 1.3; color: var(--ink); }
.bubble .b-wait { display: block; margin-top: 8px; transform-origin: 0 50%; mix-blend-mode: multiply; }
.bubble.leaving .b-shape { opacity: 0; transition: opacity 0.6s ease 0.25s; }
@media (prefers-reduced-motion: reduce) { .bubble, .bubble .b-links { transition: none; } .bubble .b-wait { transition: none !important; } }

.bubble .b-body.b-row { flex-direction: row; align-items: center; gap: 14px; }   /* the flat ovals: the words and the actions on one line */
.bubble .b-body.b-row .b-links { margin-top: 0; flex-wrap: nowrap; }

/* print (lanes-finish.md, core 7): no bubble on paper */
html[data-print="on"] .bubble { display: none !important; }
@media print { .bubble { display: none !important; } }
/* the list line under a bubble's actions (THE-MIND.md: "a few other things i'd rather you find.") */
.bubble .b-footer { margin: 2px 0 0; font-family: var(--type); line-height: 1.35; color: var(--ink); opacity: 0.8; }

/* the mind pass: the hand-written line above a typed answer that the site gives for an absent mind (the settled line of THE-MIND.md) */
.bubble .b-lead { margin-bottom: 6px; opacity: 0.9; }

/* the mind pass (mind-review 3): a sticky bubble's own close, a hand-drawn cross on a 44 px target at the shape's top right */
.bubble .b-close { position: absolute; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto; opacity: 0.6; transition: opacity 0.15s; -webkit-tap-highlight-color: transparent; }
.bubble .b-close[hidden] { display: none; }
.bubble .b-close:hover, .bubble .b-close:focus-visible { opacity: 1; }
.bubble .b-close:focus-visible { outline: 1.5px dashed var(--chrome); outline-offset: -6px; border-radius: 8px; }
.bubble .b-close canvas { display: block; mix-blend-mode: multiply; filter: url(#soak); }
.bubble .b-extra { margin-top: 6px; }
.bubble.has-close .b-body .tw-controls { right: 30px; }   /* the typing arrows step left of the close */

/* mind-final 5: a bubble taller than the visible viewport (a short phone, a software keyboard) is held to it. The scroller between the body
   and its words and actions is invisible to the layout until then; held, it scrolls inside the drawn box, the close and the typing arrows
   (positioned on the body) stay put, a scroll inside it never reaches the poster, and no target changes size. */
.bubble .b-scroll { display: contents; }
.bubble.capped .b-scroll { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
.bubble.capped .b-scroll .b-links { flex-shrink: 0; }
.bubble.capped .b-scroll > * { flex-shrink: 0; }