/* Paper Shaders base rules. The library normally injects them with innerHTML, which the CSP forbids,
   so they live here and liquid-metal.js only adds an inert marker. */
:where([data-paper-shader]) { isolation: isolate; position: relative; }
:where([data-paper-shader]) canvas { contain: strict; display: block; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; }

/* Liquid metal buttons: the shader draws a chrome rim, the face keeps the palette colours and readable text.
   Metal and face sit on negative layers inside the isolated button, so text nodes always paint above them.
   Without JS or WebGL the buttons stay exactly as styled elsewhere. */
.is-liquid {
  --face: var(--btn);
  --face-hover: var(--btn-hover);
  --rim: 2px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .22), 0 20px 12px rgb(0 0 0 / .04), 0 9px 9px rgb(0 0 0 / .1), 0 2px 5px rgb(0 0 0 / .14);
  transition: transform 450ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}
.is-liquid, .is-liquid:hover, .is-liquid:disabled, .is-liquid[aria-expanded=true] { background: transparent; border-color: transparent; }
.is-liquid.button-light, .is-liquid.header-cta, .is-liquid.floating-toggle[aria-expanded=true] { --face: var(--accent); --face-hover: var(--accent-soft); }
.is-liquid.inquiry-submit:disabled { --face: var(--stone); --face-hover: var(--stone); box-shadow: 0 0 0 1px var(--line); }
.is-liquid > .liquid-metal { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.is-liquid::before { content: ''; position: absolute; inset: var(--rim); z-index: -1; border-radius: inherit; background: linear-gradient(180deg, color-mix(in oklab, var(--face), #fff 12%) 0%, var(--face) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); pointer-events: none; transition: background-color 180ms ease, box-shadow 150ms cubic-bezier(.4, 0, .2, 1); }
.is-liquid:not(:disabled):hover { box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 12px 6px rgb(0 0 0 / .05), 0 8px 5px rgb(0 0 0 / .1), 0 4px 4px rgb(0 0 0 / .15), 0 1px 2px rgb(0 0 0 / .2); }
.is-liquid:not(:disabled):hover::before { background: linear-gradient(180deg, color-mix(in oklab, var(--face-hover), #fff 12%) 0%, var(--face-hover) 60%); }
.is-liquid:not(:disabled):active { transform: translateY(1px) scale(.98); box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .3); }
.is-liquid:not(:disabled):active::before { box-shadow: inset 0 2px 4px rgb(0 0 0 / .4), inset 0 1px 2px rgb(0 0 0 / .3); }
.is-liquid:disabled > .liquid-metal { opacity: .35; filter: grayscale(1); }
.floating-toggle.is-liquid:hover { transform: translateY(-2px); }
.floating-toggle.is-liquid { --rim: 3px; }
.liquid-ripple { position: absolute; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .45) 0%, rgb(255 255 255 / 0) 70%); pointer-events: none; transform: translate(-50%, -50%) scale(0); animation: liquid-ripple 600ms ease-out forwards; }
@keyframes liquid-ripple { to { transform: translate(-50%, -50%) scale(8); opacity: 0; } }