/*
 * CodeCanvas - popup.css
 *
 * The shared popup stylesheet. Everything is scoped under .cc-pop so nothing
 * can leak into the page it opens over, and only opacity and transform are
 * animated so the motion stays on the compositor.
 *
 * The contract with popup.js is small and explicit:
 *
 *   [hidden]      not in the layout at all (the server renders it hidden)
 *   .is-open      animating in, or open
 *   .is-closing   animating out, still in the layout for one moment
 *
 * Positions place the box; entrance animations say where it comes from;
 * .cc-pop--out-* says where it goes. A position and an animation are
 * independent, which is why each position restates the transform rather than
 * relying on one shared rule.
 */

.cc-pop{position:fixed;inset:0;z-index:999999;pointer-events:none;
  --cc-pop-ov:.55;--cc-pop-gap:16px;--cc-pop-ease:cubic-bezier(.22,1,.36,1)}
.cc-pop[hidden]{display:none}

/* ---- the dimmed page behind ---- */
.cc-pop__ov{position:absolute;inset:0;background:rgba(9,12,20,var(--cc-pop-ov));opacity:0;
  transition:opacity .26s ease;pointer-events:auto}
.cc-pop.is-open .cc-pop__ov{opacity:1}

/* ---- the box ---- */
.cc-pop__box{position:absolute;width:calc(100% - (var(--cc-pop-gap) * 2));max-height:calc(100% - (var(--cc-pop-gap) * 2));
  overflow:auto;background:#fff;color:#111827;border-radius:14px;
  box-shadow:0 24px 64px rgba(9,12,20,.28),0 4px 16px rgba(9,12,20,.14);
  opacity:0;pointer-events:auto;-webkit-overflow-scrolling:touch;
  transition:opacity .28s ease,transform .28s var(--cc-pop-ease)}
.cc-pop__body{min-height:20px}

/* ---- where it sits ---- */
.cc-pop--center .cc-pop__box{left:50%;top:50%;--cc-pop-rest:translate(-50%,-50%)}
.cc-pop--top .cc-pop__box{left:50%;top:var(--cc-pop-gap);--cc-pop-rest:translate(-50%,0)}
.cc-pop--bottom .cc-pop__box{left:50%;bottom:var(--cc-pop-gap);--cc-pop-rest:translate(-50%,0)}
.cc-pop--top-left .cc-pop__box{left:var(--cc-pop-gap);top:var(--cc-pop-gap);--cc-pop-rest:none}
.cc-pop--top-right .cc-pop__box{right:var(--cc-pop-gap);top:var(--cc-pop-gap);--cc-pop-rest:none}
.cc-pop--bottom-left .cc-pop__box{left:var(--cc-pop-gap);bottom:var(--cc-pop-gap);--cc-pop-rest:none}
.cc-pop--bottom-right .cc-pop__box{right:var(--cc-pop-gap);bottom:var(--cc-pop-gap);--cc-pop-rest:none}
.cc-pop--left .cc-pop__box{left:0;top:0;bottom:0;max-height:100%;border-radius:0 14px 14px 0;--cc-pop-rest:none}
.cc-pop--right .cc-pop__box{right:0;top:0;bottom:0;max-height:100%;border-radius:14px 0 0 14px;--cc-pop-rest:none}
.cc-pop--full .cc-pop__box{inset:0;width:100%;max-width:none!important;max-height:100%;border-radius:0;--cc-pop-rest:none}

/* ---- where it comes from ---- */
.cc-pop--anim-up .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(0,18px,0)}
.cc-pop--anim-down .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(0,-18px,0)}
.cc-pop--anim-left .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(-24px,0,0)}
.cc-pop--anim-right .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(24px,0,0)}
.cc-pop--anim-zoom .cc-pop__box{transform:var(--cc-pop-rest,none) scale(.94)}
.cc-pop--anim-fade .cc-pop__box,.cc-pop--anim-none .cc-pop__box{transform:var(--cc-pop-rest,none)}
.cc-pop--anim-none .cc-pop__box{transition:none}

/* ---- at rest ---- */
.cc-pop.is-open .cc-pop__box{opacity:1;transform:var(--cc-pop-rest,none)}

/* ---- the box paints above the dimmed page ---- */
.cc-pop--overlay .cc-pop__box{z-index:1}

/* ---- where it goes ----
   Closing removes .is-open, which puts the ENTRANCE transform back - so a
   popup that slid up would slide back down on the way out unless its exit
   says otherwise. "Fade out" therefore has to say "stay where you are"
   explicitly; it is not the absence of a rule. */
.cc-pop.is-closing .cc-pop__box{opacity:0}
.cc-pop--out-fade.is-closing .cc-pop__box{transform:var(--cc-pop-rest,none)}
.cc-pop--out-down.is-closing .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(0,18px,0)}
.cc-pop--out-up.is-closing .cc-pop__box{transform:var(--cc-pop-rest,none) translate3d(0,-18px,0)}
.cc-pop--out-zoom.is-closing .cc-pop__box{transform:var(--cc-pop-rest,none) scale(.96)}
.cc-pop--out-none.is-closing .cc-pop__box,.cc-pop--out-none.is-closing .cc-pop__ov{transition:none}
.cc-pop.is-closing .cc-pop__ov{opacity:0}

/* ---- the close button ---- */
.cc-pop__x{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:50%;background:rgba(17,24,39,.06);color:#374151;cursor:pointer;padding:0;
  transition:background .15s ease}
.cc-pop__x:hover{background:rgba(17,24,39,.12)}
.cc-pop__x:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cc-pop__x svg{width:15px;height:15px}

/* ---- the page behind does not scroll while a dimmed popup is open ---- */
html.cc-pop-locked,html.cc-pop-locked body{overflow:hidden}

/* ---- narrow screens ---- */
@media (max-width:600px){
  .cc-pop{--cc-pop-gap:10px}
  .cc-pop--left .cc-pop__box,.cc-pop--right .cc-pop__box{width:calc(100% - 40px)}
  /* A corner popup on a phone is a bottom sheet: there is no corner to
     sit in, and a 320px-wide box floating in the middle reads as an error. */
  .cc-pop--top-left .cc-pop__box,.cc-pop--top-right .cc-pop__box,
  .cc-pop--bottom-left .cc-pop__box,.cc-pop--bottom-right .cc-pop__box{
    left:var(--cc-pop-gap);right:var(--cc-pop-gap);top:auto;bottom:var(--cc-pop-gap);
    width:auto;max-width:none!important}
}
.cc-pop--desktop{display:none}
@media (min-width:601px){.cc-pop--desktop:not([hidden]){display:block}}

/* ---- asked not to move things ---- */
@media (prefers-reduced-motion:reduce){
  .cc-pop__ov,.cc-pop__box{transition:opacity .01ms!important}
  .cc-pop .cc-pop__box,.cc-pop.is-open .cc-pop__box,.cc-pop.is-closing .cc-pop__box{transform:var(--cc-pop-rest,none)!important}
}

/* ---- printing a popup over the page is never wanted ---- */
@media print{.cc-pop{display:none!important}}