/* نَسَق (NASAQ) — Copyright (c) 2026 Mohammed S. Ellouh. All rights reserved.
   ملكية خاصة: يُمنع النسخ أو التعديل أو إعادة النشر أو التقليد دون إذن كتابي. انظر ملف LICENSE. */
/* واجهة «غامرة» لصفحة اليوم — تُفعَّل بـ data-hero="immersive". بنية فقط: الألوان من ملف الطابع. */
@layer layouts{
:root[data-hero="immersive"][data-tab="board"] .hero-glance{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-3);flex-wrap:wrap}
:root[data-hero="immersive"][data-tab="board"] .hero-glance .hero-meta{margin-top:0;flex:1;min-width:220px}
:root[data-hero="immersive"][data-tab="board"] .ring-clock{display:block;position:relative;flex:none;width:118px;height:118px;--ow:6px;--dz:11px}
:root[data-hero="immersive"][data-tab="board"] .greet-card.ring-big #heroRing{position:absolute;left:50%;top:34%;z-index:2;width:min(40vh,360px);height:min(40vh,360px);transform:translate(-50%,-50%);--ow:5px;--dz:13px}
:root[data-hero="immersive"][data-tab="board"] .content{padding-top:0}
:root[data-hero="immersive"][data-tab="board"] .greet-card{--hp:0;/* تقدّم التمرير عبر الواجهة (0..1) — يضبطه الـJS */
  /* بعرض الصفحة كاملًا: يتجاوز حدّ 1560px العام للمحتوى (.content > *) وحشوة الجانبين */
  min-height:320px;max-width:none;margin:0 calc(-1 * var(--sp-5)) var(--gap);/* النص في مجرى الصفحة (لا تموضع مطلق): إن طال عن الشاشة كبرت الواجهة ولم يُقصّ */
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:var(--sp-8) clamp(24px,6vw,96px) clamp(130px,20vh,210px);overflow:hidden;isolation:isolate}
:root[data-hero="immersive"][data-tab="board"] .greet-card::before{z-index:0;-webkit-mask:none;mask:none}
:root[data-hero="immersive"][data-tab="board"] .greet-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
:root[data-hero="immersive"][data-tab="board"] .greet-media{position:absolute;inset:0;width:auto;max-width:none;height:auto;padding:0;z-index:auto;display:block}
:root[data-hero="immersive"][data-tab="board"] .greet-media img{z-index:0;object-position:32% 28%;translate:0 calc(var(--hp) * 70px);animation:hero-kenburns 22s ease-out both}
:root[data-hero="immersive"][data-tab="board"] :is(.greet-media .hero-empty,.hero-tools){position:absolute;top:auto;bottom:clamp(96px,14vh,140px);inset-inline-end:clamp(20px,4.5vw,64px);inset-inline-start:auto;z-index:4}
:root[data-hero="immersive"][data-tab="board"] .greet-media .hero-empty{padding:var(--sp-2) var(--sp-4)}
:root[data-hero="immersive"][data-tab="board"] :is(.hero-add,.hero-del){padding:var(--sp-2) var(--sp-3)}
:root[data-hero="immersive"][data-tab="board"] .greet-text{position:relative;z-index:2;flex:none;width:min(600px,100%);padding:0;gap:var(--sp-2);translate:0 calc(var(--hp) * -46px)}
:root[data-hero="immersive"][data-tab="board"] .greet-title{max-width:16ch;padding-top:.08em}
:root[data-hero="immersive"][data-tab="board"] .greet-date{margin-top:2px}
:root[data-hero="immersive"][data-tab="board"] .hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
:root[data-hero="immersive"][data-tab="board"] .plan-day{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-7);min-width:200px;min-height:52px}
:root[data-hero="immersive"][data-tab="board"] .hero-dots:not(:empty){display:flex;gap:var(--sp-3);position:absolute;z-index:3;bottom:92px;left:50%;translate:-50% 0}
:root[data-hero="immersive"][data-tab="board"] .hero-cue{display:flex;flex-direction:column;align-items:center;gap:2px;position:absolute;z-index:3;bottom:26px;left:50%;translate:-50% 0;padding:var(--sp-1) var(--sp-3)}
:root[data-hero="immersive"][data-tab="board"] .hero-cue svg{animation:hero-cue 2.2s ease-in-out infinite}
:root[data-hero="immersive"][data-tab="board"] .greet-text > *{animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both}
:root[data-hero="immersive"][data-tab="board"] .greet-text > :nth-child(2){animation-delay:.12s}
:root[data-hero="immersive"][data-tab="board"] .greet-text > :nth-child(3){animation-delay:.22s}
:root[data-hero="immersive"][data-tab="board"] .greet-text > :nth-child(4){animation-delay:.32s}
:root[data-hero="immersive"][data-tab="board"] .greet-text > :nth-child(5){animation-delay:.42s}
@media (max-width:999px){
  :root[data-hero="immersive"][data-tab="board"] .greet-card{margin:0 calc(-1 * var(--sp-3)) var(--sp-3);min-height:320px;padding:var(--sp-8) var(--sp-4) var(--sp-8)}
  :root[data-hero="immersive"][data-tab="board"] .greet-card.has-photo{flex-direction:column}
  :root[data-hero="immersive"][data-tab="board"] .greet-card.has-photo .greet-media{height:auto}
  :root[data-hero="immersive"][data-tab="board"] .greet-text{width:100%;gap:var(--sp-2)}
  :root[data-hero="immersive"][data-tab="board"] .greet-title{max-width:14ch}
  :root[data-hero="immersive"][data-tab="board"] .plan-day{width:100%}
  :root[data-hero="immersive"][data-tab="board"] .hero-cue{bottom:90px}
  :root[data-hero="immersive"][data-tab="board"] .greet-media img{object-position:50% 22%}
  :root[data-hero="immersive"][data-tab="board"] :is(.greet-media .hero-empty,.hero-tools){top:calc(var(--tb-h) + 12px);bottom:auto;inset-inline-end:14px}
  :root[data-hero="immersive"][data-tab="board"] .hero-dots:not(:empty){bottom:128px}
}
@media (prefers-reduced-motion:reduce){
  :root[data-hero="immersive"][data-tab="board"] :is(.greet-media img,.greet-text > *,.hero-cue svg){animation:none}
  :root[data-hero="immersive"][data-tab="board"] :is(.greet-text,.greet-media img){translate:none}
}
:root[data-hero="immersive"][data-tab="board"] .greet-card{padding-top:calc(var(--tb-h) + var(--sp-7))}
@media (max-width:999px){
  :root[data-hero="immersive"][data-tab="board"] .content{padding-top:0}
  :root[data-hero="immersive"][data-tab="board"] .greet-card{padding-top:calc(var(--tb-h) + var(--sp-6))}
}
/* أول فتح في اليوم: ملء الشاشة (60svh على الجوال)، ثم 320px بقية اليوم (heroFullInit في اللوح) */
:root[data-hero="immersive"][data-tab="board"] .greet-card.hero-full{min-height:100vh;min-height:100svh}
@media (max-width:999px){ :root[data-hero="immersive"][data-tab="board"] .greet-card.hero-full{min-height:60svh} }
:root[data-hero="immersive"][data-tab="board"] .greet-card:not(.hero-full) .hero-cue{display:none}
/* بعد الانكماش: حشوة أقل حتى يقترب ارتفاعها من 320px (يطول قليلًا إن طال النص) */
:root[data-hero="immersive"][data-tab="board"] .greet-card:not(.hero-full){padding-top:calc(var(--tb-h) + var(--sp-4));padding-bottom:var(--sp-5)}
:root[data-hero="immersive"][data-tab="board"] .greet-card:not(.hero-full) .hero-dots{display:none}
}