/* Cedilla Studio — BLEEDR (/bleedr), ink bleed generator.
   Loaded after off-grid.css, which supplies the panel, stage, toggles and buy
   sheet. This file swaps Off Grid's blue for BLEEDR's red ink and adds the
   few pieces BLEEDR has of its own. Scoped under body.bleedr-page. */

body.bleedr-page {
  --blue: #FF3B1F;   /* accent: Off Grid's variable name, BLEEDR's red */
  --pink: #FF2E7A;
  --cyan: #FF9A3C;
  --glow: rgba(255, 59, 31, .55);
  --wash: rgba(255, 59, 31, .09);
}

/* Off Grid hard-codes its blue in a few glows and washes */
.bleedr-page .lab textarea:focus, .bleedr-page .lab select:focus { background: var(--wash); }
.bleedr-page .param input[type=range]:hover::-webkit-slider-thumb,
.bleedr-page .param input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--glow); }
.bleedr-page .fx.is-on { background: var(--wash); }
.bleedr-page .fx.is-on .fx-switch { box-shadow: 0 0 12px var(--glow); }
.bleedr-page .lab .pill--glow:hover { box-shadow: 0 0 18px var(--glow), 0 0 40px rgba(255, 59, 31, .3); }
.bleedr-page .lab .pill--pro { border-color: rgba(255, 59, 31, .7); box-shadow: 0 0 14px rgba(255, 59, 31, .35); }
.bleedr-page .pro-tag { color: #ffc2b8; }
.bleedr-page .pro-sheet-card { box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255, 59, 31, .18); }
.bleedr-page .pro-sheet .pill:hover { box-shadow: 0 0 18px var(--glow); }

/* The stage is paper, not black: labels take the ink colour (set by
   bleedr.js) and the buttons are solid so they hold up on any paper */
.bleedr-page .lab-stage { background: #ecebe6; --stage-ink: #1e1e1e; }
.bleedr-page .lab-stage canvas { touch-action: auto; }
.bleedr-page .stage-title { mix-blend-mode: normal; color: var(--stage-ink); }
.bleedr-page .stage-title span { color: var(--blue); }
.bleedr-page .stage-info, .bleedr-page .stage-shop { mix-blend-mode: normal; color: var(--stage-ink); opacity: .7; }
.bleedr-page .stage-shop { border-color: currentColor; }
.bleedr-page .lab .pill { background: #111; border-color: #111; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bleedr-page .lab .pill:hover { background: var(--blue); border-color: var(--blue); }
.bleedr-page .lab .pill--glow { background: linear-gradient(135deg, var(--pink), var(--blue), var(--blue), var(--cyan)); background-size: 300% 300%; border-color: transparent; }
.bleedr-page .lab .pill--pro { background: #111; }
.bleedr-page .lab .pill.is-locked { color: rgba(255,255,255,.6) !important; }

/* Pro effects shown to free visitors: same row, padlocked */
.fx.is-locked .fx-switch { opacity: .45; }
.fx.is-locked .fx-name { color: var(--muted); }
.fx.is-locked:hover .fx-name { color: #fff; }
.fx.is-locked .fx-cmd .pro-lock { width: 10px; height: 10px; }

.bleedr-page .lab-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.is-locked-section .lab-hint { opacity: .7; }
#labImage .mini--wide, #labExport .mini--wide { margin-top: 0; }
#imageControls { margin-top: 14px; }
#imageControls[hidden] { display: none; }
#imageControls .chips { margin-top: 6px; }
.chip[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }

/* Rendering: a quiet pulse in the corner while a big export works */
.lab-stage.is-busy .stage-info::before { content: 'Rendering… '; }