/* =====================================================================
   Watercolor Painting Playground (page-watercolor-painting-playground.php).
   Loads after css/rethinking-endo.css, which supplies the page shell the
   page uses (paper texture, corner washes, sticky breadcrumb bar), as on
   Music and the Brain. Everything below is scoped under .butterfly-paint
   (or .bp-page, the reading column) so nothing leaks onto the site.
   ===================================================================== */
body.page-template-page-watercolor-painting-playground .page-wrapper,
body.page-template-page-watercolor-painting-playground-php .page-wrapper{overflow-x:clip;overflow-y:visible}


/* --- WordPress guards: style.css gives every element position:relative,
   zero margins, and its own sizes, bullets and quote marks for bare tags.
   Put back the browser defaults the playground was built on; the rules
   in this file's own blocks are more specific and still win (the same
   guards music-brain.css uses for the interactive on Music and the Brain). */
.butterfly-paint :where(*){position:static}
.butterfly-paint :where(p, ul, ol, li, figure, figcaption, h1, h2, h3, h4){
  margin:revert;padding:revert;width:revert;
  font-size:revert;font-weight:revert;font-family:revert;line-height:revert;
  letter-spacing:revert;text-transform:revert;float:revert;
}
.butterfly-paint :where(ul, ol){list-style:revert}
.butterfly-paint :where(li)::before{content:none;background:none}
.butterfly-paint :where(a){color:revert;text-decoration:revert;transition:none}
.butterfly-paint :where(img){display:revert;width:revert;max-width:revert}
.butterfly-paint :where(span, a, strong, em, b, i, small){letter-spacing:revert;text-transform:revert}
.butterfly-paint :where(button){transition:revert}
/* style.css: *{text-rendering:geometricPrecision} */
.butterfly-paint, .butterfly-paint :where(*){text-rendering:auto}
/* js/functions.js tags empty paragraphs and style.css zeroes their height;
   the screen-reader announcer starts empty */
.butterfly-paint p.bp-sr.empty-space-paragraph{height:1px !important}

/* the reading column of Music and the Brain (music-brain.css .bv-page) */
.bp-page{max-width:920px;width:100%;min-width:0;margin:0 auto;padding:0 64px;position:relative}
@media (max-width:850px){.bp-page{padding:0 50px}}
@media (max-width:600px){.bp-page{padding:0 24px}}

/* Every selector below is scoped under .butterfly-paint so the block can
   move into a WordPress template part without leaking. */
.butterfly-paint{
  /* tokens (from the72fund.org's style.css :root and the endo build); light only,
     since watercolor is multiplied onto paper */
  --font-display:"Averia Serif Libre",Georgia,serif;
  --font-body:"Work Sans",system-ui,sans-serif;
  --ink:#16283c;
  --paper:#faf8f5;
  --prose:#33414f;
  --muted:#5f6b7a;
  --rule:#ddd8d0;
  --focus:#2e5c8a;
  --secondary:#2f6d84;
  --secondary-hover:#255769;
  /* style.css makes every <section> a centered, floated flex column */
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  float:none;width:100%;
  padding:2.75rem 0 2.5rem;
  font-family:var(--font-body);
  color:var(--ink);
}
@media (max-width:600px){.butterfly-paint{padding:1.75rem 0 2rem}}

/* kicker, headline and intro, as on the72fund.org's endometriosis history
   page (rethinking-endo.css .part-kicker / h2.part-title / .part-intro) */
.butterfly-paint .bp-kicker{
  margin:0 0 .5rem;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.butterfly-paint .bp-headline{
  margin:0 0 .6rem;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.15rem);
  font-weight:400;
  line-height:1.2;
  color:var(--ink);
  text-wrap:balance;
}
/* the description folds up behind a caret at every width, to keep the paper
   high on the screen; it opens with a tap on "How it works" */
.butterfly-paint .bp-howto-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 1rem;padding:.2rem 0;
  border:0;background:none;
  font:600 .875rem/1.2 var(--font-body);
  color:var(--secondary);
  cursor:pointer;
}
.butterfly-paint .bp-howto-toggle:hover{color:var(--secondary-hover)}
.butterfly-paint .bp-howto-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.butterfly-paint .bp-caret{
  width:.5rem;height:.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s;
}
.butterfly-paint .bp-howto.is-open .bp-caret{transform:translateY(2px) rotate(-135deg)}
.butterfly-paint .bp-howto:not(.is-open) .bp-intro{display:none}
/* the opening line names the right gesture: a cursor on a mouse or trackpad, a finger on a touch screen */
.butterfly-paint .bp-intro-touch{display:none}
@media (hover:none) and (pointer:coarse){
  .butterfly-paint .bp-intro-desktop{display:none}
  .butterfly-paint .bp-intro-touch{display:inline}
}
.butterfly-paint .bp-howto.is-open .bp-intro{margin-top:-.3rem}
@media (prefers-reduced-motion:reduce){.butterfly-paint .bp-caret{transition:none}}
.butterfly-paint .bp-intro{
  margin:0 0 1.6rem;
  max-width:58ch;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.68;
  color:var(--prose);
}

.butterfly-paint .bp-sheet{
  position:relative;
  height:clamp(360px,62vh,640px);
  border-radius:4px;
  background:#fffdf9;
  overflow:hidden;
  /* a deckled (torn-paper) edge: js/watercolor-playground.js sets --bp-deckle
     to a polygon for the sheet's current size; without it the sheet is a
     plain rectangle */
  clip-path:var(--bp-deckle,none);
  /* the last few px of the paper fade out, so its edge blends into the
     toned rim and shadow beneath instead of ending in a hard line */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent),
                     linear-gradient(to bottom,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent),
             linear-gradient(to bottom,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  mask-composite:intersect;
  touch-action:none;
  cursor:crosshair;              /* until the brush cursor is drawn (see brushCursor) */
  /* a press and hold paints: no text selection, magnifier, callout menu or tap highlight */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.butterfly-paint .bp-bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
@media (max-width:600px){.butterfly-paint .bp-sheet{height:max(420px,64svh)}}

/* The sheet's frame: the paper sits slightly above the page on a soft
   shadow cut to the same deckled outline, so it reads clearly against the
   paper texture and washes behind it (clip-path would cut off a plain
   box-shadow, so the shadow is its own blurred copy of the shape). */
.butterfly-paint .bp-frame{position:relative}
.butterfly-paint .bp-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(22,40,60,.22);
  clip-path:var(--bp-deckle,none);
  filter:blur(19px);
  transform:translateY(6px);
}
/* a wide, soft gold rim around the paper, frayed like a deckled edge */
.butterfly-paint .bp-frame::after{
  content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;
  background:rgba(214,172,72,.46);
  clip-path:var(--bp-rim,inset(100%));
  filter:blur(5px);
}
.butterfly-paint .bp-frame .bp-sheet{z-index:1}
/* a faint gold vignette on the paper itself, deepest at the edges, so the
   border seems to glow into the sheet */
.butterfly-paint .bp-sheet::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(214,172,72,0) 58%,rgba(214,172,72,.17) 100%);
}
/* paper grain over the paint, multiplied so it reads as texture in the wash */
.butterfly-paint .bp-sheet::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/paper-texture.png") center/cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.55;
}
.butterfly-paint canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
}

/* the tools: one line above the sheet, colors on the left, actions on the right */
.butterfly-paint .bp-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;
  gap:12px 20px;
  margin:0 0 14px;
}
.butterfly-paint .bp-actions{display:flex;flex-wrap:nowrap;gap:8px}
.butterfly-paint .bp-btn{
  font:500 .875rem/1 var(--font-body);
  color:var(--ink);
  background:#fff;
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.62rem 1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.butterfly-paint .bp-btn:hover{border-color:#c3bcb1;background:#fffdf9}
.butterfly-paint .bp-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.butterfly-paint .bp-btn svg{width:18px;height:18px;flex:none}
/* the swatch follows the brush color as it drifts, frame by frame (no transition) */
.butterfly-paint .bp-swatch{
  width:14px;height:14px;border-radius:50%;
  background:var(--swatch,#2f6d84);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}

/* color: "Blending" (the drift) or one of the 72 Fund colors */
.butterfly-paint .bp-colors{display:flex;align-items:center;flex-wrap:nowrap;gap:7px}
.butterfly-paint .bp-colors-label{
  margin-right:4px;
  font:600 .78rem/1 var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.butterfly-paint .bp-chip{
  flex:none;
  width:28px;height:28px;padding:0;
  border:0;border-radius:50%;
  background:var(--chip);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 0 0 1px rgba(22,40,60,.18);
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.butterfly-paint .bp-chip:hover{transform:scale(1.08)}
/* each circle answers a touch across half the gap beside it, so the targets
   are larger than the circles themselves and still never overlap */
.butterfly-paint .bp-chip,
.butterfly-paint .bp-shift{position:relative}
.butterfly-paint .bp-chip::after{content:"";position:absolute;inset:-3.5px;border-radius:50%}
.butterfly-paint .bp-chip[aria-checked="true"],
.butterfly-paint .bp-shift[aria-checked="true"]{box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 0 0 2px var(--ink)}
.butterfly-paint .bp-shift{padding:.45rem .85rem .45rem .5rem;margin-right:3px}
.butterfly-paint .bp-shift[aria-checked="true"]{border-color:var(--ink)}
.butterfly-paint .bp-chip:focus-visible,
.butterfly-paint .bp-shift:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* the "Blending" swatch: the live drift color inside a ring of the palette */
.butterfly-paint .bp-shift .bp-swatch{
  width:20px;height:20px;
  box-shadow:none;
  background:radial-gradient(circle closest-side,var(--swatch,#2f6d84) 0 52%,#fff 54% 62%,transparent 64%),
             conic-gradient(#2f6d84,#52a297,#7fb069,#eb7672,#ed7413,#dab018,#0c3e60,#2f6d84);
}
/* narrower: the action buttons keep their names for screen readers but show
   only their icons, so everything still fits on one line */
/* Refresh and Save a copy are icon buttons at every width (their names stay
   for screen readers and the tooltip); Full screen always shows its icon and
   its name ("Exit" while open) */
.butterfly-paint .bp-icon{padding:.62rem}
.butterfly-paint .bp-icon .bp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* full screen: the paper fills the whole screen, the tools along its top.
   Where the browser allows it (desktop, Android, iPad) this is real full
   screen; on an iPhone, which doesn't for web pages, it fills the window. */
html.bp-full-open,html.bp-full-open body{overflow:hidden;height:100%}
/* the theme's <main> is its own stacking layer (z-index 90), below the sticky
   header (100), so the paper's own z-index can't lift it over the header;
   while full screen is open the whole layer comes up instead */
html.bp-full-open body.page-template-page-watercolor-painting-playground .page-content{z-index:1001}
.butterfly-paint.is-full{
  position:fixed;inset:0;z-index:1000;
  padding:12px;
  background:var(--paper);
}
.butterfly-paint.is-full .bp-kicker,
.butterfly-paint.is-full .bp-headline,
.butterfly-paint.is-full .bp-howto,
.butterfly-paint.is-full .bp-note{display:none}
.butterfly-paint.is-full .bp-bar{margin:0 0 10px}
.butterfly-paint.is-full .bp-frame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.butterfly-paint.is-full .bp-frame::before,
.butterfly-paint.is-full .bp-frame::after,
.butterfly-paint.is-full .bp-sheet::before{display:none}
.butterfly-paint.is-full .bp-sheet{flex:1 1 auto;height:auto;min-height:0;clip-path:none;-webkit-mask-image:none;mask-image:none;border-radius:14px}

@media (max-width:720px){
  .butterfly-paint .bp-colors-label{display:none}
}
/* phones: still one line. "Blending" shows as its ringed swatch alone (its
   name stays for screen readers and the tooltip). The circles sit together
   at a steady spacing and share the width that's left; a wider gap keeps
   them apart from the two actions at the right */
@media (max-width:600px){
  .butterfly-paint .bp-bar{--c:clamp(22px,calc((100vw - 48px - 74px - 14px - 35px) / 8),30px);gap:14px}
  .butterfly-paint .bp-colors{flex:0 1 auto;min-width:0;justify-content:flex-start;gap:5px}
  .butterfly-paint .bp-chip{width:var(--c);height:var(--c)}
  .butterfly-paint .bp-chip::after,
  .butterfly-paint .bp-shift::after{content:"";position:absolute;inset:-2.5px;border-radius:50%}
  .butterfly-paint .bp-shift{
    flex:none;width:var(--c);height:var(--c);padding:0;margin:0;
    border:0;border-radius:50%;background:none;justify-content:center;
  }
  .butterfly-paint .bp-shift .bp-swatch{width:100%;height:100%}
  .butterfly-paint .bp-shift .bp-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .butterfly-paint .bp-actions{gap:6px;margin-left:auto}
  .butterfly-paint .bp-actions .bp-btn{width:34px;height:34px;padding:0;justify-content:center}
}
/* phones offer Blending and three colors: Blue, Teal and Red */
@media (max-width:600px){
  .butterfly-paint .bp-chip[data-color="0"],
  .butterfly-paint .bp-chip[data-color="3"],
  .butterfly-paint .bp-chip[data-color="4"],
  .butterfly-paint .bp-chip[data-color="5"]{display:none}
  .butterfly-paint .bp-bar{--c:30px}
  .butterfly-paint .bp-colors{gap:8px}
}
/* the very narrowest phones: the circles take a line of their own, at full
   size, and the actions drop to the next */
@media (max-width:340px){
  .butterfly-paint .bp-bar{--c:clamp(22px,calc((100vw - 48px - 35px) / 8),30px);flex-wrap:wrap;justify-content:flex-end;gap:10px}
  .butterfly-paint .bp-colors{width:100%}
}
.butterfly-paint .bp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phones: the full screen button spells itself out ("Full screen", or
   "Exit" while open), and the circles and icons tighten a little so the
   tools still fit on one line */
@media (max-width:600px){
  .butterfly-paint .bp-bar{--c:26px;gap:10px}
  .butterfly-paint .bp-colors{gap:6px}
  .butterfly-paint .bp-actions{gap:5px}
  .butterfly-paint .bp-actions .bp-btn{width:32px;height:32px}
  .butterfly-paint .bp-actions #bp-full{width:auto;padding:0 .75rem 0 .6rem;gap:.4rem;font-size:.8rem}
  .butterfly-paint #bp-full .bp-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
}
@media (max-width:370px){
  .butterfly-paint .bp-bar{--c:24px;gap:8px}
  .butterfly-paint .bp-actions #bp-full{padding:0 .6rem 0 .5rem;font-size:.75rem}
}

/* on phones and tablets, a gentle invitation in the middle of the paper (clear
   of Safari's bottom bar) to paint full screen; it can be dismissed, and steps aside once painting starts */
.butterfly-paint .bp-fs-prompt{
  position:absolute;left:50%;top:50%;z-index:3;
  display:flex;align-items:center;gap:2px;
  width:max-content;white-space:nowrap;
  padding:4px;border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 var(--rule),0 8px 24px -10px rgba(22,40,60,.45);
  transform:translate(-50%,calc(-50% + 8px));opacity:0;
  transition:opacity .35s ease,transform .35s ease;
}
.butterfly-paint .bp-fs-prompt.is-shown{opacity:1;transform:translate(-50%,-50%)}
.butterfly-paint .bp-fs-prompt[hidden]{display:none}
.butterfly-paint .bp-fs-go{
  display:inline-flex;align-items:center;gap:.5rem;
  border:0;border-radius:999px;background:var(--secondary);color:#fff;
  font:500 .95rem/1 var(--font-body);
  padding:.75rem 1.1rem .75rem .9rem;cursor:pointer;
}
.butterfly-paint .bp-fs-go svg{width:18px;height:18px;flex:none}
.butterfly-paint .bp-fs-x{
  width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.butterfly-paint .bp-fs-x svg{width:16px;height:16px}
.butterfly-paint .bp-fs-go:focus-visible,
.butterfly-paint .bp-fs-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.butterfly-paint .bp-fs-prompt{transition:none}}

/* the note on what this tool is and isn't: set like the "Simplified
   illustration" note on Music and the Brain (music-brain.css .bv-note), small
   and muted, with a single line above it as wide as the text */
.butterfly-paint .bp-note{
  margin:2.4rem 0 0;
  padding:0.9rem 0 0;
  border-top:1px solid var(--rule);
  max-width:72ch;
  font-size:0.78rem;
  line-height:1.55;
  color:var(--muted);
}
.butterfly-paint .bp-note-text{margin:0 0 0.45rem}
.butterfly-paint .bp-note-label{font-weight:600;color:var(--prose)}
.butterfly-paint .bp-sources{margin:0}
.butterfly-paint .bp-link{color:var(--secondary);text-decoration:underline;text-decoration-color:rgba(47,109,132,0.4);text-underline-offset:2px}
.butterfly-paint .bp-link:hover{text-decoration-color:currentColor}
.butterfly-paint .bp-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* Share: the arrow turns to a check for a moment once the link is copied */
.butterfly-paint .bp-share .bp-ico-done,
.butterfly-paint #bp-share .bp-ico-done{display:none}
.butterfly-paint #bp-share.is-done .bp-ico-share{display:none}
.butterfly-paint #bp-share.is-done .bp-ico-done{display:block}
.butterfly-paint .bp-toast{
  margin:-.35rem 0 .7rem;text-align:right;
  font:500 .8rem/1.2 var(--font-body);color:var(--secondary);
}
.butterfly-paint .bp-toast[hidden]{display:none}
.butterfly-paint.is-full .bp-toast{display:none}

/* phones: four tools (Refresh, Save, Share, Full screen) now sit beside the
   colors, so everything tightens a little more; on the narrowest phones the
   colors keep a line to themselves and the tools take the line below */
@media (max-width:600px){
  .butterfly-paint .bp-bar{--c:24px;gap:8px}
  .butterfly-paint .bp-colors{gap:5px}
  .butterfly-paint .bp-actions{gap:4px}
  .butterfly-paint .bp-actions .bp-btn{width:30px;height:30px}
  .butterfly-paint .bp-actions #bp-full{width:auto;padding:0 .6rem 0 .5rem;gap:.35rem;font-size:.78rem}
}
@media (max-width:389px){
  .butterfly-paint .bp-bar{flex-wrap:wrap;row-gap:10px}
  .butterfly-paint .bp-colors{width:100%}
  .butterfly-paint .bp-actions{margin-left:auto}
  .butterfly-paint .bp-actions .bp-btn{width:32px;height:32px}
  .butterfly-paint .bp-actions #bp-full{font-size:.8rem}
}