/* ============================================================================
   roles.css — كتالوج الأدوار (/roles) وصفحة الدور (/role)   [FDX_FUOP_ROLES_CSS]
   يعتمد توكنات fuop.css ولا يعدّلها. مالك الملف: جلسة «كتالوج الأدوار».
   كل ما هنا خاص بالصفحتين — لا تضع فيه مكوّناً عاماً (مكانه fuop.css).
   ========================================================================= */

/* ═════════════ مشترك بين الصفحتين ═════════════ */
.crumbs-row{padding-block:var(--s5) 0}

/* رأس بتدرّج الهوية — النصّ أبيض عمداً فوق التدرّج (الاستثناء الوحيد للّون الثابت) */
.grad-head{position:relative;overflow:hidden;background:var(--grad);color:#fff;isolation:isolate}
.grad-head::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(80% 70% at 85% 0%,#000,transparent 72%);
          mask-image:radial-gradient(80% 70% at 85% 0%,#000,transparent 72%)}
.grad-head :where(h1,h2,h3,.h1,.h2,.h3){color:#fff}
.grad-head .lead,.grad-head p{color:rgba(255,255,255,.9)}
.grad-head .eyebrow{color:rgba(255,255,255,.82)}
.grad-head .breadcrumb,.grad-head .breadcrumb a{color:rgba(255,255,255,.78)}
.grad-head .breadcrumb a:hover{color:#fff}
.grad-head .breadcrumb .cur{color:#fff}
.grad-head .breadcrumb .sep{color:rgba(255,255,255,.5)}

/* شارة زجاجية فوق التدرّج */
.g-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
  font-size:var(--fs-xs);font-weight:700;backdrop-filter:blur(6px)}
.g-chip .ico{inline-size:15px;block-size:15px}

/* الحالة الفارغة برسم بدل الأيقونة.
   رسوم `empty-*.svg` مرسومة لعرض ~180px، وتحت ذلك تصير لطخة باهتة — فنُلغي
   قفص الأيقونة الصغير (٨٨px بحلقته المنقّطة) ونترك الرسم يأخذ مقاسه الحقيقي. */
/* العرض على الأب صريح لا `auto`: مع `auto` تصير نسبة الابن (100%) دائريةً
   فيحسبها المتصفّح صفراً ويختفي الرسم تماماً. */
.empty.art-lg .art{inline-size:min(180px,100%);block-size:auto;background:none;border-radius:0}
.empty.art-lg .art::after{display:none}
.empty.art-lg .art img{inline-size:100%;block-size:auto}
.empty.art-lg.sm .art{inline-size:min(132px,100%)}
@media (max-width:480px){
  .empty.art-lg .art{inline-size:min(150px,100%)}
  .empty.art-lg.sm .art{inline-size:min(118px,100%)}
}

.sec-title{display:flex;align-items:center;gap:var(--s3);margin-block-end:var(--s4)}
.sec-title .s-ico{inline-size:36px;block-size:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-050);color:var(--brand-ink);flex:none}
.sec-title h2{font-size:var(--fs-xl);font-weight:800;line-height:1.3}
.sec-title .s-sub{font-size:var(--fs-xs);color:var(--ink-3);display:block;font-weight:500}

/* ═════════════ ① كتالوج الأدوار — /roles ═════════════ */
.roles-head{border-block-end:0;padding-block-end:0;margin-block-end:var(--s5);align-items:flex-end}
/* العربية بالشدّة والتنوين تحتاج فراغاً بين السطرين — 1.14 يجعل «فعلاً» تلامس ما فوقها */
.roles-head .h1{font-size:clamp(28px,4.4vw,var(--fs-4xl));line-height:1.28;margin-block:var(--s2) var(--s3)}
.roles-head .lead{max-inline-size:60ch}

/* شريط التصنيفات — يمرَّر أفقياً داخل حاويته وحدها */
.cat-strip-wrap{position:relative;margin-block-start:var(--s5)}
.cat-strip{display:flex;gap:var(--s3);overflow-x:auto;padding-block:var(--s2) var(--s4);
  scrollbar-width:none;scroll-snap-type:x proximity}
.cat-strip::-webkit-scrollbar{display:none}
.cat-tile{flex:0 0 auto;inline-size:150px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;
  padding:var(--s4) var(--s3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease)}
.cat-tile:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));
  box-shadow:var(--sh-2);transform:var(--lift)}
/* رسوم `cat-*.svg` مرسومة لمقاس 120–160px — تحتها تصير لطخة.
   فالإطار هنا 84px والرسم 78px، وهو أصغر ما تبقى فيه الرسوم مقروءة. */
.cat-tile .c-art{inline-size:84px;block-size:84px;border-radius:18px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--ink-2);flex:none;overflow:hidden}
.cat-tile .c-art img{inline-size:78px;block-size:78px;object-fit:contain}
.cat-tile .c-art .ico{inline-size:34px;block-size:34px}
.cat-tile .c-nm{font-size:var(--fs-xs);font-weight:700;color:var(--ink);line-height:1.4}
.cat-tile .c-n{font-size:10px;font-weight:700;color:var(--ink-4)}
.cat-tile[aria-pressed="true"]{border-color:var(--brand);box-shadow:var(--sh-brand)}
.cat-tile[aria-pressed="true"] .c-art{background:var(--brand-050);color:var(--brand-ink)}
.cat-tile[aria-pressed="true"] .c-nm{color:var(--brand-ink)}

/* لوح الترشيح */
.filter-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.filter-row{display:grid;gap:var(--s3);
  grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(140px,1fr))}
.filter-row .field{gap:4px}
.filter-row label{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}
.cap-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cap-field{flex:1 1 320px;min-inline-size:0}
.cap-row .cap-note{min-inline-size:96px}
.cap-note{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.cap-note .n{color:var(--ink);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.filter-hint{font-size:var(--fs-xs);color:var(--ink-4);display:flex;align-items:center;gap:6px}
.filter-hint .ico{inline-size:14px;block-size:14px;flex:none}

.res-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-block:var(--s5) var(--s4)}
.res-n{font-size:var(--fs-sm);color:var(--ink-3);font-weight:600}
.res-n strong{color:var(--ink);font-weight:800}

.roles-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
/* رسالة (فراغ/خطأ) مكان الشبكة: بلا هذا تُحشر في عمود واحد بعرض بطاقة */
.roles-grid.is-msg{display:block}
.roles-grid .role-card{text-decoration:none}
.role-card .r-cat{position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s5);
  font-size:10px;font-weight:700;color:var(--ink-4);z-index:1;max-inline-size:44%;text-align:end;
  line-height:1.3}
.role-card .r-tags{display:flex;flex-wrap:wrap;gap:5px}
.role-card .r-price small{display:inline}
.role-card .r-from{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;
  display:block;margin-block-end:-2px}
.role-card .r-price.none{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3)}

/* ═════════════ ② صفحة الدور — /role ═════════════ */
.role-hero{padding-block:var(--s5) var(--s8)}
.role-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);
  align-items:flex-end;margin-block-start:var(--s5)}
.role-hero .r-art{inline-size:96px;block-size:96px;border-radius:24px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;
  margin-block-end:var(--s4);overflow:hidden}
.role-hero .r-art .ico{inline-size:44px;block-size:44px}
.role-hero .r-art img{inline-size:90px;block-size:90px;object-fit:contain}
.role-hero h1{font-size:clamp(28px,4.6vw,var(--fs-4xl));line-height:1.26;letter-spacing:-.02em}
.role-hero .r-en{font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.66);
  letter-spacing:.04em;margin-block-start:6px;direction:ltr;unicode-bidi:isolate;text-align:start}
.role-hero .r-tag{font-size:var(--fs-lg);color:rgba(255,255,255,.92);line-height:1.75;
  max-inline-size:62ch;margin-block-start:var(--s4)}
.role-hero .r-meta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-block-start:var(--s5)}
.role-hero .r-meta.top{margin-block:0 var(--s3)}
/* هيكل الرأس أثناء التحميل — فوق التدرّج، فالقطع فاتحة شفّافة لا رمادية */
.hero-sk{display:flex;flex-direction:column;gap:var(--s3);margin-block-start:var(--s5);max-inline-size:56ch}
.hero-sk .skeleton{background:rgba(255,255,255,.18)}
.hero-sk .skeleton.big{block-size:38px;inline-size:60%;border-radius:var(--r-sm)}
.hero-price{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-lg);padding:var(--s5);backdrop-filter:blur(8px);min-inline-size:250px}
.hero-price .k{font-size:var(--fs-xs);color:rgba(255,255,255,.78);font-weight:700}
.hero-price .v{font-size:var(--fs-3xl);font-weight:800;line-height:1.15;margin-block:4px;
  font-variant-numeric:tabular-nums}
.hero-price .u{font-size:var(--fs-xs);color:rgba(255,255,255,.78)}
.hero-price .btns{margin-block-start:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap}

.role-body{padding-block:var(--s7) var(--s8)}
.role-main{display:flex;flex-direction:column;gap:var(--s6);min-inline-size:0}
.role-card-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:var(--s6) var(--s5)}

/* المهام اليومية */
.duty-list{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.duty{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);
  background:var(--surface-2);border-radius:var(--r);border:1px solid transparent;
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
.duty .n{inline-size:22px;block-size:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--brand-050);color:var(--brand-ink);font-size:11px;font-weight:800;
  margin-block-start:2px;font-variant-numeric:tabular-nums}

/* المهارات والأدوات */
.kv-block+.kv-block{margin-block-start:var(--s4);padding-block-start:var(--s4);
  border-block-start:1px solid var(--line)}
.kv-block .k{font-size:var(--fs-xs);font-weight:800;color:var(--ink-3);margin-block-end:var(--s2)}

/* المؤشرات */
.kpi-list{display:flex;flex-direction:column;gap:var(--s5)}
.kpi-item{padding-block-end:var(--s5);border-block-end:1px dashed var(--line)}
.kpi-item:last-child{padding-block-end:0;border-block-end:0}
.kpi-item .kpi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-block-start:var(--s2)}
.kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-block-start:var(--s5);padding-block-start:var(--s4);border-block-start:1px solid var(--line)}

/* الأسعار */
.price-note{font-size:var(--fs-xs);color:var(--ink-3);margin-block-start:var(--s4);
  display:flex;align-items:flex-start;gap:6px;line-height:1.7}
.price-note .ico{inline-size:14px;block-size:14px;flex:none;margin-block-start:3px}
.pkg-card .p-lines{display:flex;flex-direction:column;gap:var(--s2);flex:1}
.pkg-card .p-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  font-size:var(--fs-sm);padding-block:var(--s2);border-block-end:1px dashed var(--line)}
.pkg-card .p-line:last-child{border-block-end:0}
.pkg-card .p-line .lb{color:var(--ink-3);font-weight:600}
.pkg-card .p-line .vl{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.pkg-card .p-line .vl small{font-weight:500;color:var(--ink-4);font-size:var(--fs-xs)}

/* المخرجات ومستوى الخدمة */
.out-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* مخرَج الدور جملة كاملة لا سطر مقصوص — نُلغي القصّ الافتراضي لـ.tile .t-t */
.out-grid .t-t.soft{white-space:normal;overflow:visible;line-height:1.6;font-weight:600}
.out-grid .tile{align-items:flex-start}
.sla-note{margin-block-start:var(--s4)}
.q-list{display:flex;flex-direction:column;gap:var(--s2)}
.q-list .tile .t-ico{background:var(--deep-050);color:var(--deep-ink)}
.q-list .q-t{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}

/* المشغّلون */
.ops-3{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.ops-note{font-size:var(--fs-xs);color:var(--ink-4);margin-block-start:var(--s3)}
.login-invite{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;padding:var(--s5);
  background:var(--deep-050);border:1px dashed color-mix(in srgb,var(--deep) 34%,var(--line));
  border-radius:var(--r-lg)}
.login-invite .li-ico{inline-size:44px;block-size:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface);color:var(--deep-ink);flex:none}
.login-invite .li-t{font-weight:800}
.login-invite .li-d{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7;max-inline-size:52ch}
.login-invite .grow{flex:1 1 240px}

/* الخدمات ذات الصلة */
.rel-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.rel-tile{display:flex;flex-direction:column;gap:6px;padding:var(--s4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.rel-tile:hover{border-color:var(--brand);box-shadow:var(--sh-1)}
.rel-tile .rt-n{font-weight:700;line-height:1.4}
.rel-tile .rt-d{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65;flex:1}
.rel-tile .rt-p{font-size:var(--fs-sm);font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--brand-ink);margin-block-start:var(--s2)}

/* عمود جانبي — بطاقة الطلب */
.buy-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.buy-card .bc-h{font-size:var(--fs-xs);font-weight:800;color:var(--ink-3)}
.buy-card .bc-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.buy-card .bc-price .amt{font-size:var(--fs-3xl);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.buy-card .bc-price .cur{font-size:var(--fs-md);font-weight:700;color:var(--ink-2)}
.buy-card .bc-price .per{font-size:var(--fs-sm);color:var(--ink-3)}
.buy-card .bc-price.none .amt{font-size:var(--fs-lg);color:var(--ink-3)}
.buy-card .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.buy-card .ticks li{display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--fs-xs);
  color:var(--ink-2);line-height:1.6}
.buy-card .ticks .ico{inline-size:15px;block-size:15px;color:var(--ok);flex:none;margin-block-start:2px}
.seg-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);margin-block-end:6px;display:block}

/* شريط الشراء اللاصق — الجوال وحده */
.buybar{display:none}
.buybar .total small{white-space:nowrap}
@media (max-width:860px){
  .buybar{display:flex}
  .buybar .spacer{flex:1}
}

/* ═════════════ متجاوب ═════════════ */
@media (max-width:980px){
  .role-hero-grid{grid-template-columns:1fr;align-items:stretch}
  .hero-price{inline-size:100%}
}
@media (max-width:760px){
  .filter-row{grid-template-columns:1fr 1fr}
  .filter-row .field:first-child{grid-column:1 / -1}
  .roles-grid{grid-template-columns:1fr}
  .role-card-sec{padding:var(--s5) var(--s4)}
}
@media (max-width:480px){
  .filter-row{grid-template-columns:1fr}
  .cat-tile{inline-size:124px;padding:var(--s3)}
  .cat-tile .c-art{inline-size:66px;block-size:66px;border-radius:16px}
  .cat-tile .c-art img{inline-size:62px;block-size:62px}
  .role-hero .r-art{inline-size:78px;block-size:78px;border-radius:20px}
  .role-hero .r-art img{inline-size:72px;block-size:72px}
  .role-hero .r-tag{font-size:var(--fs-md)}
  .hero-price .btns .btn{inline-size:100%;justify-content:center}
  .login-invite{flex-direction:column;align-items:flex-start}
}

/* ═════════════ التذييل (نفس هيئة الهبوط) ═════════════ */
.foot{background:var(--surface-2);border-block-start:1px solid var(--line);
  padding-block:var(--s8) var(--s5);margin-block-start:var(--s8)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s6)}
.foot-grid > div{display:flex;flex-direction:column;gap:8px}
.foot-h{font-weight:700;font-size:var(--fs-sm);margin-block-end:4px}
.foot-grid a{color:var(--ink-3);font-size:var(--fs-sm)}
.foot-grid a:hover{color:var(--brand)}
.foot-brand .nm-full{font-size:var(--fs-xl);font-weight:800;color:var(--ink)}
.foot-brand .nm-full em{font-style:normal;color:var(--brand)}
.foot-bar{margin-block-start:var(--s6);padding-block-start:var(--s4);
  border-block-start:1px solid var(--line);display:flex;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap}
.foot-bar a{color:var(--ink-3)}
@media (max-width:1040px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot-grid{grid-template-columns:1fr}}

/* ═════════════ الوضع الداكن — ما يحتاج ضبطاً فوق التوكنات ═════════════ */
:root[data-theme="dark"] .cat-tile[aria-pressed="true"],
:root[data-theme="dark"] .buy-card{box-shadow:var(--sh-2)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cat-tile[aria-pressed="true"],
  :root:not([data-theme="light"]) .buy-card{box-shadow:var(--sh-2)}
}