/* =====================================================================================================================
   Block styles (owner, 28 Oct 2026: "introduce each block styling … deep customization"): one button can have its own
   look on top of the page theme. The wrapper (.blk-hook) carries the choices (App\Support\BlockStyle::attributes):
     .bsx                every styled block: clears what the page theme drew on the button, so a look starts clean
     .bl-look--<theme>  another theme's button look (block-looks.css, generated by `php artisan dznir:block-looks`)
     .bs-<style>        a button style (Pill, Glass, Angled…)            .bz-<size>  Compact / Large
     .bft-<font>         its own font                                     .ba-<anim>  Glow, Sweep, Pulse…
     .bl-c + --bl-btn / --bl-fg / --bl-bd   its own colours
   Order of strength: page theme < reset (.bsx) < theme look < style / size / font < colours, animation.
   `.bls` is the editor's swatch strip, so the picker draws each choice with the same rules as the page.
   ===================================================================================================================== */

/* the swatch strip has no .mini around it: give it the base colours a page has */
.bls { --bg: #FAF8F5; --fg: #1C1B19; --mut: #5E5A54; --btn: #1C1B19; --btnfg: #FFFFFF; --rad: 12px; --hl: #FF4D1F; --font: var(--sans); color: var(--fg); }

/* reset: low enough that a theme look (block-looks.css) wins, strong enough to beat the page theme's own button rules */
:where(.pg-layer, .bls) .bsx .mini__link {
  position: relative; clip-path: none; transform: none; filter: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  background-image: none; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal; font-style: normal;
  text-align: center; padding: 12px 8px; border: 1.5px solid var(--btn); border-radius: var(--rad); animation: none;
  background-color: var(--btn); color: var(--btnfg); font-family: inherit; font-size: 12px; font-weight: 600;
}
:where(.pg-layer, .bls) .bsx .mini__link::before, :where(.pg-layer, .bls) .bsx .mini__link::after { content: none; animation: none; }
:where(.pg-layer, .bls) .bsx .mini__link--hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hl) 40%, transparent); }
:is(.pg-layer, .bls) .bsx[class*='bl-look--'] .mini__link { font-family: var(--font); }

/* ---- button styles: Free (blocks.style) ---- */
:is(.pg-layer, .bls) .bsx.bs-pill .mini__link { border-radius: 999px; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-rounded .mini__link { border-radius: 12px; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-square .mini__link { border-radius: 0; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-outline .mini__link { background: transparent; color: var(--fg); border: 2px solid var(--fg); clip-path: none; box-shadow: none; }

/* ---- button styles: everything else (blocks.style_all) ---- */
:is(.pg-layer, .bls) .bsx.bs-soft .mini__link { border: 0; border-radius: 16px; clip-path: none; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
:is(.pg-layer, .bls) .bsx.bs-glass .mini__link { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent); border-radius: 16px; clip-path: none; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
:is(.pg-layer, .bls) .bsx.bs-angled .mini__link { border-radius: 0; border: 0; border-left: 4px solid var(--hl); clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); text-transform: uppercase; letter-spacing: 0.04em; }
:is(.pg-layer, .bls) .bsx.bs-notched .mini__link { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
:is(.pg-layer, .bls) .bsx.bs-offset .mini__link { border: 2px solid var(--fg); border-radius: 10px; clip-path: none; box-shadow: 4px 4px 0 var(--fg); }
:is(.pg-layer, .bls) .bsx.bs-neon .mini__link { background: transparent; color: var(--fg); border: 1.5px solid var(--hl); border-radius: 999px; clip-path: none; box-shadow: 0 0 12px color-mix(in srgb, var(--hl) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--hl) 35%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--hl) 70%, transparent); }
:is(.pg-layer, .bls) .bsx.bs-gradient .mini__link { border: 0; border-radius: 14px; clip-path: none; background: linear-gradient(135deg, var(--btn), var(--hl)); color: var(--btnfg); }
:is(.pg-layer, .bls) .bsx.bs-underline .mini__link { background: transparent; color: var(--fg); border: 0; border-bottom: 2px solid var(--fg); border-radius: 0; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-ticket .mini__link { background: transparent; color: var(--fg); border: 2px dashed var(--fg); border-radius: 10px; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-brutal .mini__link { border: 3px solid #111111; border-radius: 0; clip-path: none; box-shadow: 6px 6px 0 #111111; text-transform: uppercase; font-weight: 800; }
:is(.pg-layer, .bls) .bsx.bs-tab .mini__link { border-radius: 16px 16px 4px 16px; clip-path: none; }
:is(.pg-layer, .bls) .bsx.bs-pixel .mini__link { border-radius: 0; clip-path: none; border: 0; box-shadow: 0 -3px 0 0 var(--fg), 0 3px 0 0 var(--fg), -3px 0 0 0 var(--fg), 3px 0 0 0 var(--fg); font-family: 'VT323', ui-monospace, monospace; font-size: 16px; font-weight: 400; }

/* a see-through style on another theme's look sits on that theme's background, so its text stays readable */
:is(.pg-layer, .bls) .bsx[class*='bl-look--']:is(.bs-outline, .bs-neon, .bs-underline, .bs-ticket, .bs-glass) .mini__link { background-color: var(--bg); }

/* ---- size (blocks.style_all) ---- */
:is(.pg-layer, .bls) .bsx.bz-compact .mini__link { padding: 8px; font-size: 11px; }
:is(.pg-layer, .bls) .bsx.bz-large .mini__link { padding: 16px 8px; font-size: 14px; }

/* ---- font (blocks.style_all) ---- */
:is(.pg-layer, .bls) .bsx.bft-sans .mini__link { font-family: 'Instrument Sans', sans-serif; }
:is(.pg-layer, .bls) .bsx.bft-serif .mini__link { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 15px; }
:is(.pg-layer, .bls) .bsx.bft-rounded .mini__link { font-family: 'Nunito', sans-serif; font-weight: 800; }
:is(.pg-layer, .bls) .bsx.bft-mono .mini__link { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; }
:is(.pg-layer, .bls) .bsx.bft-bold .mini__link { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.01em; }
:is(.pg-layer, .bls) .bsx.bft-impact .mini__link { font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; }
:is(.pg-layer, .bls) .bsx.bft-marker .mini__link { font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 14px; }
:is(.pg-layer, .bls) .bsx.bft-pixel .mini__link { font-family: 'VT323', ui-monospace, monospace; font-weight: 400; font-size: 16px; }
:is(.pg-layer, .bls) .bsx.bft-retro .mini__link { font-family: 'Righteous', sans-serif; font-weight: 400; font-size: 13px; }
:is(.pg-layer, .bls) .bsx.bft-comic .mini__link { font-family: 'Bangers', cursive; font-weight: 400; font-size: 15px; letter-spacing: 0.04em; }
:is(.pg-layer, .bls) .bsx.bft-royal .mini__link { font-family: 'Cinzel', serif; font-weight: 900; }
:is(.pg-layer, .bls) .bsx.bft-tech .mini__link { font-family: 'Audiowide', sans-serif; font-weight: 400; }
:is(.pg-layer, .bls) .bsx.bft-elegant .mini__link { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; }

/* ---- colours (blocks.colors): each only when they picked it ---- */
.bsx.bl-c { --hl: var(--bl-bd, var(--hl)); }
:is(.pg-layer, .bls) .bsx.bl-c .mini__link { background-color: var(--bl-btn, var(--btn)); color: var(--bl-fg, var(--btnfg)); border-color: var(--bl-bd, var(--bl-btn, var(--btn))); }
:is(.pg-layer, .bls) .bsx.bl-c.bl-c--btn .mini__link { background-image: none; }

/* ---- animation (blocks.animation); "moving effects off" (.is-still) and reduced motion stop them ---- */
:is(.pg-layer, .bls) .bsx.ba-glow .mini__link { animation: ba-glow 2.4s ease-in-out infinite alternate; }
@keyframes ba-glow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hl) 0%, transparent); } to { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--hl) 65%, transparent); } }
:is(.pg-layer, .bls) .bsx.ba-sweep .mini__link { overflow: hidden; }
:is(.pg-layer, .bls) .bsx.ba-sweep .mini__link::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: ba-sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes ba-sweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
:is(.pg-layer, .bls) .bsx.ba-pulse .mini__link { animation: ba-pulse 1.8s ease-in-out infinite; }
@keyframes ba-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
:is(.pg-layer, .bls) .bsx.ba-shake .mini__link { animation: ba-shake 4s ease-in-out infinite; }
@keyframes ba-shake { 0%, 86%, 100% { transform: translateX(0); } 88% { transform: translateX(-4px) rotate(-1deg); } 91% { transform: translateX(4px) rotate(1deg); } 94% { transform: translateX(-3px); } 97% { transform: translateX(2px); } }
:is(.pg-layer, .bls) .bsx.ba-bounce .mini__link { animation: ba-bounce 2.6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
@keyframes ba-bounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } 90% { transform: translateY(0); } 95% { transform: translateY(-2px); } }
:is(.pg-layer, .bls) .bsx.ba-flicker .mini__link { animation: ba-flicker 3.5s steps(1) infinite; }
@keyframes ba-flicker { 0%, 100% { opacity: 1; } 91% { opacity: 0.4; } 92% { opacity: 1; } 94% { opacity: 0.6; } 95% { opacity: 1; } }
:is(.pg-layer, .bls) .bsx.ba-float .mini__link { animation: ba-float 3s ease-in-out infinite alternate; }
@keyframes ba-float { from { transform: translateY(0); } to { transform: translateY(-4px); } }

.is-still .bsx[class*='ba-'] .mini__link, .is-still .bsx[class*='ba-'] .mini__link::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bsx[class*='ba-'] .mini__link, .bsx[class*='ba-'] .mini__link::after { animation: none !important; }
}

/* =====================================================================================================================
   Cards (owner, 28 Oct 2026: "add the Style panel to card blocks too"): every other block (.bsx--card on its wrapper)
   gets the same choices, drawn on the block itself (the wrapper's one child: .blk card, .avail badge, .mini__h header or
   .mini__text text). Header and text get a card-like box once they have a style. Same plans as buttons.
   ===================================================================================================================== */
:where(.pg-layer, .bls) .bsx.bsx--card > * { clip-path: none; transform: none; filter: none; animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* low on purpose (:where), so each style below draws over this box */
:where(.pg-layer, .bls) .bsx--card:where([class*='bs-'], .bl-c--btn) > :is(.mini__h, .mini__text) { display: block; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 7%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }

/* ---- card styles: Free ---- */
:is(.pg-layer, .bls) .bsx--card.bs-pill > * { border-radius: 24px; }
:is(.pg-layer, .bls) .bsx--card.bs-rounded > * { border-radius: 14px; }
:is(.pg-layer, .bls) .bsx--card.bs-square > * { border-radius: 0; }
:is(.pg-layer, .bls) .bsx--card.bs-outline > * { background: transparent; border: 2px solid var(--fg); }

/* ---- card styles: the rest (blocks.style_all) ---- */
:is(.pg-layer, .bls) .bsx--card.bs-soft > * { border: 0; border-radius: 20px; box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
:is(.pg-layer, .bls) .bsx--card.bs-glass > * { background: color-mix(in srgb, var(--fg) 10%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 26%, transparent); border-radius: 18px; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
:is(.pg-layer, .bls) .bsx--card.bs-angled > * { border-radius: 0; border: 0; border-left: 4px solid var(--hl); clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); }
:is(.pg-layer, .bls) .bsx--card.bs-notched > * { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
:is(.pg-layer, .bls) .bsx--card.bs-offset > * { border: 2px solid var(--fg); border-radius: 12px; box-shadow: 5px 5px 0 var(--fg); }
:is(.pg-layer, .bls) .bsx--card.bs-neon > * { background: transparent; border: 1.5px solid var(--hl); border-radius: 18px; box-shadow: 0 0 14px color-mix(in srgb, var(--hl) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--hl) 30%, transparent); }
:is(.pg-layer, .bls) .bsx--card.bs-gradient > * { border: 0; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--btn) 22%, transparent), color-mix(in srgb, var(--hl) 28%, transparent)); }
:is(.pg-layer, .bls) .bsx--card.bs-underline > * { background: transparent; border: 0; border-bottom: 2px solid var(--fg); border-radius: 0; }
:is(.pg-layer, .bls) .bsx--card.bs-ticket > * { background: transparent; border: 2px dashed var(--fg); border-radius: 12px; }
:is(.pg-layer, .bls) .bsx--card.bs-brutal > * { border: 3px solid #111111; border-radius: 0; box-shadow: 6px 6px 0 #111111; }
:is(.pg-layer, .bls) .bsx--card.bs-tab > * { border-radius: 20px 20px 6px 20px; }
:is(.pg-layer, .bls) .bsx--card.bs-pixel > * { border: 0; border-radius: 0; box-shadow: 0 -3px 0 0 var(--fg), 0 3px 0 0 var(--fg), -3px 0 0 0 var(--fg), 3px 0 0 0 var(--fg); }

:is(.pg-layer, .bls) .bsx--card[class*='bl-look--']:is(.bs-outline, .bs-neon, .bs-underline, .bs-ticket, .bs-glass) > * { background-color: var(--bg); }

/* ---- card size: the whole card, in proportion ---- */
:is(.pg-layer, .bls) .bsx--card.bz-compact > * { zoom: 0.9; }
:is(.pg-layer, .bls) .bsx--card.bz-large > * { zoom: 1.12; }

/* ---- card font: the card and everything in it ---- */
:is(.pg-layer, .bls) .bsx--card.bft-sans > *, :is(.pg-layer, .bls) .bsx--card.bft-sans > * * { font-family: 'Instrument Sans', sans-serif; }
:is(.pg-layer, .bls) .bsx--card.bft-serif > *, :is(.pg-layer, .bls) .bsx--card.bft-serif > * * { font-family: 'Instrument Serif', Georgia, serif; }
:is(.pg-layer, .bls) .bsx--card.bft-rounded > *, :is(.pg-layer, .bls) .bsx--card.bft-rounded > * * { font-family: 'Nunito', sans-serif; }
:is(.pg-layer, .bls) .bsx--card.bft-mono > *, :is(.pg-layer, .bls) .bsx--card.bft-mono > * * { font-family: 'JetBrains Mono', ui-monospace, monospace; }
:is(.pg-layer, .bls) .bsx--card.bft-bold > *, :is(.pg-layer, .bls) .bsx--card.bft-bold > * * { font-family: 'Bricolage Grotesque', sans-serif; }
:is(.pg-layer, .bls) .bsx--card.bft-impact > *, :is(.pg-layer, .bls) .bsx--card.bft-impact > * * { font-family: 'Anton', Impact, sans-serif; font-weight: 400; letter-spacing: 0.02em; }
:is(.pg-layer, .bls) .bsx--card.bft-marker > *, :is(.pg-layer, .bls) .bsx--card.bft-marker > * * { font-family: 'Permanent Marker', cursive; font-weight: 400; }
:is(.pg-layer, .bls) .bsx--card.bft-pixel > *, :is(.pg-layer, .bls) .bsx--card.bft-pixel > * * { font-family: 'VT323', ui-monospace, monospace; font-weight: 400; }
:is(.pg-layer, .bls) .bsx--card.bft-retro > *, :is(.pg-layer, .bls) .bsx--card.bft-retro > * * { font-family: 'Righteous', sans-serif; font-weight: 400; }
:is(.pg-layer, .bls) .bsx--card.bft-comic > *, :is(.pg-layer, .bls) .bsx--card.bft-comic > * * { font-family: 'Bangers', cursive; font-weight: 400; letter-spacing: 0.03em; }
:is(.pg-layer, .bls) .bsx--card.bft-royal > *, :is(.pg-layer, .bls) .bsx--card.bft-royal > * * { font-family: 'Cinzel', serif; }
:is(.pg-layer, .bls) .bsx--card.bft-tech > *, :is(.pg-layer, .bls) .bsx--card.bft-tech > * * { font-family: 'Audiowide', sans-serif; font-weight: 400; }
:is(.pg-layer, .bls) .bsx--card.bft-elegant > *, :is(.pg-layer, .bls) .bsx--card.bft-elegant > * * { font-family: 'Playfair Display', Georgia, serif; }

/* ---- card colours: background, text (everything in the card that follows the text colour) and border ---- */
.bsx--card.bl-c--fg { --fg: var(--bl-fg); --mut: color-mix(in srgb, var(--bl-fg) 72%, transparent); color: var(--bl-fg); }
:is(.pg-layer, .bls) .bsx--card.bl-c--fg > * { color: var(--bl-fg); }
:is(.pg-layer, .bls) .bsx--card.bl-c--btn > * { background: var(--bl-btn); }
:is(.pg-layer, .bls) .bsx--card.bl-c--bd > * { border-color: var(--bl-bd); }

/* ---- card animation (blocks.animation) ---- */
:is(.pg-layer, .bls) .bsx--card.ba-glow > * { animation: ba-glow 2.4s ease-in-out infinite alternate; }
:is(.pg-layer, .bls) .bsx--card.ba-sweep > * { position: relative; overflow: hidden; }
:is(.pg-layer, .bls) .bsx--card.ba-sweep > *::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-20deg); animation: ba-sweep 3.6s ease-in-out infinite; pointer-events: none; }
:is(.pg-layer, .bls) .bsx--card.ba-pulse > * { animation: ba-pulse 2s ease-in-out infinite; }
:is(.pg-layer, .bls) .bsx--card.ba-shake > * { animation: ba-shake 4s ease-in-out infinite; }
:is(.pg-layer, .bls) .bsx--card.ba-bounce > * { animation: ba-bounce 2.6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
:is(.pg-layer, .bls) .bsx--card.ba-flicker > * { animation: ba-flicker 3.5s steps(1) infinite; }
:is(.pg-layer, .bls) .bsx--card.ba-float > * { animation: ba-float 3s ease-in-out infinite alternate; }
.is-still .bsx--card[class*='ba-'] > *, .is-still .bsx--card[class*='ba-'] > *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bsx--card[class*='ba-'] > *, .bsx--card[class*='ba-'] > *::after { animation: none !important; }
}