/* ============================================================
   مِسبار للبحوث — app shell (B2B research system).
   Turns a workspace page into a standalone professional system:
   a fixed sidebar + slim topbar, education chrome hidden.
   Add class="rshell" to <body> and include research-shell.js.
   Aurora tokens are inherited from each page; this only adds the shell.
   ============================================================ */

/* — hide the education marketing chrome on system pages — */
body.rshell .nav,
body.rshell #nav,
body.rshell .mobmenu,
body.rshell .burger,
body.rshell > footer,
body.rshell footer.site-footer{ display:none !important; }

/* the atmosphere stays as the app background, but calmer */
body.rshell .aurora{ opacity:.55; }
body.rshell{ overflow-x:hidden; }
/* the marketing hero is replaced by the topbar on system pages */
body.rshell #rp-hero{ display:none; }

/* ── sidebar (start side = right in RTL) ── */
.rs-side{
  position:fixed; inset-inline-start:0; top:0; bottom:0; width:250px; z-index:120;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,rgba(14,11,24,.86),rgba(9,7,15,.9));
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-inline-end:1px solid rgba(255,255,255,.13);
  padding:20px 14px 14px;
}
.rs-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 4px; }
.rs-brand .mk{ width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:url("/assets/img/favicon.svg") center/cover no-repeat;
  box-shadow:0 8px 22px rgba(124,58,237,.4); }
.rs-brand .wm{ font-weight:900; font-size:16.5px; letter-spacing:normal; line-height:1.3; }
.rs-brand .wm b{ color:var(--vio3); font-weight:900; }
.rs-brand .wm small{ display:block; font-size:10.5px; font-weight:500; letter-spacing:.06em;
  color:var(--faint); margin-top:2px; }

/* workspace switcher chip */
.rs-ws{ display:flex; align-items:center; gap:10px; margin:16px 4px 8px; padding:10px 11px;
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  cursor:default; }
.rs-ws .av{ width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center;
  font-weight:900; font-size:13px; color:#0a1400;
  background:linear-gradient(135deg,#b8ff3c,#7ee00f); }
.rs-ws .meta{ min-width:0; line-height:1.25; }
.rs-ws .meta b{ display:block; font-size:13.5px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.rs-ws .meta small{ display:block; font-size:10.5px; color:var(--faint); }

.rs-sec{ font-size:10px; letter-spacing:.14em; color:var(--faint); font-weight:700;
  padding:14px 12px 6px; }

/* nav */
.rs-nav{ display:flex; flex-direction:column; gap:3px; }
.rs-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px;
  font-size:14px; font-weight:600; color:var(--mut); transition:.18s var(--ease); position:relative; }
.rs-nav a svg{ width:18px; height:18px; flex:0 0 auto; opacity:.85; }
.rs-nav a:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
.rs-nav a.on{ background:linear-gradient(100deg,rgba(139,92,246,.2),rgba(139,92,246,.06));
  color:#fff; }
.rs-nav a.on::before{ content:""; position:absolute; inset-inline-start:-14px; top:50%;
  transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0;
  background:var(--vio3); }
.rs-nav a.on svg{ opacity:1; color:var(--vio3); }

/* bottom user chip */
.rs-foot{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.11); }
.rs-user{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px; }
.rs-user .av{ width:32px; height:32px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
  font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--vio),var(--vio2)); }
.rs-user .meta{ min-width:0; line-height:1.2; }
.rs-user .meta b{ display:block; font-size:12.5px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:120px; }
.rs-user .meta small{ font-size:10px; color:var(--faint); }
.rs-out{ margin-inline-start:auto; width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  display:grid; place-items:center; color:var(--faint); background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.11); cursor:pointer; transition:.18s; }
.rs-out:hover{ color:#ff8a8a; border-color:rgba(255,120,120,.3); background:rgba(255,120,120,.08); }
.rs-out svg{ width:15px; height:15px; }

/* ── slim topbar (inside main) ── */
.rs-top{ position:sticky; top:0; z-index:90; display:flex; align-items:center; gap:14px;
  padding:14px clamp(20px,4vw,44px); margin:0 calc(clamp(20px,4vw,44px) * -1) 22px;
  background:rgba(9,7,15,.55); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.11); }
.rs-top .rs-burger{ display:none; width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:var(--ink);
  place-items:center; }
.rs-top .rs-burger svg{ width:18px; height:18px; }
.rs-top .tt{ font-weight:800; font-size:16px; letter-spacing:normal; }
.rs-top .tt small{ display:block; font-size:11px; font-weight:500; color:var(--faint); margin-top:1px; }
.rs-top .rs-back{ font-size:13.5px; font-weight:700; color:var(--mut); padding:7px 12px;
  border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  transition:.18s; }
.rs-top .rs-back:hover{ color:var(--ink); background:rgba(255,255,255,.07); }
.rs-top .sp{ flex:1; }
.rs-top .rs-cta{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px;
  font-size:13.5px; font-weight:800; cursor:pointer; border:0;
  background:linear-gradient(120deg,#b8ff3c,#7ee00f); color:#0a1400;
  box-shadow:0 10px 30px rgba(184,255,60,.24); transition:.2s var(--ease); }
.rs-top .rs-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 38px rgba(184,255,60,.34); }

/* ── main content offset ── */
body.rshell .rp,
body.rshell .rs-main{ margin-inline-start:250px; max-width:none;
  padding:0 clamp(20px,4vw,44px) 90px; }
body.rshell .rp > *{ max-width:1080px; margin-inline:auto; }
body.rshell .rp > .rs-top{ max-width:none; }

/* backdrop for mobile drawer */
.rs-scrim{ position:fixed; inset:0; z-index:115; background:rgba(4,3,9,.6);
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:.3s; }
.rs-scrim.on{ opacity:1; pointer-events:auto; }

/* ── mobile ── */
@media(max-width:900px){
  .rs-side{ transform:translateX(var(--rs-hide,110%)); transition:transform .34s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.5); }
  html[dir=rtl] .rs-side{ --rs-hide:110%; }
  .rs-side.open{ transform:translateX(0); }
  body.rshell .rp,
  body.rshell .rs-main{ margin-inline-start:0; }
  .rs-top .rs-burger{ display:grid; }
}

/* ── "Getting started" activation checklist (post-onboarding helper) ── */
.rs-gs{ position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:130; width:290px;
  max-width:calc(100vw - 40px); font-family:inherit; color:#f4f2fb;
  background:linear-gradient(180deg,rgba(31,25,49,.98),rgba(19,15,32,.98));
  border:1px solid rgba(255,255,255,.13); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); padding:15px 15px 12px;
  animation:rsgsIn .45s cubic-bezier(.19,1,.22,1); }
@keyframes rsgsIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
.rs-gs .h{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.rs-gs .h b{ font-size:14.5px; font-weight:800; color:#fff; }
.rs-gs .h .ct{ font-size:12px; font-weight:800; color:#b8ff3c; }
.rs-gs .h .x{ margin-inline-start:auto; cursor:pointer; background:none; border:0; color:#8b84a0;
  font-size:20px; line-height:1.3; padding:0 4px; transition:.15s; }
.rs-gs .h .x:hover{ color:#fff; }
.rs-gs .bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:11px; }
.rs-gs .bar>i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#8b5cf6,#b8ff3c); transition:width .6s cubic-bezier(.19,1,.22,1); }
.rs-gs .st{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:10px;
  font-size:13px; color:#cfc9dd; text-decoration:none; transition:.15s; }
.rs-gs a.st:hover{ background:rgba(255,255,255,.07); color:#fff; }
.rs-gs .st .ck{ width:19px; height:19px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-size:11px; border:1.5px solid rgba(255,255,255,.25); }
.rs-gs .st.done{ color:#8b84a0; }
.rs-gs .st.done > span:last-child{ text-decoration:line-through; }
.rs-gs .st.done .ck{ background:linear-gradient(135deg,#b8ff3c,#7ee00f); border-color:transparent;
  color:#183000; font-weight:900; }
.rs-gs a.st.next{ background:rgba(139,92,246,.14); color:#fff; font-weight:700; }
.rs-gs a.st.next .ck{ border-color:#a855f7; color:#c084fc; }
@media(max-width:900px){ .rs-gs{ inset-inline:auto 12px; inset-block-end:12px; width:270px; } }
