/* ورّاق (النسخة ٣): الطبقة المشتركة بين الصفحات كلها — الشريط العلوي، والمقاييس، والأزرار والحقول، واللمس.
   تعمل حيث العلامة data-v3. الألوان من wq.css (أو covers/ui.css في أدوات الأغلفة والأساليب) فتتبع مظهر المالك والسِّراج. */

[data-v3] {
  --bar-h: 60px;
  --r-s: 8px;
  --r: 12px;
  --r-l: 16px;
  --sh-1: 0 1px 2px rgba(42, 29, 20, .06), 0 6px 18px -10px rgba(42, 29, 20, .22);
  --sh-2: 0 2px 6px rgba(42, 29, 20, .07), 0 18px 40px -22px rgba(42, 29, 20, .38);
  --ring: 0 0 0 3px color-mix(in srgb, var(--gold, #C5A059) 35%, transparent);
  --tap: 36px;
  scroll-padding-top: calc(var(--bar-h) + 12px);
  -webkit-tap-highlight-color: transparent;
}
@media (pointer: coarse) { [data-v3] { --tap: 44px; } }
@media (max-width: 1023.98px) { [data-v3] { --bar-h: 56px; } }
[data-v3].night { --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -10px rgba(0, 0, 0, .6); --sh-2: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .8); }
[data-v3] ::selection { background: color-mix(in srgb, #C5A059 40%, transparent); }

/* ================= الشريط العلوي ================= */
[data-v3] .ws-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: var(--bar-h); padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); font-family: var(--ui); }
[data-v3] .ws-home { display: inline-flex; align-items: center; gap: 10px; color: var(--mark); text-decoration: none; flex: none; padding: 4px 2px; }
[data-v3] .ws-home svg { width: 17px; height: 31px; flex: none; }
[data-v3] .ws-home .lgd { fill: var(--dot, #C5A059); }
[data-v3] .ws-home .wq-word { font-size: 30px; height: 1.12em; vertical-align: 0; }
[data-v3] .ws-home small { font: 400 15px/1 var(--display); color: var(--muted); white-space: nowrap; }
[data-v3] .ws-sep { width: 1px; height: 28px; background: var(--line); flex: none; }
[data-v3] .ws-doc { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
[data-v3] .ws-doc small { font-size: 11.5px; font-weight: 700; color: var(--gold-d, var(--gold)); }
[data-v3] .ws-doc b { font: 700 18px/1.35 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-v3] .ws-fill { flex: 1 1 auto; }
[data-v3] .ws-nav { display: flex; align-items: center; gap: 2px; flex: none; }
[data-v3] .ws-nav .lnk { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: 700 13.5px/1 var(--ui); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
[data-v3] .ws-nav .lnk svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
[data-v3] .ws-nav .lnk:hover, [data-v3] .ws-nav .lnk[aria-current="page"] { background: var(--vellum, var(--accent-soft)); color: var(--rubric, var(--head)); }
[data-v3] .ws-nav .fb-open { position: static; inset: auto; box-shadow: none; transform: none; margin: 0; }
[data-v3] .ws-nav .fb-open i, [data-v3] .ws-nav .fb-open em { display: none; }
[data-v3] .ws-reset { color: var(--muted) !important; }
[data-v3] .ws-reset:hover { color: var(--err, var(--danger)) !important; }
[data-v3] .ws-bar .lamp { display: inline-flex; align-items: center; gap: 8px; height: 36px; border-radius: 999px; padding: 0 13px; flex: none; font: 700 13.5px/1 var(--ui); background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
[data-v3] .ws-bar .lamp svg { width: 18px; height: 18px; }
[data-v3] .ws-bar .lamp[aria-pressed="true"] svg path:first-child { fill: var(--gold); }
[data-v3] .ws-go { flex: none; height: 40px; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14.5px; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--btn, var(--accent)) 85%, transparent); }
[data-v3] .ws-more { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--sheet, var(--card)); cursor: pointer; place-items: center; align-content: center; gap: 3px; flex: none; padding: 0; }
[data-v3] .ws-more i { display: block; width: 4px; height: 4px; background: var(--ink); transform: rotate(45deg); }
@media (max-width: 1280px) { [data-v3] .ws-nav .lnk span { display: none; } [data-v3] .ws-nav .lnk { padding: 0 10px; } [data-v3] .ws-nav .lnk svg { opacity: 1; } [data-v3] .ws-home small { display: none; } }
@media (max-width: 1023.98px) {
  [data-v3] .ws-bar { gap: 10px; padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left)); }
  [data-v3] .ws-more { display: grid; }
  [data-v3] .ws-nav { position: absolute; top: calc(100% + 8px); inset-inline-end: 12px; display: grid; gap: 2px; min-width: 230px; padding: 8px; border-radius: var(--r-l); background: var(--sheet, var(--card)); border: 1px solid var(--line); box-shadow: var(--sh-2); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; visibility: hidden; transition: opacity .2s, transform .25s var(--pen, ease), visibility 0s .25s; }
  [data-v3] .ws-nav.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s, transform .25s var(--pen, ease); }
  [data-v3] .ws-nav .lnk { height: 46px; padding: 0 14px; border-radius: var(--r-s); justify-content: flex-start; font-size: 14.5px; }
  [data-v3] .ws-nav .lnk span { display: inline; }
  [data-v3] .ws-bar .lamp span { display: none; }
  [data-v3] .ws-bar .lamp { width: 40px; height: 40px; padding: 0; justify-content: center; }
  [data-v3] .ws-home .wq-word { font-size: 26px; }
  [data-v3] .ws-doc b { font-size: 16px; }
  [data-v3] .ws-go { height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 640px) {
  [data-v3] .ws-sep { display: none; }
  [data-v3] .ws-doc ~ .ws-nav ~ .lamp { margin-inline-start: 0; }
  [data-v3] .ws-doc + .ws-nav, [data-v3] .ws-has-doc .ws-home .wq-word { display: none; }
  [data-v3] .ws-doc small { font-size: 10.5px; }
}
@media (max-width: 400px) { [data-v3] .ws-bar { gap: 8px; } [data-v3] .ws-go { padding: 0 12px; font-size: 13px; } [data-v3] .ws-has-doc .ws-go { display: none; } }
/* مضمَّنٌ في صفحةٍ أخرى (المنضدة): بلا شريط */
.ws-embed .ws-bar, .ws-embed .fb-open { display: none !important; }

/* ================= صفحات الموقع (wq.css): الأزرار والحقول والبطاقات ================= */
[data-v3].wq .btn { border-radius: var(--r); transition: background-color .2s, box-shadow .2s, border-color .2s, transform .15s; }
[data-v3].wq .btn:active { transform: translateY(1px); }
[data-v3].wq .btn.big { border-radius: 14px; }
[data-v3].wq .btn.small, [data-v3].wq .tbtn { border-radius: 999px; }
[data-v3].wq .btn:not(.quiet):not(.gold) { box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--btn) 90%, transparent); }
[data-v3].wq .btn.quiet { background: var(--sheet); }
[data-v3].wq :focus-visible { outline: 2px solid var(--gold-d); outline-offset: 2px; border-radius: 8px; }
[data-v3].wq .lamp { border-radius: 999px; }
[data-v3].wq .seg { border-radius: var(--r); }
[data-v3].wq .toast { border-radius: var(--r); }
[data-v3].wq .colophon, [data-v3].wq .foot { font-size: 14.5px; }

/* ================= أدوات الأغلفة والأساليب ولوحة المالك (covers/ui.css و app.css) ================= */
[data-v3]:not(.wq) { --radius: 10px; }
[data-v3]:not(.wq) .btn { border-radius: var(--r-s); min-height: 36px; transition: background-color .2s, border-color .2s, box-shadow .2s, transform .15s; }
[data-v3]:not(.wq) .btn:active { transform: translateY(1px); }
[data-v3]:not(.wq) .btn.primary { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--accent, #6B1D2F) 90%, transparent); }
[data-v3]:not(.wq) .card { border-radius: var(--r-l); }
[data-v3]:not(.wq) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), [data-v3]:not(.wq) select, [data-v3]:not(.wq) textarea { border-radius: var(--r-s); }
[data-v3]:not(.wq) :focus-visible { outline: 2px solid var(--gold, #8A6727); outline-offset: 2px; }

/* السِّراج في أدوات الأساليب (covers/ui.css): ذهبٌ على لازورد كبقية ورّاق */
html.night[data-v3]:not(.wq) {
  --paper: #0F1A2B; --card: #132037; --ink: #EDE3CB; --ink-2: #D9CFB8; --muted: #A9B4C6; --line: #2A3B57; --line-2: #3A4D6C;
  --accent: #E2C27A; --accent-2: #F0D79C; --accent-soft: #16243B; --head: #E2C27A; --mark: #E2C27A; --dot: #D6B36A; --on: #0F1A2B;
  --gold: #D6B36A; --gold-soft: #1B2A44; --danger-soft: #3A1D25; --ok-soft: #16302A;
  color-scheme: dark;
}
html.night[data-v3]:not(.wq) body { background: var(--paper); color: var(--ink); }
html.night[data-v3]:not(.wq) input, html.night[data-v3]:not(.wq) select, html.night[data-v3]:not(.wq) textarea { background-color: #0F1A2B; color: var(--ink); border-color: var(--line); }
html.night[data-v3]:not(.wq) :is(.slot, .slot.make, .seg2, .swb, .ximg, .xpage, .pe-item, .pe-pos button, .pe-bsm, .rt-btn, .rt-chip, .name-inp:hover, .name-inp:focus) { background: var(--card); }
html.night[data-v3]:not(.wq) :is(.adv, .pe-bsm-v, .rt-bar, .rt-chips, code, .pe-row:hover, .rt-btn:hover) { background: var(--accent-soft); }
html.night[data-v3]:not(.wq) .slot { border-color: var(--line-2); }html.night[data-v3]:not(.wq) .ws-bar .lamp[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
/* ================= اللمس ================= */
/* حقول الكتابة على اللمس: ١٦ نقطة، فلا يكبّر Safari الصفحة عند الكتابة */
@media (pointer: coarse) {
  [data-v3] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), [data-v3] select, [data-v3] textarea { font-size: 16px !important; }
}

/* «اصنع بطاقتك»: شريط الموقع فوق قائمة الأساليب وحدها (لا في محرر الأسلوب، ولا في استوديو المالك، ولا مضمَّناً) */
[data-v3] .ws-card-bar { display: none; }
[data-v3] body[data-page="card"]:has(#listView:not([hidden])) .ws-card-bar { display: flex; }
[data-v3] body[data-page="card"]:has(.ws-card-bar) .list-head a.card-only { display: none; }
[data-v3]:not(.wq) .ws-bar { --vellum: var(--accent-soft); --rubric: var(--head); --sheet: var(--card); --btn: var(--accent); }
[data-v3]:not(.wq) .ws-go { color: var(--on); background: var(--accent); border: 1px solid var(--accent); text-decoration: none; font-weight: 700; }
[data-v3]:not(.wq) .ws-go:hover { background: var(--accent-2); }
[data-v3] body[data-page="card"]:has(.ws-card-bar) .list-head { top: var(--bar-h); }
[data-v3] .style-grid.mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; font-size: inherit; cursor: default; }
[data-v3] body[data-page="card"]:has(.ws-card-bar) .list-head .logo { display: none; }
@media (max-width: 640px) {
  [data-v3] .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }
  [data-v3] .list-head { padding-block: 12px; gap: 10px; position: static !important; }
  [data-v3] .list-head .row.wrap { gap: 6px; }
}/* شعار «ورّاق» المكتوب في الصفحات التي لا تحمّل wq.css */
[data-v3]:not(.wq) .wq-word { display: inline-block; height: 1.15em; aspect-ratio: 214/164; background: currentColor; -webkit-mask: url(/img/waraq-word.png) center/contain no-repeat; mask: url(/img/waraq-word.png) center/contain no-repeat; }
/* ================= لمسات كل صفحة ================= */
/* الرئيسية: اللوحات بطاقات (والورق يبقى ورقاً حادّ الزوايا) */
[data-v3] .home .fig, [data-v3] .home .stage, [data-v3] .home .kv-wrap, [data-v3] .home .spec-stage ~ .styles { border-radius: var(--r-l); }
[data-v3] .home .door .btn, [data-v3] .home .go .btn { min-width: 12em; }
[data-v3] .home .rail { top: calc(var(--bar-h) + 24px); }
/* الرَّحل: خانة الكتاب والدفتر والرفّ */
[data-v3] .rahlpage .rh-drop { border-radius: 24px; }
[data-v3] .rahlpage .rh-nbnew { border-radius: var(--r-l); }
[data-v3] .rahlpage .rh-cover { border-radius: 6px; }
[data-v3] .rahlpage .rh-del { border-radius: 50%; }
[data-v3] .rahlpage .rh-dlg { border-radius: var(--r-l); }
/* على الجوال: العنوان، ثم خانة الكتاب أولاً، ثم الشرح */
@media (max-width: 860px) {
  [data-v3] .rahlpage .rh-hero { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 22px; }
  [data-v3] .rahlpage .rh-text { display: contents; }
  [data-v3] .rahlpage .rh-text h1 { order: 0; }
  [data-v3] .rahlpage .rh-drop { order: 1; padding-block: 18px 22px; }
  [data-v3] .rahlpage .rh-lead { order: 2; }
  [data-v3] .rahlpage .rh-nbnew { order: 3; max-width: none; }
  [data-v3] .rahlpage .rh-feats { order: 4; }
  [data-v3] .rahlpage .rh-art { width: min(240px, 70%); }
}
/* التنزيل: بطاقتا النسختين */
[data-v3] .dlpage .dl-card { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
[data-v3] .dlpage .dl-notes { border-radius: var(--r-s); }
[data-v3] .dlpage .dl-meta span { border-radius: 999px; }
/* الهوية: صفحة الشعار نفسها تبقى بزواياها الحادّة كما هي (هي شرح الهوية) */
@media print { [data-v3] .ws-bar { display: none !important; } }