/* ============ PYRA CONSENT — notice styling ============
   Page-agnostic, exactly like editor.css: reads only the CSS vars both
   index.css and studio.css define (--bg/--surface/--line/--line2/--text/
   --muted/--gold/--mono/--sans/--ease), with a fallback per property so a
   missing var degrades to something legible rather than transparent. */

#pyraConsent{
  position:fixed;z-index:9000;
  left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  padding-left:calc(22px + env(safe-area-inset-left));
  padding-right:calc(22px + env(safe-area-inset-right));
  background:var(--surface,var(--panel,#13110D));
  border-top:1px solid var(--line2,rgba(233,227,211,.18));
  box-shadow:0 -18px 50px rgba(0,0,0,.45)
}
#pyraConsent .pc-text{
  flex:1;min-width:240px;margin:0;
  font-family:var(--sans,-apple-system,sans-serif);font-size:12.5px;line-height:1.5;
  color:var(--muted,#97917F)
}
#pyraConsent .pc-acts{display:flex;gap:10px;flex-shrink:0}
#pyraConsent .pc-btn{
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted,#97917F);
  background:none;border:1px solid var(--line,rgba(233,227,211,.09));border-radius:999px;
  padding:11px 20px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .3s var(--ease,ease),border-color .3s var(--ease,ease)
}
#pyraConsent .pc-btn:hover{color:var(--text,#EAE6DA);border-color:var(--line2,rgba(233,227,211,.35))}
#pyraConsent .pc-btn.pc-primary{
  color:#1A1305;background:var(--gold,#D6A545);border-color:transparent;font-weight:600
}
#pyraConsent .pc-btn.pc-primary:hover{filter:brightness(1.07);color:#1A1305}

/* The studio's slice button and the deploy bar are position:sticky at the
   bottom, and both pages float toasts there. Lift them above the notice for
   as long as it is on screen, rather than letting it cover the primary
   action — a consent notice that hides the button it is asking about is the
   worst version of this pattern.
   A body class rather than :has(#pyraConsent) — :has() would be neater, but
   it is the one selector here that silently does nothing on an older engine,
   and the failure mode is the notice sitting on top of the slice button.

   --pyra-consent-h is published by consent.js from the notice's measured
   height, because it is 139px stacked on a phone and ~70px on desktop and
   reflows with the copy. A hardcoded offset was tried first and left the
   slice button 43px underneath the notice. */
body.pyra-consent-open .pillar-action{bottom:calc(var(--pyra-consent-h,0px) + 14px + env(safe-area-inset-bottom))}
body.pyra-consent-open .deploy-bar{bottom:calc(var(--pyra-consent-h,0px) + 22px + env(safe-area-inset-bottom))}
body.pyra-consent-open #toast{bottom:calc(var(--pyra-consent-h,0px) + 30px + env(safe-area-inset-bottom))}
body.pyra-consent-open .toasts{bottom:calc(var(--pyra-consent-h,0px) + 28px + env(safe-area-inset-bottom))}

@media (max-width:720px){
  #pyraConsent{
    gap:12px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:stretch
  }
  #pyraConsent .pc-text{min-width:0;font-size:12px}
  /* Full-width, side by side — two 44px targets a thumb can hit without
     aiming, on the row nearest the thumb. */
  #pyraConsent .pc-acts{gap:8px}
  #pyraConsent .pc-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  #pyraConsent .pc-btn{transition:none}
}