/* ============================================================
   Studio OS Preview Gate (shared, self-contained)
   A blocking "this is a preview" acknowledgement modal that ANY
   app in Preview phase can include. Self-contained on purpose:
   it must work on pages that do NOT load the Ajwa components CSS
   (e.g. the landing), so every value falls back to a literal.
   Themes automatically via the suite-wide [data-theme] attribute.
   Paired with /assets/preview-gate.js. Namespace: .aj-pg-*
   ============================================================ */

.aj-pg-scrim{
  position:fixed; inset:0; z-index:2147483600;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:rgba(20,17,13,.55);
  -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1);
  opacity:0; animation:aj-pg-fade .22s cubic-bezier(.2,.6,.2,1) forwards;
  font-family:var(--font-body, var(--font, system-ui,-apple-system,'Segoe UI',sans-serif));
}
.aj-pg-scrim--closing{ animation:aj-pg-fade-out .2s cubic-bezier(.2,.6,.2,1) forwards; }

.aj-pg{
  position:relative; width:min(440px, calc(100vw - 36px));
  max-height:calc(100dvh - 36px); overflow:auto;
  background:var(--surface, #ffffff);
  color:var(--text, #1E1A14);
  border:1px solid var(--border, #E9E1D5);
  border-radius:var(--radius-lg, 18px);
  box-shadow:var(--shadow-lg, 0 22px 48px -18px rgba(30,26,20,.34), 0 8px 18px -10px rgba(30,26,20,.12));
  transform:translateY(8px) scale(.98);
  animation:aj-pg-pop .26s cubic-bezier(.16,1,.3,1) forwards;
}
.aj-pg__spectrum{ height:3px; background:var(--spectrum, linear-gradient(100deg,#84BD00 0%,#00A89C 52%,#00A3E0 100%)); }
.aj-pg__pad{ padding:24px 24px 20px; display:flex; flex-direction:column; gap:14px; }

.aj-pg__head{ display:flex; align-items:center; gap:12px; }
.aj-pg__icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:12px;
  display:grid; place-items:center;
  color:var(--warning, #9A6207);
  background:var(--warning-tint, #FBEFD2);
}
.aj-pg__icon svg{ width:22px; height:22px; }
.aj-pg__badge{
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--warning, #9A6207);
  background:var(--warning-tint, #FBEFD2);
  border:1px solid color-mix(in oklab, var(--warning, #9A6207) 30%, transparent);
  border-radius:999px; padding:3px 10px;
}

.aj-pg__title{
  margin:0; font-size:20px; line-height:1.18; letter-spacing:-.01em; font-weight:600;
  color:var(--heading, var(--text, #1E1A14));
  font-family:var(--font-display, var(--font-body, var(--font, system-ui,sans-serif)));
}
.aj-pg__body{
  margin:0; font-size:14px; line-height:1.55;
  color:var(--text-muted, #6D6353);
}

.aj-pg__check{
  display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
  margin-top:2px; padding:11px 12px; border-radius:12px;
  border:1px solid var(--border, #E9E1D5);
  background:var(--surface-2, #F4EFE7);
  transition:border-color .18s ease, background .18s ease;
}
.aj-pg__check:hover{ border-color:var(--border-strong, #D8CDBC); }
.aj-pg__check input{ position:absolute; opacity:0; width:1px; height:1px; }
.aj-pg__box{
  width:22px; height:22px; flex:0 0 22px; border-radius:6px;
  border:1.5px solid var(--border-strong, #D8CDBC);
  background:var(--surface, #fff);
  display:grid; place-items:center;
  transition:background .18s ease, border-color .18s ease;
}
.aj-pg__box svg{ width:14px; height:14px; stroke:#fff; stroke-width:3.2; fill:none; opacity:0; transition:opacity .18s ease; }
.aj-pg__check input:checked + .aj-pg__box{ background:var(--primary, #00843D); border-color:var(--primary, #00843D); }
.aj-pg__check input:checked + .aj-pg__box svg{ opacity:1; }
.aj-pg__check input:focus-visible + .aj-pg__box{ box-shadow:0 0 0 3px var(--ring, rgba(0,163,224,.45)); }
.aj-pg__checklabel{ font-size:13.5px; font-weight:500; color:var(--text, #1E1A14); }

.aj-pg__btn{
  width:100%; height:46px; border:none; border-radius:999px; cursor:pointer;
  background:var(--primary, #00843D); color:var(--text-on-brand, #fff);
  font-family:inherit; font-weight:600; font-size:15px;
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(49,45,37,.10));
  transition:filter .18s ease, transform .12s ease, opacity .18s ease;
}
.aj-pg__btn:hover:not(:disabled){ filter:brightness(1.06); }
.aj-pg__btn:active:not(:disabled){ transform:translateY(.5px) scale(.99); }
.aj-pg__btn:disabled{ opacity:.45; cursor:not-allowed; }

.aj-pg__feedback{
  margin:4px 0 0; font-size:12.5px; line-height:1.5; text-align:center;
  color:var(--text-subtle, #928574);
}
.aj-pg__feedback a{
  color:var(--link, #007EAC); font-weight:600; text-decoration:none;
  border-bottom:1px solid color-mix(in oklab, var(--link, #007EAC) 35%, transparent);
}
.aj-pg__feedback a:hover{ border-bottom-color:var(--link, #007EAC); }

/* gentle shake when a user clicks the backdrop (it's a required gate) */
.aj-pg--nudge{ animation:aj-pg-nudge .3s cubic-bezier(.36,.07,.19,.97); }

@keyframes aj-pg-fade{ to{ opacity:1; } }
@keyframes aj-pg-fade-out{ to{ opacity:0; } }
@keyframes aj-pg-pop{ to{ transform:none; } }
@keyframes aj-pg-nudge{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-3px)} }

@media (prefers-reduced-motion: reduce){
  .aj-pg-scrim,.aj-pg,.aj-pg--nudge{ animation-duration:.001ms !important; }
}