/* ============ PYRA SIGN-IN PROMPT — notice styling ============
   Page-agnostic like consent.css and editor.css: reads only the CSS vars both
   index.css and studio.css define, with a fallback per property so a missing
   var degrades to something legible rather than transparent.

   Bottom-RIGHT, not full-width across the bottom like the consent notice.
   That is deliberate: the consent notice is a legal interruption and is
   allowed to own the edge of the screen, while this one appears next to a
   board the user is reading and must not span it. Two full-width bars stacked
   would also read as one broken component. */

#pyraSignin{
  position:fixed;z-index:8800;
  right:calc(22px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));
  width:min(360px,calc(100vw - 44px));
  display:flex;flex-direction:column;gap:14px;
  padding:18px 20px;
  background:var(--surface,var(--panel,#13110D));
  border:1px solid var(--line2,rgba(233,227,211,.18));
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(12px);
  /* Not interactive until revealed. Belt and braces against the background-tab
     case handled in signin-prompt.js: an opacity-0 fixed element still
     receives clicks, so an unrevealed notice would silently swallow taps on
     the corner of the board underneath it. */
  pointer-events:none;
  transition:opacity .32s var(--ease,ease),transform .32s var(--ease,ease)
}
#pyraSignin.show{opacity:1;transform:none;pointer-events:auto}

#pyraSignin .ps-text{
  margin:0;
  font-family:var(--sans,-apple-system,sans-serif);font-size:13px;line-height:1.55;
  color:var(--muted,#97917F)
}
#pyraSignin .ps-acts{display:flex;gap:10px}
#pyraSignin .ps-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 14px;min-height:44px;
  /* "Not now" sizes to its content and the primary takes the rest. Splitting
     the row evenly wrapped "SIGN IN WITH GITHUB" onto two lines while "NOT
     NOW" sat in half an inch of empty pill. Both stay above the 44px floor
     either way, since min-height owns that and padding never reduces it. */
  flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  cursor:pointer;transition:color .3s var(--ease,ease),border-color .3s var(--ease,ease)
}
#pyraSignin .ps-btn:hover{color:var(--text,#EAE6DA);border-color:var(--line2,rgba(233,227,211,.35))}
#pyraSignin .ps-btn.ps-primary{
  color:#1A1305;background:var(--gold,#D6A545);border-color:transparent;font-weight:600;
  flex:1 1 60%;letter-spacing:.1em
}
#pyraSignin .ps-btn.ps-primary:hover{filter:brightness(1.07);color:#1A1305}

/* Both notices can be on screen together — consent appears on a first visit,
   and a first visit is exactly when someone runs their first real pyramid.
   Stack above it using the height consent.js measures and publishes, the same
   mechanism the sticky action buttons use. A hardcoded offset was tried for
   those and left the slice button 43px underneath. */
body.pyra-consent-open #pyraSignin{
  bottom:calc(var(--pyra-consent-h,0px) + 22px + env(safe-area-inset-bottom))
}

/* And the page's own toasts must clear THIS notice in turn. Raising z-index
   alone was tried and is not enough — it puts the toast in FRONT of the
   notice, overlapping its buttons, which is a different bug rather than a fix.
   The toast has to move up, the same way the sticky actions move up for the
   consent notice.

   Both vars are summed in one expression rather than left to two competing
   rules: all three can be on screen at once (a first visit is exactly when
   someone runs their first real pyramid and then hits a limit), and each var
   is 0px whenever its notice is absent. This file is linked after consent.css,
   so this rule wins the source-order tie and is the one that accounts for
   both heights. */
body.pyra-signin-open #toast{
  bottom:calc(var(--pyra-consent-h,0px) + var(--pyra-signin-h,0px) + 30px + env(safe-area-inset-bottom))
}
body.pyra-signin-open .toasts{
  bottom:calc(var(--pyra-consent-h,0px) + var(--pyra-signin-h,0px) + 28px + env(safe-area-inset-bottom))
}

@media (max-width:720px){
  /* Full width on a phone: 360px in a corner leaves a 15px gutter that reads
     as a rendering error, and the two buttons need the room to stay 44px. */
  #pyraSignin{
    left:calc(14px + env(safe-area-inset-left));
    right:calc(14px + env(safe-area-inset-right));
    width:auto;
    bottom:calc(14px + env(safe-area-inset-bottom));
    padding:16px 18px
  }
  body.pyra-consent-open #pyraSignin{
    bottom:calc(var(--pyra-consent-h,0px) + 14px + env(safe-area-inset-bottom))
  }
  #pyraSignin .ps-text{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  /* pointer-events must come back with the opacity. Overriding only opacity
     here would leave the base rule's pointer-events:none in force and make the
     notice permanently unclickable for exactly the users least able to work
     around it. */
  #pyraSignin{transition:none;opacity:1;transform:none;pointer-events:auto}
  #pyraSignin .ps-btn{transition:none}
}