/* ═══════════════════════════════════════════════════════════════
   WRITING PAGE — صفحة الكتابة المستقلة
   تصميم مأخوذ من writing modal الموجود في author-page.css
   مع تحويله لصفحة كاملة بدلاً من نافذة منبثقة
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:#6366f1;
  --primary-dark:#4f46e5;
  --secondary:#8b5cf6;
  --bg:#f8fafc;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --radius:14px;
}

html{scroll-behavior:smooth}
html,body{
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
  -webkit-overflow-scrolling:touch;
}

/* ── الحاوي العام ── */
.wpage{
  max-width:780px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  box-shadow:0 0 60px rgba(0,0,0,.06);
}

/* ── الشريط العلوي ── */
.wpage-head{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.wpage-back{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--bg);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:var(--text);
  text-decoration:none;
  transition:background .15s;
}
.wpage-back:active{background:var(--border)}
.wpage-logo{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
.wpage-logo img{height:28px;width:auto;object-fit:contain}
.wpage-logo .logo-text{
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── شارة النوع (tag) ── */
.wtag{
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.wtag-khatrah{background:#fdf4ff;color:#a855f7}
.wtag-qessa{background:#fff7ed;color:#ea580c}
.wtag-article{background:#eff6ff;color:#2563eb}
.wtag-poem{background:#f0fdf4;color:#16a34a}
.wtag-serial{background:#eef2ff;color:#6366f1}
.wtag-other{background:#f1f5f9;color:#475569}

/* ── جسم الصفحة ── */
.wpage-body{
  flex:1;
  padding:24px 22px 16px;
}

/* ── مسار التنقل (Breadcrumb) ── */
.wpage-breadcrumb{
  direction:rtl;
  overflow:hidden;
  margin-bottom:18px;
}
.wpbc-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:2px;
  white-space:nowrap;
  overflow:hidden;
}
.wpage-breadcrumb a,
.wpage-breadcrumb span{
  font-family:'Cairo',sans-serif;
  font-size:.86rem;
  font-weight:600;
  color:#94a3b8;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
  transition:color .18s;
  flex-shrink:0;
}
.wpage-breadcrumb a:hover{color:var(--primary)}
.wpbc-sep{
  display:inline-flex;
  align-items:center;
  color:#cbd5e1;
  user-select:none;
  margin:0 2px;
  flex-shrink:0;
}
.wpbc-sep svg{width:11px;height:11px;stroke-width:2.8}
.wpbc-current{
  color:var(--primary);
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex-shrink:1;
}
.wpage-breadcrumb svg{flex-shrink:0;opacity:.7}
.wpage-title{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  margin-bottom:20px;
  line-height:1.45;
  letter-spacing:-.2px;
}
.wpage-text{
  font-size:14.5px;
  color:#374151;
  line-height:2.1;
  margin-bottom:26px;
}
.wpage-text p{margin-bottom:14px}
.wpage-text p:last-child{margin-bottom:0}
.wpage-text h2,.wpage-text h3{
  font-size:17px;
  font-weight:800;
  color:var(--text);
  margin:22px 0 10px;
  line-height:1.5;
}
.wpage-text strong{color:var(--text);font-weight:800}
.wpage-text em{color:var(--primary);font-style:italic}

/* ── ذكر الكاتبة ── */
.wpage-author{
  font-size:13px;
  color:var(--muted);
  text-align:left;
  padding-top:18px;
  border-top:1px dashed var(--border);
}
.wpage-author .wauthor-label{font-weight:600;color:var(--muted)}
.wpage-author a{
  font-size:15px;
  font-weight:800;
  color:var(--primary);
  font-style:italic;
  text-decoration:none;
}
.wpage-author a:hover{text-decoration:underline}

/* ── أزرار التفاعل ── */
.wpage-actions{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid var(--border);
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 -4px 18px rgba(0,0,0,.04);
  z-index:5;
}
.w-heart-btn,.w-like-btn,.w-dislike-btn,.w-share-btn{
  display:flex;
  align-items:center;
  gap:4px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:20px;
  padding:5px 10px;
  font-family:'Cairo',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  color:var(--muted);
  transition:all .2s;
}
.w-heart-btn i,.w-like-btn i,.w-dislike-btn i,.w-share-btn i{font-size:14px}
.w-heart-btn:hover,.w-heart-btn.active{border-color:#f43f5e;color:#f43f5e;background:#fff1f2}
.w-like-btn:hover,.w-like-btn.active{border-color:#22c55e;color:#16a34a;background:#f0fdf4}
.w-dislike-btn:hover,.w-dislike-btn.active{border-color:#6366f1;color:#6366f1;background:#eef2ff}
.w-share-btn{margin-right:auto}
.w-share-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}
.w-heart-btn.pop,.w-like-btn.pop,.w-dislike-btn.pop{animation:wBtnPop .3s ease}
@keyframes wBtnPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ── share toast ── */
#w-share-toast{
  position:fixed;
  bottom:90px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(15,23,42,.92);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:10px 20px;
  border-radius:20px;
  opacity:0;
  transition:opacity .3s,transform .3s;
  pointer-events:none;
  z-index:999;
}
#w-share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── كوبي رايت ── */
.wpage-copyright{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:18px;
  padding:12px 16px 8px;
  font-family:'Cairo',sans-serif;
  font-size:.78rem;
  color:#94a3b8;
  text-align:center;
  direction:rtl;
  user-select:none;
  -webkit-user-select:none;
  border-top:1px dashed var(--border);
}

/* ── Skeleton Loading ── */
@keyframes sk-shimmer{
  0%{background-position:-600px 0}
  100%{background-position:600px 0}
}
.sk-block{
  background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:1200px 100%;
  animation:sk-shimmer 1.5s infinite linear;
  border-radius:8px;
}
#wpage-skeleton{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg,#f8fafc);
  display:flex;flex-direction:column;
  transition:opacity .35s;
  overflow:hidden;
}
#wpage-skeleton.sk-hide{opacity:0;pointer-events:none;}
.sk-head{
  height:66px;background:#fff;border-bottom:1px solid #e2e8f0;
  display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;
}
.sk-head .sk-circle{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.sk-head .sk-logo{width:80px;height:24px;margin:0 auto;}
.sk-head .sk-tag{width:44px;height:22px;border-radius:20px;}
.sk-body-wrap{flex:1;padding:24px 22px;display:flex;flex-direction:column;gap:16px;overflow:hidden;}
.sk-bread{width:200px;height:14px;border-radius:6px;}
.sk-author-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#f8fafc;border-radius:12px;}
.sk-author-row .sk-avatar{width:76px;height:76px;border-radius:50%;flex-shrink:0;}
.sk-author-info{display:flex;flex-direction:column;gap:8px;flex:1;}
.sk-name{width:130px;height:16px;}
.sk-sub{width:180px;height:13px;}
.sk-stats{width:120px;height:12px;}
.sk-title{width:70%;height:28px;border-radius:8px;margin-top:4px;}
.sk-lines{display:flex;flex-direction:column;gap:10px;}
.sk-line{height:14px;border-radius:6px;}
.sk-line:nth-child(1){width:100%}
.sk-line:nth-child(2){width:92%}
.sk-line:nth-child(3){width:87%}
.sk-line:nth-child(4){width:100%}
.sk-line:nth-child(5){width:78%}
.sk-line:nth-child(6){width:95%}
.sk-line:nth-child(7){width:83%}
body.dark-mode #wpage-skeleton{background:#0f172a;}
body.dark-mode .sk-head{background:#1e293b;border-color:#334155;}
body.dark-mode .sk-author-row{background:#1e293b;}
body.dark-mode .sk-block{background:linear-gradient(90deg,#1e293b 25%,#334155 50%,#1e293b 75%);background-size:1200px 100%;}

/* ── شاشات أكبر ── */
@media(min-width:768px){
  .wpage{max-width:100%;box-shadow:none;margin:0}
  .wpage-body{padding:32px 6vw 20px}
  .wpage-title{font-size:26px;margin-bottom:24px}
  .wpage-text{font-size:15.5px;line-height:2.2}
}
@media(min-width:1024px){
  .wpage{max-width:100%;margin:0;box-shadow:none;border-radius:0;min-height:100vh}
  .wpage-head{border-radius:0}
  .wpage-body{padding:36px 8vw 24px}
  .wpage-breadcrumb{max-width:1100px;margin-left:auto;margin-right:auto;margin-bottom:18px}
  .wpage-breadcrumb .wpbc-inner{margin:0}
  .wpage-title{font-size:28px;max-width:1100px;margin-left:auto;margin-right:auto}
  .wpage-text{max-width:1100px;margin-left:auto;margin-right:auto}
  .wpage-author{max-width:1100px;margin-left:auto;margin-right:auto}
  .wpage-copyright{max-width:1100px;margin-left:auto;margin-right:auto}
}