/* ─────────────────────────────────────────────────────────────
   Kammah Designs — Home Feed Component (شغل النهاردة)
   ───────────────────────────────────────────────────────────
   نمط موحّد لشاشات البيت: بدل «قايمة روابط» → feed بالبنود المحتاجة
   فعلك مرتّبة بالأولوية، لكل بند فعل مباشر. (اتصمّم بمراجع Mobbin:
   Deel "For you today" · ClickUp status · Workable approvals.)

   الاستخدام:
     <link rel="stylesheet" href="components/home-feed.css?v1">
     <div id="kh-feed"></div>
     <script src="components/home-feed.js?v1"></script>
     KammahHome.mount({ el:'#kh-feed', title:'شغل النهاردة', sources:[ ... ] });

   ملف مستقل بالكامل (tokens مغلّفة على .kh-feed) — مايتعارضش مع
   أي :root في الصفحة (بعض الصفحات --ks-* وبعضها tokens.css). القيم
   مطابقة للـ palette الموحّد (cream + gold + ink). فاتح فقط.
   ───────────────────────────────────────────────────────────── */
.kh-feed{
  --hf-surface:#FFFFFF; --hf-surface-2:#FBFAF7;
  --hf-ink:#262220; --hf-ink-2:#6E6862; --hf-ink-3:#A39D95;
  --hf-gold:#B8956A; --hf-gold-deep:#9A7A52; --hf-gold-tint:#F3EADD;
  --hf-line:#EAE6DE; --hf-line-soft:#F1EEE8;
  --hf-green:#2F8C68; --hf-green-tint:#E4F1EA;
  --hf-red:#C7564B; --hf-red-tint:#FBE7E4;
  --hf-amber:#C2883A; --hf-amber-tint:#F8EEDC;
  --hf-blue:#4A6FA5; --hf-blue-tint:#E6ECF4;
  background:var(--hf-surface); border:1px solid var(--hf-line);
  border-radius:20px; padding:8px; box-shadow:0 4px 14px rgba(38,34,30,.07);
  font-family:'Cairo',sans-serif;
}
.kh-head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px}
.kh-eyebrow{font-size:11px;font-weight:800;color:var(--hf-ink-3);letter-spacing:.14em}
.kh-count{font-size:12px;font-weight:800;color:var(--hf-gold-deep);background:var(--hf-gold-tint);
  border-radius:999px;padding:2px 11px;font-variant-numeric:tabular-nums;min-width:26px;text-align:center}
.kh-count.kh-ok{color:var(--hf-green);background:var(--hf-green-tint)}
.kh-count.kh-loading{color:var(--hf-ink-3);background:var(--hf-line-soft)}

.kh-act{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  padding:14px 13px;border-radius:14px;position:relative;transition:background .14s,transform .1s}
.kh-act+.kh-act{border-top:1px solid var(--hf-line-soft)}
.kh-act:hover{background:var(--hf-surface-2)}
.kh-act:active{transform:scale(.99)}
.kh-act::before{content:"";position:absolute;inset-block:12px;inset-inline-start:0;width:4px;border-radius:4px}
.kh-crit::before{background:var(--hf-red)} .kh-warn::before{background:var(--hf-amber)}
.kh-gold::before{background:var(--hf-gold)} .kh-info::before{background:var(--hf-blue)}
.kh-sara::before{background:var(--hf-green)}

.kh-ico{font-size:20px;flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--hf-surface-2);border:1px solid var(--hf-line-soft)}
.kh-crit .kh-ico{background:var(--hf-red-tint);border-color:transparent}
.kh-warn .kh-ico{background:var(--hf-amber-tint);border-color:transparent}
.kh-gold .kh-ico{background:var(--hf-gold-tint);border-color:transparent}
.kh-info .kh-ico{background:var(--hf-blue-tint);border-color:transparent}
.kh-sara .kh-ico{background:var(--hf-green-tint);border-color:transparent}

.kh-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kh-title{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--hf-ink)}
.kh-sub{font-size:12px;color:var(--hf-ink-2);font-weight:500}
.kh-cta{flex:none;font-size:12.5px;font-weight:800;color:#fff;background:var(--hf-gold);
  border-radius:10px;padding:8px 15px;box-shadow:0 2px 7px rgba(184,149,106,.3);white-space:nowrap}
.kh-crit .kh-cta{background:var(--hf-red);box-shadow:0 2px 7px rgba(199,86,75,.32)}

.kh-empty{padding:16px 14px 20px;text-align:center;color:var(--hf-green);font-size:13px;font-weight:700}
.kh-skel{height:44px;margin:8px 5px;border-radius:12px;
  background:linear-gradient(90deg,var(--hf-line-soft) 25%,#fff 50%,var(--hf-line-soft) 75%);
  background-size:200% 100%;animation:kh-sh 1.2s ease-in-out infinite}
@keyframes kh-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.kh-skel{animation:none}.kh-act{transition:none}}