/* نَسَق (NASAQ) — Copyright (c) 2026 Mohammed S. Ellouh. All rights reserved.
   ملكية خاصة: يُمنع النسخ أو التعديل أو إعادة النشر أو التقليد دون إذن كتابي. انظر ملف LICENSE. */
/* نَسَق — المكوّنات المشتركة بين الطوابع (@layer components). كل مكوّن يقرأ متغيرات الطابع.
   عناصر التحكم «الحديثة» تُفعَّل بـ data-field="box" (نَسَق ونَسَق 360) وتقرأ متغيرات الطابع
   (--cta و--btn-shadow و--select-chevron و--head-weight…)، وحلقة المدار (data-orbit) ورسومات التوهج (data-art="glow")، والشعار على قرصه العاجي، و«نبضة»، وإشعار الحقوق. */
/* ---------- الأيقونات (المرحلة 5): Lucide عبر nasaq-icons.js ----------
   في طبقة base عمدًا: مقاس افتراضي تتجاوزه قواعد المكوّنات الخاصة (.tab .ic، .card-head .ic).
   16px داخل النص، و20px في الأزرار والعناوين، والسماكة من الطابع، واللون currentColor. */
@layer base{
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[role=button],[role=tab],[role=radio],[role=checkbox]):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
html{scroll-padding-top:calc(var(--sticky-h,0px) + 16px)}
@media (max-width:999px){ html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))} }
svg.ic{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke,1.75)}
:is(button,.btn,.icon-btn,h1,h2,h3)>svg.ic{width:20px;height:20px;vertical-align:-4px}
:is([dir="rtl"],:dir(rtl)) svg.ic-dir{transform:scaleX(-1)}
}
@layer components{
:root[data-field="box"] :is(h1,h2,h3){font-weight:var(--head-weight,600);letter-spacing:0}
:root[data-field="box"] .sheet{box-shadow:var(--shadow)}
:root[data-field="box"] h1{color:var(--brand)}
:root[data-field="box"] :is(.add input,.add select,.add-details input,.add-details textarea,
  li.details input,li.details textarea,.arc-tools input[type=search],.pull input,.pull select,
  .modal .body input[type=text],.modal .body input[type=url],.braindump,.tl-input,.grat input,.meals input,
  .exp-add input,.exp-add select,.exp-add-details input,.exp-add-details textarea,
  .settings-body input:not(.set-toggle,.set-range),.auth-form input,.mini-add){
  background-color:var(--field-bg); border:1px solid var(--field-line); border-radius:var(--r-lg);
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), box-shadow calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out);
}
:root[data-field="box"] :is(.add input,.add select,.add-details input,.add-details textarea,
  li.details input,li.details textarea,.arc-tools input[type=search],.pull input,.pull select,
  .modal .body input[type=text],.modal .body input[type=url],.braindump,.tl-input,.grat input,.meals input,
  .exp-add input,.exp-add select,.exp-add-details input,.exp-add-details textarea,
  .settings-body input:not(.set-toggle,.set-range),.auth-form input,.mini-add):hover{border-color:var(--field-hover)}
:root[data-field="box"] :is(.add input,.add select,.add-details input,.add-details textarea,
  li.details input,li.details textarea,.arc-tools input[type=search],.pull input,.pull select,
  .modal .body input[type=text],.modal .body input[type=url],.braindump,.tl-input,.grat input,.meals input,
  .exp-add input,.exp-add select,.exp-add-details input,.exp-add-details textarea,
  .settings-body input:not(.set-toggle,.set-range),.auth-form input,.mini-add):focus{
  outline:2px solid transparent; background-color:var(--surface); border-color:var(--focus); box-shadow:0 0 0 3px var(--ring);
}
:root[data-field="box"] :is(input,textarea)::placeholder{color:var(--muted);opacity:.8}
:root[data-field="box"] :is(.add select,.pull select,.exp-add select){
  appearance:none; -webkit-appearance:none; padding-left:var(--sp-6);
  background-image:var(--select-chevron);
  background-repeat:no-repeat; background-position:left 12px center;
}
:root[data-field="box"] .field{
  /* حقل ظاهر وهو فارغ: تعبئة + حدّ بتباين ≥ 3:1 (WCAG 1.4.11) — كان شفافًا حتى المرور */
  border:1px solid var(--field-line); border-radius:var(--r-lg); padding:var(--sp-2) var(--sp-3); background:var(--field-bg);
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), box-shadow calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out);
}
:root[data-field="box"] .field:hover{border-color:var(--field-hover)}
:root[data-field="box"] .field:focus{outline:2px solid transparent;background:var(--surface);border-color:var(--focus);box-shadow:0 0 0 3px var(--ring)}
:root[data-field="box"] :is(.add button,.pull button.go,.tools .primary,.modal .row button.primary,
  .pomo-controls button.go,.exp-add button,.auth-primary,.spotify-signedout button,.spotify-signedin button){
  background:var(--cta); color:var(--on-cta); border:1px solid transparent; border-radius:var(--r-lg);
  font-family:var(--btn-font,inherit); font-weight:600; box-shadow:var(--btn-shadow,var(--elev-1));
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), transform calc(var(--dur-1) * var(--motion-scale,1)) var(--ease-out), box-shadow calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out);
}
:root[data-field="box"] :is(.add button,.pull button.go,.tools .primary,.modal .row button.primary,
  .pomo-controls button.go,.exp-add button,.auth-primary,.spotify-signedout button,.spotify-signedin button):hover{
  background:var(--cta-hover); color:var(--on-cta-hover); box-shadow:var(--btn-shadow-hover,0 4px 12px var(--ring));
}
:root[data-field="box"] :is(.add button,.pull button.go,.tools .primary,.modal .row button.primary,
  .pomo-controls button.go,.exp-add button,.auth-primary):active{transform:scale(.97)}
:root[data-field="box"] :is(.mini-row button,.arc-tools button,.tools button:not(.primary),
  .modal .row button:not(.primary),.pomo-controls button:not(.go),.cal-head button,.energy button,
  .water button,.set-actions button:not(.danger)){
  background:var(--btn-soft); color:var(--ink); border:1px solid transparent; border-radius:var(--r-lg);
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), transform calc(var(--dur-1) * var(--motion-scale,1)) var(--ease-out);
}
:root[data-field="box"] :is(.mini-row button,.arc-tools button,.tools button:not(.primary),
  .modal .row button:not(.primary),.pomo-controls button:not(.go),.cal-head button,.energy button,
  .water button,.set-actions button:not(.danger)):hover{background:var(--btn-soft-hover)}
:root[data-field="box"] .energy button.active{background:var(--focus-bg);border-color:var(--focus);color:var(--focus-ink)}
:root[data-field="box"] :is(#addDetailsBtn,#expAddDetailsBtn){
  background:var(--btn-soft); color:var(--ink-2); border:1px solid transparent; border-radius:var(--r-lg); box-shadow:none;
}
:root[data-field="box"] :is(#addDetailsBtn,#expAddDetailsBtn):hover{background:var(--btn-soft-hover);box-shadow:none}
:root[data-field="box"] :is(#addDetailsBtn,#expAddDetailsBtn)[aria-expanded="true"]{background:var(--focus-bg);color:var(--focus-ink);border-color:var(--focus)}
:root[data-field="box"] .tab.active{background:var(--cta);color:var(--on-cta)}
:root[data-field="box"] .tab:hover:not(.active){background:var(--field-bg)}
:root[data-field="box"] :is(.task-filters button.active,.pswitch button.active){background:var(--cta);border-color:transparent;color:var(--on-cta)}
@media (max-width:999px){
:root[data-field="box"] .tab.active{background:transparent;color:var(--focus)}
}
:root[data-field="box"] .state{border-color:transparent;background:var(--field-bg)}
:root[data-field="box"] .pswitch{background:var(--field-bg);border-color:transparent}
:root[data-field="box"] .check{border-radius:50%;border-color:var(--field-hover);transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out), border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
:root[data-field="box"] .check:hover{border-color:var(--done);background:color-mix(in srgb, var(--done) 10%, var(--surface))}
:root[data-field="box"] .check[aria-checked="true"]::after{inset:3px 5.5px 5px 5.5px}
:root[data-field="box"] .rank{border-radius:50%;width:34px;height:34px;align-self:center;font-size:var(--fs-md);background:var(--cta);color:var(--on-cta)}
:root[data-field="box"] .plan-day{background:var(--cta);color:var(--on-cta)}
:root[data-field="box"] .plan-nav button.primary{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
:root[data-art="glow"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 0 0,transparent 0 56px,var(--pattern) 56px 57px);transform:translateZ(0)}
:root[data-orbit="on"] .orbit{display:inline-grid;place-items:center;position:relative;flex:none;border-radius:50%;width:56px;height:56px}
:root[data-orbit="on"] .orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--orbit);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
:root[data-orbit="on"] .orbit .brand-mark{width:34px;height:34px}
:root[data-orbit="on"] :is(.orbit,.ring-clock){--ow:3.5px}
:root[data-orbit="on"] :is(.orbit,.ring-clock) :is(.o-fill,.o-glint),
:root[data-orbit="on"] .orbit:not(.clock)::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ow)),#000 calc(100% - var(--ow) + .5px)),conic-gradient(from 15deg,#000 var(--p),transparent 0);
  -webkit-mask-composite:source-in;
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--ow)),#000 calc(100% - var(--ow) + .5px)) intersect,conic-gradient(from 15deg,#000 var(--p),transparent 0)}
:root[data-orbit="on"] :is(.orbit,.ring-clock) .o-fill{background:var(--orbit);transition:--p .9s cubic-bezier(.2,.8,.2,1)}
:root[data-orbit="on"] :is(.orbit,.ring-clock) .o-glint,
:root[data-orbit="on"] .orbit:not(.clock)::after{mix-blend-mode:screen;
  background:conic-gradient(from 15deg,transparent calc(var(--g) - 26deg),rgba(255,255,255,.85) var(--g),transparent calc(var(--g) + 4deg));
  animation:orbitGlint 7s cubic-bezier(.45,0,.2,1) infinite}
:root[data-orbit="on"] :is(.orbit.clock,.ring-clock)::before{opacity:.22}
:root[data-orbit="on"] :is(.orbit,.ring-clock) .o-now{position:absolute;inset:0;pointer-events:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
:root[data-orbit="on"] :is(.orbit,.ring-clock) .o-now b{position:absolute;left:50%;top:calc(var(--ow) / 2);width:var(--dz,7px);height:var(--dz,7px);
  transform:translate(-50%,-50%) rotate(45deg);background:var(--orbit-dot);border-radius:var(--r-sm);box-shadow:0 0 0 1.5px var(--dz-ring,var(--board)),0 0 8px var(--orbit-dot-glow)}
:root[data-orbit="on"] :is(.orbit,.ring-clock).quiet .o-now b{background:var(--orbit-quiet);box-shadow:0 0 0 1.5px var(--dz-ring,var(--board))}
:root[data-orbit="on"] .ring-clock .o-tick{position:absolute;inset:0;pointer-events:none}
:root[data-orbit="on"] .ring-clock .o-tick i{position:absolute;left:50%;top:-3px;width:2px;height:calc(var(--ow) + 6px);margin-left:-1px;border-radius:var(--r-sm);background:currentColor;opacity:.5}
@media (prefers-reduced-motion:reduce){
  :root[data-orbit="on"] :is(.orbit,.ring-clock) :is(.o-fill,.o-now){transition:none}
  :root[data-orbit="on"] :is(.orbit,.ring-clock) .o-glint,:root[data-orbit="on"] .orbit:not(.clock)::after{animation:none;display:none}
}
:root[data-orbit="on"] .ring-clock::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--orbit);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ow)),#000 calc(100% - var(--ow) + .5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--ow)),#000 calc(100% - var(--ow) + .5px))}
:root[data-orbit="on"] .greet-card.ring-big #heroRing.rest.prayer-now .o-now b{animation-duration:1.4s}
:root[data-orbit="on"] .greet-card.ring-big #heroRing.rest .o-now b{background:var(--orbit-dot);animation:seedPulse 3.2s ease-in-out infinite}
:root[data-orbit="on"] .ring-clock.caps{--ring-grad:var(--ring-caps)}
:root[data-orbit="on"] .ring-clock.caps::before{background:var(--ring-grad);opacity:.2;
  -webkit-mask:var(--m-track) center/100% 100% no-repeat;mask:var(--m-track) center/100% 100% no-repeat}
:root[data-orbit="on"] .ring-clock.caps .o-fill{background:var(--ring-grad)}
:root[data-orbit="on"] .ring-clock.caps :is(.o-fill,.o-glint){-webkit-mask:var(--m-fill) center/100% 100% no-repeat;-webkit-mask-composite:source-over;
  mask:var(--m-fill) center/100% 100% no-repeat}
:root[data-orbit="on"] .auth-brand .orbit{width:60px;height:60px}
:root[data-orbit="on"] .auth-brand .orbit .brand-mark{width:38px;height:38px}
:root[data-orbit="on"] .close-day .orbit{width:68px;height:68px}
:root[data-orbit="on"] .close-day .close-mark{width:34px;height:38px}
:root[data-orbit="on"] .sidenav .orbit{width:46px;height:46px}
:root[data-orbit="on"] .sidenav .orbit .brand-mark{width:28px;height:28px}
@media (max-width:999px){
  :root[data-orbit="on"] .sidenav .orbit{width:38px;height:38px}
  :root[data-orbit="on"] .sidenav .orbit .brand-mark{width:23px;height:23px}
}
:root[data-art="glow"] .card-art{--vivid:0;display:block;position:relative;height:96px;flex:none;
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--sp-4);border-radius:var(--r-lg);border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;
  border-bottom:1px solid var(--rule);
  filter:grayscale(calc(1 - var(--vivid))) opacity(calc(.55 + var(--vivid) * .45));transition:filter .9s ease}
:root[data-art="glow"] .card-art .ca-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
:root[data-art="glow"] .card-art .ca-svg.is-dark{display:none}
@media (prefers-color-scheme:dark){
  :root[data-art="glow"]:not([data-theme="light"]) .card-art .ca-svg.is-dark{display:block}
  :root[data-art="glow"]:not([data-theme="light"]) .card-art .ca-svg.is-light{display:none}
}
:root[data-art="glow"][data-theme="dark"] .card-art .ca-svg.is-dark{display:block}
:root[data-art="glow"][data-theme="dark"] .card-art .ca-svg.is-light{display:none}
:root[data-art="glow"] .card-art.full{filter:saturate(1.15)}
:root[data-art="glow"] .card-art.full::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--grad-line);box-shadow:0 0 14px 1px var(--art-glow)}
:root[data-art="glow"] .card-art .ob-arc{transition:stroke-dasharray .9s linear}
@media (max-width:999px){
  :root[data-art="glow"] .card-art{height:84px;margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  :root[data-art="glow"] .card-art,:root[data-art="glow"] .card-art .ob-arc{transition:none}
}
@media (max-width:999px){
  :root[data-orbit="on"] .sidenav-brand .orbit{width:42px;height:42px}
  :root[data-orbit="on"] .sidenav-brand .orbit .brand-mark{width:26px;height:26px}
}

:root[data-theme="dark"] .brand-mark,
:root[data-nav="top"] .sidenav:not(.tb-solid) .brand-mark,
.close-day .brand-mark{background:var(--logo-disk);border-radius:50%;padding:12%;box-sizing:border-box}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand-mark{background:var(--logo-disk);border-radius:50%;padding:12%;box-sizing:border-box} }
.nb-ripple{position:fixed;width:0;height:0;pointer-events:none;z-index:400}
.nb-ripple i{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;border:1.5px solid var(--rc,var(--done));opacity:0}
.nasaq-copy{font-size:var(--fs-xs);color:var(--muted);text-align:center;letter-spacing:.2px}
footer.nasaq-copy{padding:var(--sp-4) var(--sp-4) var(--sp-5);opacity:.85}
.set-legal .nasaq-copy{text-align:start;font-weight:600;margin-top:var(--sp-1)}
.auth-copy{margin-top:var(--sp-4);font-size:var(--fs-xs);line-height:1.7;opacity:.8}
:is(.num,.count,.meter,.pomo-time,.fm-time,.sum-item b,.exp-amt,.budget-overall .big,.budget-item .row span,.budget-item .pct,
    .mins,.actual,.ws-count,.notif-badge,#syncTime,.cal-grid,.week-strip,.kpi b,.pulse-kpi b,table td){font-variant-numeric:tabular-nums}
/* ---------- الحقول: سطر كتابة فقط في data-field="underline" (كلاسيكي) — خط سفلي يصير بلون الحبر عند التركيز ---------- */
:root[data-field="underline"] :is(.add input,.add select,.add-details input,.add-details textarea,li.details input,li.details textarea,
  .arc-tools input[type=search],.pull input,.pull select,.modal .body input[type=text],.modal .body input[type=url],.tl-input,.grat input,.meals input,
  .exp-add input,.exp-add select,.exp-add-details input,.exp-add-details textarea,.settings-body input:not(.set-toggle,.set-range),.auth-form input,.mini-add,.field){
  border:0;border-bottom:1px solid var(--border-strong);border-radius:0;background-color:transparent;box-shadow:none;
  transition:border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-std),box-shadow calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-std)}
:root[data-field="underline"] :is(.add input,.add select,.add-details input,.add-details textarea,li.details input,li.details textarea,
  .arc-tools input[type=search],.pull input,.pull select,.modal .body input[type=text],.modal .body input[type=url],.tl-input,.grat input,.meals input,
  .exp-add input,.exp-add select,.exp-add-details input,.exp-add-details textarea,.settings-body input:not(.set-toggle,.set-range),.auth-form input,.mini-add,.field):focus{
  outline:2px solid transparent;border-bottom-color:var(--primary);box-shadow:0 1px 0 var(--primary)}
:root[data-field="underline"] :is(.add input,.pull input,.exp-add input,.tl-input,.field,.mini-add):focus-visible{outline:2px solid transparent}
/* ---------- ختم «أُنجز» على بطاقة الختام (كلاسيكي): يظهر بعد إغلاق اليوم ويبقى حتى نهايته ---------- */
.day-stamp{display:none}
:root[data-art="ink"] .day-stamp:not([hidden]){display:inline-grid;place-items:center;align-self:center;justify-self:center;aspect-ratio:1;min-width:92px;
  padding:var(--sp-2);border:3px double;border-radius:50%;rotate:-8deg;line-height:1.15;text-align:center;font-size:var(--fs-lg);opacity:.9;
  animation:stamp-in calc(280ms * var(--motion-scale,1)) var(--ease-out) both}
:root[data-art="ink"] .day-stamp small{font-size:var(--fs-xs);font-family:var(--font-body)}
@keyframes stamp-in{from{opacity:0;scale:1.3} to{opacity:.9;scale:1}}
@media (prefers-reduced-motion:reduce){ :root[data-art="ink"] .day-stamp{animation:none} }
/* ---------- بطاقات معاينة الطوابع (الإعدادات ← المظهر، و«اختر طابعك») ----------
   كل بطاقة .nq-scope بطابعها ووضعها، فتقرأ متغيراته هو: الخلفية والخط والزوايا والزر. */
.theme-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-3)}
.theme-card{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1);padding:var(--sp-3);text-align:start;cursor:pointer;font:inherit;
  background:var(--bg);color:var(--text-1);border:var(--border-w,1px) solid var(--border);border-radius:var(--r-lg);box-shadow:var(--elev-1);font-family:var(--font-body);
  transition:border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-std),box-shadow calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-std)}
.theme-card:hover{border-color:var(--border-strong)}
.theme-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.theme-card[aria-checked="true"]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary),var(--elev-2)}
.tc-mini{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);min-height:112px}
.tc-title{font-family:var(--font-head);font-size:var(--fs-card-head,var(--fs-md));font-weight:700;color:var(--text-1)}
.tc-task{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--text-2)}
.tc-check{flex:none;width:12px;height:12px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm)}
.theme-card:is([data-palette="nasaq"],[data-palette="nasaq360"]) .tc-check{border-radius:50%}
.tc-btn{align-self:flex-start;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font-size:var(--fs-xs);font-weight:600;font-family:var(--font-head)}
.tc-name{font-family:var(--font-head);font-weight:700;font-size:var(--fs-base);margin-top:var(--sp-1)}
.tc-desc{font-size:var(--fs-xs);color:var(--text-2)}
kbd{font:inherit;font-size:var(--fs-xs);padding:0 var(--sp-1);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-2)}
/* ---------- الأزرار (المرحلة 6): أربعة أنواع بثلاثة مقاسات (32/40/48)، تقرأ متغيرات الطابع ----------
   أسماء صفحة المشاريع القديمة (.cta/.soft/.ghost/.danger/.sm) مرادفات للأسماء الجديدة. زر primary واحد في كل شاشة. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-md);
  border-width:1px;border-style:solid;border-color:transparent;background:var(--btn-soft,var(--surface-2));color:var(--text-1);
  font:inherit;font-family:var(--btn-font,inherit);font-size:var(--fs-sm);font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),border-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),
    color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),transform calc(var(--dur-1) * var(--motion-scale,1)) var(--ease-out)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[aria-busy="true"]{position:relative;color:transparent;pointer-events:none}
.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--spin,var(--text-2));border-inline-end-color:transparent;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{rotate:1turn}}
:is(.btn-sm,.btn.sm){min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.btn-lg{min-height:48px;padding:0 var(--sp-5);font-size:var(--fs-md)}
:is(.btn-primary,.btn.cta){background:var(--cta);color:var(--on-cta);border-color:transparent;box-shadow:var(--btn-shadow,none);--spin:var(--on-cta)}
:is(.btn-primary,.btn.cta):hover:not(:disabled){background:var(--cta-hover);color:var(--on-cta-hover)}
:is(.btn-secondary,.btn.soft){background:var(--btn-soft,var(--surface-2));color:var(--text-1);border-color:transparent}
:is(.btn-secondary,.btn.soft):hover:not(:disabled){background:var(--btn-soft-hover,var(--surface-3))}
:is(.btn-ghost,.btn.ghost){background:transparent;color:var(--text-2);border-color:var(--border)}
:is(.btn-ghost,.btn.ghost):hover:not(:disabled){background:var(--surface-2);color:var(--text-1);border-color:var(--border-strong)}
:is(.btn-danger,.btn.danger){background:var(--danger-bg);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);--spin:var(--danger)}
:is(.btn-danger,.btn.danger):hover:not(:disabled){background:var(--danger);color:var(--surface-1)}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:active:not(:disabled){transform:none} .btn[aria-busy="true"]::after{animation-duration:2s} }
/* ---------- الشارات: 24px، لون وأيقونة معًا (لا حالة باللون وحده) ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);border-radius:var(--r-pill);flex:none;
  font-size:var(--fs-xs);font-weight:600;line-height:1;white-space:nowrap;background:var(--surface-2);color:var(--text-2)}
.badge svg.ic{width:14px;height:14px;vertical-align:0}
.b-danger{background:var(--danger-bg);color:var(--danger)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-warning{background:var(--warning-bg);color:var(--warning)}
.b-success{background:var(--success-bg);color:var(--success)}
/* ---------- رقائق الفلاتر: 32px على الحاسوب و40px على الجوال ---------- */
:is(.chip,.task-filters button){display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;touch-action:manipulation}
@media (max-width:999px){ :is(.chip,.task-filters button){min-height:40px;padding-inline:var(--sp-3)} }
/* ---------- الحقول: 40px، والتسمية فوق الحقل، والخطأ تحته مع الحل ---------- */
:is(.add input,.add select,.add-details input,.pull input,.pull select,.modal .body input[type=text],.modal .body input[type=url],.modal .body input[type=number],
  .settings-body input:is([type=text],[type=url],[type=email],[type=password],[type=number],[type=search],:not([type])),.auth-form input,
  .exp-add input,.exp-add select,.exp-add-details input,.page-tools input,.page-tools select,.arc-tools input[type=search],.mini-add,.pri .field,.closing-qs .field,#pinnedEvent){min-height:40px}
.field-label{display:block;margin:0 0 var(--sp-1);font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.field-error{margin:var(--sp-1) 0 0;font-size:var(--fs-xs);color:var(--danger)}
/* ---------- رأس البطاقة: أيقونة 20px، وعنوان بخط الطابع، وعدد اختياري، وإجراء ghost في الطرف ---------- */
.card-head h2 .ic{width:20px;height:20px}
.card-count{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 var(--sp-2);border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text-2);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600}
.card-count:empty{display:none}
/* ---------- الإشعار المؤقت الموحّد: أسفل المنتصف فوق شريط التبويبات ---------- */
.toast{bottom:calc(18px + env(safe-area-inset-bottom))}
@media (max-width:999px){ .toast{bottom:calc(76px + env(safe-area-inset-bottom))} }
.toast .toast-card{border:0}
/* ---------- الورقة السفلية (الجوال): إجراءات المهمة، والشهر الكامل ---------- */
.bsheet-back{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center;background:var(--overlay);overscroll-behavior:contain}
.bsheet{width:min(560px,100%);max-height:82svh;overflow:auto;overscroll-behavior:contain;background:var(--surface-1);color:var(--text-1);
  border-radius:var(--r-xl);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));box-shadow:var(--elev-3);
  animation:m-rise-in calc(var(--dur-3) * var(--motion-scale,1)) var(--ease-out)}
.bsheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto var(--sp-3);border-radius:var(--r-pill);background:var(--border-strong);opacity:.5}
.bsheet h3{margin:0 0 var(--sp-2);font-family:var(--font-head);font-size:var(--fs-md);font-weight:700;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bsheet-act{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:48px;padding:0 var(--sp-2);border:0;border-radius:var(--r-md);background:none;
  font:inherit;font-size:var(--fs-base);color:inherit;text-align:start;cursor:pointer;touch-action:manipulation}
.bsheet-act:hover,.bsheet-act:focus-visible{background:var(--surface-2)}
.bsheet-act:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.bsheet-act[aria-pressed="true"]{color:var(--primary);font-weight:600}
.bsheet-act.danger{color:var(--danger)}
.bsheet-sep{height:1px;margin:var(--sp-1) 0;background:var(--border)}
@media (prefers-reduced-motion:reduce){ .bsheet{animation:none} }
/* ---------- صف المهمة ----------
   ظاهر دائمًا: دائرة الإنجاز، والعنوان (سطران)، وسطر ثانوي (المشروع والمانح)، وشارة واحدة لأهم حالة.
   الحاسوب: الدبوس والتفاصيل والحالة والحذف تظهر عند المرور أو التركيز. اللمس: «⋯» يفتح ورقة سفلية، والسحب لليسار يُنجز. */
ol.tasks li.task{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--row-h,48px);padding:var(--sp-2) var(--sp-2);position:relative;touch-action:pan-y;
  transition:transform calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
.t-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.t-body .t-text{min-width:0;overflow-wrap:anywhere}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-2);min-width:0;font-size:var(--fs-xs);color:var(--text-3)}
.t-meta:empty{display:none}
.t-meta .proj{font-size:inherit;white-space:normal;min-width:0}
.t-meta .proj:empty::before{content:attr(data-ph);opacity:.75}
.t-meta .imp{width:20px;height:20px;font-size:var(--fs-xs)}
.t-meta .mins{min-width:0;font-size:inherit;text-align:start}
.t-meta .age{font-size:inherit;color:inherit}
.t-meta .actual{min-height:28px}
.t-acts{display:flex;align-items:center;gap:2px;flex:none}
.t-acts :is(.pin,.exp,.kill){width:32px;height:32px;min-width:32px;display:grid;place-items:center;border-radius:var(--r-sm);opacity:1}
.t-acts :is(.pin,.exp,.kill):hover{background:var(--surface-2)}
.t-acts .state{min-height:28px}
.t-more{display:none;flex:none;width:44px;height:44px;place-items:center;border:0;border-radius:var(--r-md);background:none;color:var(--text-2);cursor:pointer;touch-action:manipulation}
.t-more:hover{background:var(--surface-2)}
@media (hover:hover) and (pointer:fine){
  ol.tasks li.task .t-acts{position:absolute;inset-inline-end:var(--sp-2);top:50%;translate:0 -50%;padding:2px;border:1px solid var(--border);border-radius:var(--r-md);
    background:var(--surface-1);box-shadow:var(--elev-2);opacity:0;pointer-events:none;transition:opacity calc(var(--dur-1) * var(--motion-scale,1)) var(--ease-out)}
  ol.tasks li.task:is(:hover,:focus-within) .t-acts{opacity:1;pointer-events:auto}
}
@media not ((hover:hover) and (pointer:fine)){
  ol.tasks li.task .t-acts{display:none}
  ol.tasks li.task .t-more{display:grid}
}
ol.tasks li.task.swipe-ready{background:var(--success-bg)}
@media (prefers-reduced-motion:reduce){ ol.tasks li.task,ol.tasks li.task .t-acts{transition:none} }
/* ---------- مؤشر المزامنة الواحد في الشريط، وتفاصيله عند الضغط ---------- */
button.tabbar-sync{font-family:inherit;cursor:pointer;text-align:start;touch-action:manipulation}
button.tabbar-sync:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sync-pop{position:fixed;z-index:96;width:min(320px,calc(100vw - 24px));padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface-1);color:var(--text-1);box-shadow:var(--elev-3);font-size:var(--fs-sm)}
.sync-pop p{margin:0 0 var(--sp-2);max-width:none}
.sync-pop .sp-state{font-weight:700;font-size:var(--fs-base)}
.sync-pop .sp-dim{color:var(--text-3);font-size:var(--fs-xs)}
.sync-pop .btn{width:100%;margin-top:var(--sp-2)}
/* ---------- حالات كل بطاقة تجلب بيانات: تحميل (هيكل رمادي)، وخطأ مع «أعد المحاولة»، وفراغ برسم وجملة وإجراء ---------- */
.skel{display:grid;gap:var(--sp-2)}
.skel i{display:block;height:14px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:skel 1.4s ease-in-out infinite}
.skel i:nth-child(2){width:80%}.skel i:nth-child(3){width:60%}
@keyframes skel{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){ .skel i{animation:none} }
.cstate{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-2);text-align:center;color:var(--text-2);font-size:var(--fs-sm)}
.cstate p{margin:0}
.cstate-error{color:var(--danger)}
.cstate .empty-ic{width:56px;height:56px;color:var(--text-3)}
/* ---------- صفحة «اليوم» (المرحلة 7) ---------- */
/* طبقة «الآن» */
.c-now{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-6);align-items:center}
.now-kicker{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;color:var(--text-3);letter-spacing:0}
.now-kicker .ic{width:16px;height:16px;color:var(--primary)}
.now-pri{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:var(--head-weight,700);line-height:1.3;color:var(--text-1);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}
.now-set{padding:0;border:0;background:none;font:inherit;color:var(--text-3);cursor:pointer;text-align:start;text-decoration:underline dotted;text-underline-offset:6px}
.now-set:hover{color:var(--text-1)}
.now-next{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.now-lbl{font-size:var(--fs-xs);color:var(--text-3)}
.now-task{padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--text-1);cursor:pointer;text-align:start;min-height:32px}
.now-task:hover{text-decoration:underline}
.now-side{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);min-width:220px}
.now-count{margin:0;text-align:center;font-size:var(--fs-sm);color:var(--text-2)}
.now-over{padding:0 var(--sp-1);border:0;background:none;font:inherit;font-weight:600;color:var(--danger);cursor:pointer;text-decoration:underline;min-height:32px}
@media (max-width:999px){
  .c-now{grid-template-columns:1fr}
  .now-pri{font-size:var(--fs-xl)}
  .now-side{min-width:0}
}
/* الطيّ: زر في العنوان يطوي جسم البطاقة؛ المطويّة تعرض العنوان والعدد فقط */
.fold-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:32px;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:start}
.fold-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)}
.fold-btn .fold-chev{width:16px;height:16px;color:var(--text-3);transition:rotate calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
.fold-btn[aria-expanded="false"] .fold-chev{rotate:90deg}
.card.is-folded .card-head{margin-bottom:0}
.card.is-folded > .card-head > :not(h2){display:none}
.fold-body[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .fold-btn .fold-chev{transition:none} }
/* التقويم: زر الشهر يظهر على الجوال فقط، والشهر يُفتح في ورقة سفلية */
.cal-month-btn{display:none;margin:var(--sp-2) 0 0}
.bsheet .cal-month{display:block}
/* «ابدأ مع نَسَق» المختصر: شريط رفيع بعد خطوتين أو سبعة أيام */
.ob-compact{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.card.onboard.is-compact{padding-block:var(--sp-3)}
.card.onboard.is-compact .ob-bar{margin:var(--sp-2) 0}
@media (max-width:999px){
  /* على الجوال: قائمة عمودية بدل البطاقات المقصوصة */
  .ob-steps{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:0;gap:var(--sp-2)}
  .ob-steps li{flex-direction:row;align-items:stretch}
  .ob-poster{aspect-ratio:auto;min-height:48px;display:flex;align-items:center;background:var(--surface-2);box-shadow:none;border-radius:var(--r-md)}
  .ob-poster::after,.ob-poster .ob-art,.ob-meta,.ob-arrow,.ob-sub{display:none !important}
  .ob-cap{position:static;flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:var(--sp-2) var(--sp-3)}
  .ob-title{font-family:var(--font-body);font-size:var(--fs-base);text-shadow:none;color:var(--text-1)}
  .ob-title em{display:inline;margin-inline-start:.3em}
  .ob-chip{margin:0}
  .ob-poster:hover:not(:disabled),.ob-poster:focus-visible{transform:none}
}
/* ختام اليوم قبل الخامسة مساءً: شريط رفيع */
.closing-strip-note,.closing-open{display:none}
.closing-band.is-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);padding-block:var(--sp-3)}
.closing-band.is-strip :is(.closing-qs,.day-summary,.closing-sub,.close-day,.day-stamp){display:none}
.closing-band.is-strip .closing-intro{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);flex:1}
.closing-band.is-strip .card-head{margin:0}
.closing-band.is-strip :is(.closing-strip-note,.closing-open){display:block}
.closing-band.is-strip .closing-strip-note{margin:0;font-size:var(--fs-xs);color:var(--text-3)}
.closing-band.is-strip .closing-open{display:inline-flex}
/* زر الصورة في الواجهة: أيقونة تظهر عند المرور أو التركيز (وعلى اللمس دائمًا) */
.hero-add-ic{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0}
@media (hover:hover) and (pointer:fine){
  .greet-card .hero-add-ic{opacity:0;transition:opacity calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
  .greet-card:is(:hover,:focus-within) .hero-add-ic{opacity:1}
}
/* بين 1000 و1199px: الطبقة الثانية عمود واحد، والجانبية شبكة */
@media (min-width:1000px) and (max-width:1199px){
  .layer2{grid-template-columns:1fr}
  .l2-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
}
/* الجوال: جدول اليوم بارتفاع ثابت قصير، ونموذج الإضافة سطر واحد (المشروع والأهمية والمدة خلف «⋯»)، والتلميح الطويل مخفي،
   والبطاقات المطويّة أنحف */
@media (max-width:999px){
  .c-sched .tl-wrap{flex:none;height:auto;min-height:0;max-height:220px}
  .add{grid-template-columns:minmax(0,1fr) 56px 44px 44px}
  .add #tText{grid-column:1 / 3;grid-row:1}
  .add #addDetailsBtn{grid-column:3;grid-row:1}
  .add #addBtn{grid-column:4;grid-row:1}
  .add #tProj{grid-column:1;grid-row:2}
  .add #tImp{grid-column:2;grid-row:2}
  .add #tMins{grid-column:3 / 5;grid-row:2}
  .add:has(#addDetailsBtn[aria-expanded="false"]) :is(#tProj,#tImp,#tMins){display:none}
  .c-tasks .hint{display:none}
  .card.is-folded{padding-block:var(--sp-1)}
  .card.is-folded .fold-btn{min-height:40px}
  .archive:not([open]) .arc-actions{display:none}   /* النسخ والطباعة داخل الأرشيف حين يُفتح */
  /* «الآن» أقصر: الزر والعدّاد في صف واحد */
  .now-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
  .now-side .btn-lg{min-height:44px;padding:0 var(--sp-4);font-size:var(--fs-sm)}
  .now-next{margin-top:var(--sp-2)}
  /* رقائق الفلاتر صف واحد يُمرَّر أفقيًا */
  .task-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-1));padding-inline:var(--sp-1)}
  .task-filters::-webkit-scrollbar{display:none}
  .task-filters button{flex:none}
  /* شريط البداية المختصر سطر واحد */
  .card.onboard.is-compact .ob-bar{display:none}
  .card.onboard.is-compact .card-head{margin-bottom:var(--sp-2)}
  .ob-compact > span:first-child{display:none}
  footer.nasaq-copy{padding-block:var(--sp-2) var(--sp-3)}
  .closing-band.is-strip .closing-strip-note{display:none}
}
/* ترتيب صفحة اليوم (الإعدادات) */
.layout-list{list-style:none;margin:var(--sp-2) 0;padding:0;display:grid;gap:var(--sp-1)}
.layout-list li{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:0 var(--sp-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-1)}
.layout-list li.dragging{opacity:.5}
.layout-list li.is-off .ll-name{color:var(--text-3);text-decoration:line-through}
.layout-list .ll-grip{cursor:grab;color:var(--text-3);display:grid;place-items:center;width:24px}
.layout-list .ll-name{flex:1;min-width:0}
.layout-list button{display:grid;place-items:center;min-width:32px;min-height:32px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:var(--text-2);cursor:pointer}
.layout-list button:hover{background:var(--surface-2);color:var(--text-1)}
.layout-list button:disabled{opacity:.35;cursor:default}
.layout-list button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* العناوين لا يغطيها الشريط اللاصق عند القفز إليها */
:root{--sticky-h:0px}
:root[data-nav="top"]{--sticky-h:72px}
@media (max-width:999px){ :root{--sticky-h:64px} }
:is(.card,h2,h3,#tabBoard,#tabTasks,#tabFlow,#tabProjects,#tabExpenses){scroll-margin-top:calc(var(--sticky-h) + 12px)}
/* ---------- التبويبات الأخرى (المرحلة 8) ---------- */
/* الرأس الموحّد بدل الواجهة الكبيرة: الواجهة لصفحة «اليوم» وحدها */
:root[data-tab]:not([data-tab="board"]) #heroBanner{display:none}
/* الرأس الموحّد: عنوان بخط الطابع، ووصف، وإجراء رئيسي واحد، وارتفاع ≤ 120px؛ وفي كلاسيكي فاصل ◆ تحته */
.page-head{position:relative;min-height:0;padding-block:var(--sp-4)}
.page-title{font-size:var(--fs-2xl);font-weight:var(--head-weight,700)}
.page-sub{font-size:var(--fs-sm)}
@media (max-width:999px){ .page-title{font-size:var(--fs-xl)} }
:root[data-art="ink"] .page-head{padding-bottom:calc(var(--sp-4) + 12px)}
:root[data-art="ink"] .page-head::after{content:"";position:absolute;inset-inline:var(--sp-5);bottom:6px;height:9px;pointer-events:none;
  background:var(--paper-diamond) no-repeat 50% 50% / 9px 9px,linear-gradient(var(--art-rule),var(--art-rule)) no-repeat 0 50% / 100% 1px}
/* زر primary واحد في الشاشة: «مهمة جديدة» في الشريط العلوي يغني عن نظيره في رأس تبويب المهام (هنا لا في layouts: .btn يغلبها) */
@media (min-width:1000px){ :root[data-nav="top"] #tpAdd{display:none} }
.tp-chip[aria-pressed="true"]{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.chip{padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);background:transparent;font:inherit;font-size:var(--fs-xs);color:var(--text-2);cursor:pointer}
.chip:hover{border-color:var(--border-strong);color:var(--text-1)}
.chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.chip[aria-checked="true"]{background:var(--info-bg);color:var(--info);border-color:var(--info);font-weight:600}
/* المهام: «نظرة سريعة» و«حسب المشروع» عمود لاصق على الحاسوب، وأفقي قابل للتمرير على الجوال */
@media (max-width:999px){
  .tp-side{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:var(--sp-1);order:-1}
  .tp-side > .card{flex:0 0 min(300px,85%);scroll-snap-align:start}
  .tasks-page .tp-side{position:static}
}
/* العادات: شبكة كثيفة، والطاقة في رأس الصفحة، والأسبوع بنسبة كل يوم وخط أساسي */
#tabFlow .page-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-auto-flow:dense}
.flow-energy{align-items:center;gap:var(--sp-2) var(--sp-3)}
.flow-energy .energy{margin:0}
.energy-lbl{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--text-2)}
.hw-pct{display:block;text-align:center;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.habit-week.mini .hw-pct{display:none}
.hw-bar{position:relative}
.habit-week.has-avg:not(.mini) .hw-bar::after{content:"";position:absolute;inset-inline:-6px;bottom:var(--hw-avg,0%);border-top:1px dashed var(--text-3);pointer-events:none}
/* المصروفات: المبلغ أولًا بخط كبير و₪ ثابت داخله، ثم التصنيفات رقائق، ثم الحساب، ثم «سجّل المصروف» */
.exp-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
  grid-template-areas:"amt amt amt" "cats cats cats" "cat acc acc" "txt txt more" "go go go"}
.exp-amt-wrap{grid-area:amt;position:relative}
.exp-amt-wrap input{width:100%;min-height:52px;font-size:var(--fs-xl);font-weight:600;padding-inline-end:44px}
.exp-cur{position:absolute;inset-inline-end:var(--sp-3);top:50%;translate:0 -50%;font-size:var(--fs-lg);color:var(--text-3);pointer-events:none}
.exp-cats{grid-area:cats;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2)}
.exp-cats[hidden]{display:none}
.exp-add #expCategory{grid-area:cat}
.exp-add #expAccount{grid-area:acc}
.exp-add #expText{grid-area:txt}
.exp-add #expAddDetailsBtn{grid-area:more}
.exp-add #expAddBtn{grid-area:go;width:100%}
.budget-list{max-height:none;overflow:visible}
/* الإعدادات بأسلوب نوشن/Claude: نافذة كبيرة بقائمة جانبية ثابتة (الحساب، والبحث، والأقسام المجمّعة)
   ومحتوى بصفوف «العنوان والوصف | عنصر التحكم»؛ على الجوال ملء الشاشة والأقسام شريط أفقي */
.settings-overlay{overscroll-behavior:contain;align-items:center;padding:var(--sp-4)}
.settings-panel{max-width:1080px;height:min(780px,calc(100dvh - 2 * var(--sp-4)));display:grid;grid-template-columns:260px minmax(0,1fr);overflow:hidden}
.set-side{display:flex;flex-direction:column;gap:var(--sp-2);min-height:0;padding:var(--sp-3) var(--sp-2);border-inline-end:1px solid var(--border);
  background:repeating-radial-gradient(circle at 100% 100%,transparent 0 56px,var(--pattern) 56px 57px),var(--surface-2)}
.set-me{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);min-width:0}
.set-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:var(--fs-sm)}
.set-me-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.set-me-t b{font-size:var(--fs-sm);font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-me-t small{font-size:var(--fs-xs);color:var(--text-3)}
.set-search{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-2);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-1);color:var(--text-3);cursor:text}
.set-search:focus-within{border-color:var(--focus-ring);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus-ring) 30%,transparent)}
.set-search input{flex:1;min-width:0;border:0;background:none;padding:var(--sp-1) 0;margin:0;font:inherit;font-size:var(--fs-sm);color:var(--text-1);outline:0}
.set-nav{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0;overflow-y:auto;padding-bottom:var(--sp-2)}
.set-group-h{padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.set-group-h:first-child{padding-top:var(--sp-1)}
.set-group-sep{height:1px;margin:var(--sp-2) var(--sp-3);background:var(--border)}
.set-nav [role=tab]{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-md);background:none;
  font:inherit;font-size:var(--fs-sm);color:var(--text-2);text-align:start;cursor:pointer}
.set-nav [role=tab]:hover{background:var(--btn-soft-hover);color:var(--text-1)}
.set-nav [role=tab][aria-selected="true"]{background:var(--info-bg);color:var(--info);font-weight:600}
.set-nav [role=tab]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.set-nav [role=tab].set-dim{opacity:.45}
.set-nav [hidden]{display:none}
.set-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.settings-panel .settings-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.settings-panel .settings-head h2{font-size:var(--fs-lg)}
.settings-body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-2) var(--sp-5) var(--sp-5)}
.settings-body > section{padding:0;border-bottom:0}
.settings-body > section.set-off,.settings-body .set-miss{display:none}
.settings-body .set-sub{margin:var(--sp-5) 0 0;padding-bottom:var(--sp-2);border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:600;color:var(--text-1)}
.settings-body > section > :first-child{margin-top:var(--sp-3)}
.settings-body .set-row{flex-wrap:wrap;min-height:52px;padding:var(--sp-2) 0;border-bottom:1px solid var(--border);color:var(--text-1)}
.settings-body .set-row > :first-child{flex:1 1 200px;min-width:0}
/* مفاتيح التشغيل في الإعدادات: مفتاح منزلق بدل مربع الاختيار (المنطق كما هو: checkbox) */
.settings-body input.set-toggle{appearance:none;position:relative;width:36px;height:20px;margin:0;padding:0;border:0;border-radius:var(--r-pill);background:var(--border-strong);
  transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
.settings-body input.set-toggle::before{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--surface-1);box-shadow:var(--elev-1);
  transition:translate calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
.settings-body input.set-toggle:checked{background:var(--primary)}
.settings-body input.set-toggle:checked::before{translate:-16px 0}
.set-desc{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:400;color:var(--text-3);line-height:1.5}
.settings-body .set-actions{margin:var(--sp-3) 0}
.settings-body .set-hint{color:var(--text-3)}
.set-pass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;padding:var(--sp-3) 0}
.settings-body .set-pass input{margin:0}
.settings-body.set-searching > section.set-hit::before{content:attr(data-title);display:block;margin-top:var(--sp-4);font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.set-empty{margin:var(--sp-5) 0;text-align:center;color:var(--text-3);font-size:var(--fs-sm)}
/* النوافذ والإشعار فوق لوحة الإعدادات (110) وشاشة الدخول (120): تُفتح منهما نوافذ التأكيد وكلمة السر المؤقتة */
.modal-overlay{z-index:130}
.toast{z-index:140}
/* الحسابات والصلاحيات: قائمة صفوف، وصفحة لكل حساب بشريط حفظ ثابت، وسجل نشاط مجمّع باليوم */
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.acc-count{color:var(--text-3);font-weight:400}
.acc-list{display:flex;flex-direction:column;margin-top:var(--sp-2)}
.acc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:var(--sp-3);min-height:56px;padding:var(--sp-2);
  border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;color:var(--text-1);font:inherit;text-align:start;cursor:pointer}
.acc-row:hover{background:var(--btn-soft-hover)}
.acc-row > .ic{color:var(--text-3)}
.acc-t{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.acc-t b{font-weight:600;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-t small{font-size:var(--fs-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-badges{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.acc-badge{padding:1px var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--info-bg);color:var(--info)}
.acc-badge.off{background:var(--danger-bg);color:var(--danger)}
.acc-badge.tmp{background:var(--warning-bg);color:var(--warning)}
.acc-last{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.acc-back{margin-top:var(--sp-3)}
.acc-hero{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-3) 0 0}
.acc-hero .set-avatar{width:48px;height:48px;font-size:var(--fs-lg)}
.acc-hero b{font-size:var(--fs-lg)}
.settings-body input.acc-in{width:min(320px,100%);margin:0}
.acc-lbl{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.acc-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);padding-bottom:var(--sp-2)}
.acc-chip{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:32px;padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--fs-sm);cursor:pointer}
.acc-chip:has(input:checked){border-color:var(--info);background:var(--info-bg);color:var(--info)}
.settings-body .acc-chip input{width:auto;margin:0;accent-color:var(--primary)}
.acc-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 var(--sp-5)}
.acc-coords[hidden],.set-row[hidden]{display:none}
.acc-savebar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-4) calc(-1 * var(--sp-5)) 0;padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--border);background:var(--surface-1);box-shadow:var(--elev-2)}
.acc-savebar[hidden]{display:none}
.acc-savebar span{flex:1;font-size:var(--fs-sm);color:var(--text-2)}
.settings-body .set-sub.danger{color:var(--danger)}
.acc-form{display:grid;gap:var(--sp-3)}
.acc-form label{display:grid;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:600}
.acc-form label small{font-weight:400;color:var(--text-3)}
.acc-form input,.acc-form select{margin:0}
.acc-check{display:flex!important;align-items:center;gap:var(--sp-2);font-weight:400!important;font-size:var(--fs-sm);cursor:pointer}
.acc-check input{width:auto;margin:0}
.acc-temp{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0;padding:var(--sp-2) var(--sp-3);border:1px dashed var(--border-strong);border-radius:var(--r-md)}
.acc-temp code{flex:1;font-size:var(--fs-lg);font-weight:700;letter-spacing:.06em;user-select:all}
.act-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:var(--sp-3) 0 var(--sp-2)}
.act-filters select{width:auto;min-width:150px;margin:0}
.act-list{display:flex;flex-direction:column}
.act-day{position:sticky;top:0;z-index:1;margin-top:var(--sp-3);padding:var(--sp-1) 0;font-size:var(--fs-xs);font-weight:600;color:var(--text-3);background:var(--surface-1)}
.act-row{display:grid;grid-template-columns:56px 10px minmax(0,1fr);gap:var(--sp-2);align-items:start;padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.act-row time{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:2px}
.act-row i{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--info)}
.act-row.k-auth i{background:var(--success)} .act-row.k-admin i{background:var(--warning)} .act-row.k-file i{background:var(--accent)} .act-row.k-del i{background:var(--danger)}
.act-row.is-denied b{color:var(--danger)}
.act-row b{font-size:var(--fs-sm);font-weight:600}
.act-row small{display:block;font-size:var(--fs-xs);color:var(--text-2);overflow-wrap:anywhere}
@media (max-width:760px){
  .acc-row{grid-template-columns:auto minmax(0,1fr) auto}
  .acc-badges{grid-column:2;grid-row:2}
  .acc-last{display:none}
  .acc-savebar{margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4)}
}
@media (max-width:760px){
  .settings-overlay{padding:0;align-items:stretch}
  .settings-panel{max-width:none;height:100dvh;border-radius:0;border:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .set-side{min-width:0;border-inline-end:0;border-bottom:1px solid var(--border);padding:var(--sp-2)}
  .set-me,.set-group-h,.set-group-sep{display:none}
  /* الأقسام تلتفّ صفوفًا لا شريطًا يُمرَّر أفقيًا: كان يُظهر أربعة أقسام فقط ويخفي البقية بلا دليل */
  .set-nav{flex-direction:row;flex-wrap:wrap;flex:none;gap:var(--sp-1);overflow:visible;padding-bottom:0}
  .set-nav [role=tab]{flex:none;min-height:32px;padding:0 var(--sp-2);gap:var(--sp-1);font-size:var(--fs-xs);border:1px solid var(--border)}
  .settings-panel .settings-head{padding:var(--sp-3) var(--sp-4)}
  .settings-body{padding:var(--sp-1) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom))}
  .set-pass{grid-template-columns:1fr}
}
/* المشاريع: سطر المقارنة المالي وتلميح ⓘ */
.money-line{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-2)}
.money-line bdi{font-weight:700;color:var(--text-1)}
.info-tip{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-3);cursor:help;vertical-align:middle}
.info-tip:hover{color:var(--text-1)}
.info-tip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
/* ---------- الحركة (المرحلة 9) ----------
   ثلاث لحظات مميزة فقط: إنجاز مهمة (حسب الطابع)، وإغلاق اليوم، والانتقال بين التبويبات؛ والباقي 110–180ms.
   transform وopacity فقط، والمدد مضروبة في --motion-scale للطابع. */
.tabpanel.tab-in{animation:tab-in calc(var(--dur-3) * var(--motion-scale,1)) var(--ease-out) both}
@keyframes tab-in{from{opacity:0;translate:0 var(--tab-shift,8px)}}
.closing-band.day-closed{animation:day-close calc(var(--dur-4) * 1.5 * var(--motion-scale,1)) var(--ease-out) both}
@keyframes day-close{0%{opacity:.6;scale:.985}100%{opacity:1;scale:1}}
/* ---------- إمكانية الوصول (المرحلة 10) ---------- */
/* رابط «تخطَّ إلى المحتوى»: مخفي حتى يُركَّز عليه */
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:200;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);
  font-weight:600;text-decoration:none;translate:0 -200%}
.skip-link:focus-visible{translate:0 0;outline:2px solid var(--focus-ring);outline-offset:2px}
#mainContent:focus{outline:2px solid transparent}
#mainContent:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* زر الإنجاز: مساحة ضغط أكبر من الرسم */
.check-hit{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:var(--r-sm);background:none;color:inherit;cursor:pointer;touch-action:manipulation}
.check-hit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.check-hit:hover > .check{border-color:var(--done)}
.check-hit > .check{pointer-events:none}
.mini .check-hit{align-self:flex-start}
/* الاختصارات */
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);margin:0;align-items:center}
.kbd-list dt{text-align:end}
.kbd-list dd{margin:0}
/* الرموز التقنية باتجاه LTR */
:is(code,.pr-code,.code-chip,kbd){direction:ltr;unicode-bidi:isolate}
/* تباين «ابدأ هنا»: خلفية مخففة من لون الخطوة ونص بلون النص الأساسي */
.ob-poster.next .ob-chip{background:var(--surface-1);color:var(--text-1);box-shadow:inset 0 0 0 1.5px var(--ob-hue)}
.add button{min-height:40px}
@media (max-width:999px){ .week-strip{gap:2px} }
.card-link{min-height:24px}
a.card-link{display:inline-flex;align-items:center}
/* ---------- الجودة والأداء (المرحلة 11) ---------- */
:where(button,[role=button],a[href],summary,label,.chip){touch-action:manipulation}
:where(.modal-overlay,.modal .body,.settings-overlay,.settings-body,.bsheet,.palette-overlay,.notif-panel,.np-list,.set-nav){overscroll-behavior:contain}
.tl-wrap{overscroll-behavior:auto}   /* جدول اليوم لا يحبس تمرير الصفحة */
#arcBody > *{content-visibility:auto;contain-intrinsic-size:auto 240px}
html.frame-modal{overflow:hidden}   /* نافذة مفتوحة داخل إطار المشاريع: الصفحة لا تتحرك من تحتها */
.tabbar{padding-bottom:max(var(--sp-1),env(safe-area-inset-bottom))}
@media print{
  :is(.c-now,.skip-link,.sync-pop,.bsheet-back,.t-acts,.t-more,.fold-chev,.closing-open,.closing-strip-note,.cal-month-btn,.card-count,.tp-chip,.exp-cats,.set-nav){display:none !important}
  .fold-body[hidden]{display:none}
}
/* ---------- شخصية الطابع عبر المتغيرات (المرحلة 6) ----------
   لاحقة العلامة («360») ووزن الشعار الفرعي والأرقام من متغيرات الطابع؛ غيابها = لا شيء أو القيمة الأساسية. */
:is(.brand-name,.auth-brand h2)::after{content:var(--brand-suffix,none);font-family:var(--font-display);font-weight:700;font-size:.5em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;direction:ltr;margin-inline-start:.3em;vertical-align:.8em}
.brand-latin::after{content:var(--brand-latin-suffix,none)}
.greet-tagline{font-weight:var(--tagline-weight,600)}
:is(.pomo-time,.count,.budget-overall .big){font-weight:var(--num-weight,400)}
/* هالة الواجهة في رسومات التوهج */
:root[data-art="glow"] .greet-card::before{opacity:1;background:
    radial-gradient(ellipse 36% 95% at 7% 25%,var(--aura-1),transparent 70%),
    radial-gradient(ellipse 30% 80% at 24% 115%,var(--aura-2),transparent 70%),
    repeating-radial-gradient(circle at -60px 50%,transparent 0 26px,var(--orbit-line) 26px 27px);-webkit-mask:linear-gradient(to right,#000,transparent 68%);mask:linear-gradient(to right,#000,transparent 68%)}
/* ---------- الواجهة الغامرة (data-hero="immersive"): ليلية دائمًا بمتغيرات --hero-* من الطابع ---------- */
:root[data-hero="immersive"][data-tab="board"] .ring-clock{border-radius:50%;--dz-ring:var(--hero-night)}
:root[data-hero="immersive"][data-tab="board"] .greet-card.ring-big #heroRing{color:var(--hero-ink)}
:root[data-hero="immersive"][data-tab="board"] .greet-card{border:0;border-radius:0;box-shadow:none;background:var(--hero-night);color:var(--hero-ink)}
:root[data-hero="immersive"][data-tab="board"] .greet-card::before{opacity:1;background:var(--hero-scene)}
:root[data-hero="immersive"][data-tab="board"] .greet-card.has-photo::before{opacity:0}
:root[data-hero="immersive"][data-tab="board"] .greet-card::after{background:
    linear-gradient(to left,color-mix(in srgb,var(--hero-night) 88%,transparent) 0%,color-mix(in srgb,var(--hero-night) 55%,transparent) 34%,color-mix(in srgb,var(--hero-night) 8%,transparent) 64%,transparent 78%),
    linear-gradient(to top,var(--board) 0%,color-mix(in srgb,var(--board) 55%,transparent) 8%,transparent 24%),
    linear-gradient(to bottom,color-mix(in srgb,var(--hero-night) 40%,transparent),transparent 16%)}
:root[data-hero="immersive"][data-tab="board"] .greet-media img{border-radius:0}
:root[data-hero="immersive"][data-tab="board"] :is(.greet-media .hero-empty,.hero-tools){opacity:calc(1 - var(--hp) * 2)}
:root[data-hero="immersive"][data-tab="board"] .greet-media .hero-empty{border:1px solid rgba(255,255,255,.45);border-radius:var(--r-md);background:color-mix(in srgb,var(--hero-night) 35%,transparent);color:var(--hero-white);font-size:var(--fs-sm);backdrop-filter:blur(6px)}
:root[data-hero="immersive"][data-tab="board"] .greet-media .hero-empty:hover{background:var(--hero-white);color:var(--hero-on-white)}
:root[data-hero="immersive"][data-tab="board"] :is(.hero-add,.hero-del){border-radius:var(--r-md);font-size:var(--fs-sm);backdrop-filter:blur(6px)}
:root[data-hero="immersive"][data-tab="board"] .greet-text{opacity:calc(1 - var(--hp) * 1.35)}
:root[data-hero="immersive"][data-tab="board"] .greet-title{color:var(--hero-white);font-size:var(--fs-display);font-weight:700;line-height:1.3;text-wrap:balance;text-shadow:0 4px 30px rgba(0,0,0,.45)}
:root[data-hero="immersive"][data-tab="board"] .greet-tagline{color:var(--hero-sub);font-size:var(--fs-lg);text-shadow:0 2px 14px rgba(0,0,0,.5)}
:root[data-hero="immersive"][data-tab="board"] .greet-date{color:var(--hero-ink-2)}
:root[data-hero="immersive"][data-tab="board"] .plan-day{border-radius:var(--r-md);font-size:var(--fs-md);font-weight:700;background:var(--primary);color:var(--on-primary);transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
:root[data-hero="immersive"][data-tab="board"] .plan-day:hover{background:var(--hero-white);color:var(--hero-on-white)}
:root[data-hero="immersive"][data-tab="board"] .plan-day.done{background:color-mix(in srgb,var(--hero-night) 35%,transparent);color:var(--hero-white);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px)}
:root[data-hero="immersive"][data-tab="board"] .plan-day.done:hover{background:var(--hero-white);color:var(--hero-on-white)}
:root[data-hero="immersive"][data-tab="board"] .plan-day:focus-visible{outline:3px solid var(--hero-focus);outline-offset:3px}
:root[data-hero="immersive"][data-tab="board"] .hero-dots:not(:empty){opacity:calc(1 - var(--hp) * 2)}
:root[data-hero="immersive"][data-tab="board"] .hero-cue{border:0;background:none;color:var(--ink-2);font:inherit;font-size:var(--fs-xs);cursor:pointer;opacity:calc(1 - var(--hp) * 2.5)}
/* ظهور البطاقات عند التمرير — جزء من التجربة الغامرة */
:root[data-hero="immersive"] .rv{opacity:.6;transition:opacity calc(var(--dur-4) * var(--motion-scale,1)) var(--ease-out) var(--rv-d,0ms),translate calc(var(--dur-4) * var(--motion-scale,1)) var(--ease-out) var(--rv-d,0ms);translate:0 12px}   /* يبدأ من .6: لا بطاقة مخفية أبدًا */
:root[data-hero="immersive"] .rv.in{opacity:1;translate:0 0}
@media (max-width:999px){
  :root[data-hero="immersive"][data-tab="board"] .greet-title{font-size:var(--fs-2xl);line-height:1.4}
  :root[data-hero="immersive"][data-tab="board"] .greet-tagline{font-size:var(--fs-base);line-height:1.7}
  :root[data-hero="immersive"][data-tab="board"] .greet-card::after{background:
    linear-gradient(to top,var(--board) 0%,color-mix(in srgb,var(--board) 55%,transparent) 7%,color-mix(in srgb,var(--hero-night) 78%,transparent) 26%,color-mix(in srgb,var(--hero-night) 35%,transparent) 58%,color-mix(in srgb,var(--hero-night) 45%,transparent) 100%)}
}
@media (prefers-reduced-motion:reduce){
  :root[data-hero="immersive"][data-tab="board"] :is(.greet-text,.greet-media img){opacity:1}
  :root[data-hero="immersive"] .rv{opacity:1;transition:none;translate:none}
}
/* ---------- الشريط العلوي (data-nav="top"): شفاف فوق الواجهة الليلية، وزجاجي بعد التمرير (tb-solid) ---------- */
:root[data-nav="top"] .sidenav{background:transparent;border:0;color:var(--hero-white);transition:translate calc(var(--dur-3) * var(--motion-scale,1)) cubic-bezier(.4,0,.2,1)}
:root[data-nav="top"] .sidenav::before{background:linear-gradient(to bottom,color-mix(in srgb,var(--hero-night) 72%,transparent),color-mix(in srgb,var(--hero-night) 25%,transparent) 70%,transparent);transition:background-color calc(var(--dur-3) * var(--motion-scale,1)) var(--ease-out),opacity calc(var(--dur-3) * var(--motion-scale,1)) var(--ease-out)}
:root[data-nav="top"] .sidenav.tb-over::before{background:color-mix(in srgb,var(--hero-night) 55%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
:root[data-nav="top"] .sidenav.tb-solid::before{background:color-mix(in srgb,var(--surface-1) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--border)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root[data-nav="top"] .sidenav.tb-solid::before{background:var(--surface-1)} }
/* الشريط فوق الواجهة الليلية: خلفية داكنة شبه معتمة (الروابط الفاتحة تبقى مقروءة فوق أي جزء من المشهد) */
:root[data-nav="top"] .sidenav:not(.tb-solid){background-color:color-mix(in srgb,var(--hero-night) 62%,transparent)}
:root[data-nav="top"] .sidenav.tb-solid{background-color:color-mix(in srgb,var(--surface-1) 90%,transparent)}
:root[data-nav="top"] .sidenav.tb-hidden{transition-duration:.32s}
:root[data-nav="top"] .sidenav:not(.tb-hidden){transition-duration:.22s;transition-timing-function:cubic-bezier(0,0,.2,1)}
:root[data-nav="top"] .sidenav-brand{border:0}
:root[data-nav="top"] .sidenav .brand-name{color:var(--hero-white);font-size:var(--fs-xl)}
:root[data-nav="top"] .sidenav .tab{border-radius:var(--r-md);background:transparent;color:color-mix(in srgb,var(--hero-white) 86%,transparent);font-size:var(--fs-base);font-weight:600}
:root[data-nav="top"] .sidenav .tab:hover{background:transparent;color:var(--hero-white)}
:root[data-nav="top"] .sidenav .tab.active{background:var(--grad-line) bottom / 100% 2px no-repeat;color:var(--hero-focus);font-weight:600;box-shadow:0 8px 18px -12px color-mix(in srgb,var(--primary) 30%,transparent)}
:root[data-nav="top"] .sidenav .tabbar-sync{border-radius:var(--r-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--hero-sub)}
:root[data-nav="top"] .sidenav .icon-btn{border-radius:var(--r-md);background:transparent;border-color:transparent;color:var(--hero-white)}
:root[data-nav="top"] .sidenav .icon-btn:hover{background:rgba(255,255,255,.12)}
:root[data-nav="top"] .top-add{border:0;border-radius:var(--r-md);background:var(--primary);color:var(--on-primary);font:inherit;font-family:var(--font-head);font-size:var(--fs-base);font-weight:700;cursor:pointer;transition:background-color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out),color calc(var(--dur-2) * var(--motion-scale,1)) var(--ease-out)}
:root[data-nav="top"] .top-add:hover{background:var(--hero-white);color:var(--hero-on-white)}
:root[data-nav="top"] .sidenav :is(.tab,.icon-btn,.top-add):focus-visible{outline:2px solid var(--hero-focus);outline-offset:2px}
:root[data-nav="top"] .sidenav.tb-solid{color:var(--ink)}
:root[data-nav="top"] .sidenav.tb-solid .brand-name{color:var(--ink)}
:root[data-nav="top"] .sidenav.tb-solid .tab{color:var(--ink-2)}
:root[data-nav="top"] .sidenav.tb-solid .tab:hover{color:var(--ink)}
:root[data-nav="top"] .sidenav.tb-solid .tab.active{color:var(--focus)}
:root[data-nav="top"] .sidenav.tb-solid .icon-btn{color:var(--ink)}
:root[data-nav="top"] .sidenav.tb-solid .icon-btn:hover{background:var(--stripe)}
:root[data-nav="top"] .sidenav.tb-solid .tabbar-sync{background:var(--stripe);border-color:var(--rule);color:var(--ink-2)}
@media (max-width:999px){
  :root[data-nav="top"] .sidenav .brand-name{font-size:var(--fs-lg)}
  :root[data-nav="top"] .sidenav .tabbar{background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  :root[data-nav="top"] .sidenav .tab{font-size:var(--fs-xs);color:var(--ink-2)}
  :root[data-nav="top"] .sidenav .tab.active{color:var(--focus);background:var(--grad-line) top / 60% 2px no-repeat}
}
@media (prefers-reduced-motion:reduce){ :root[data-nav="top"] .sidenav{transition:none} }
/* ---------- الطباعة على الشاشة (المرحلة 4) ----------
   العناوين متوازنة الأسطر، والفقرات «جميلة» بلا كلمة يتيمة، وأقصى عرض للفقرة 65 حرفًا؛
   والأسماء الطويلة تُقصّ بعد سطرين بـ«…» والنص الكامل في title. */
:where(h1,h2,h3,.card-head h2,.greet-title,.tc-title){text-wrap:balance}
:where(p,.set-hint,.closing-sub,.waqfa-text){text-wrap:pretty}
:where(p){max-width:65ch}
:is(.t-text,.proj-name,.pp-name,.p-name,.card-title):not(.editing){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
/* تبديل الطابع: تلاشٍ 200ms على لون الخلفية والنص فقط */
@layer utilities{
  @media (pointer:coarse){
    :is(button,[role=button],a[href]:not(.skip-link),summary,select,input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea){min-height:44px}
    :is(.icon-btn,.kill,.exp,.pin,.t-more,.energy button,.water button,.mini-row button,.cal-head button,.hero-add,.hero-del,.info-tip,.check-hit,.ob-arrow,.sub-badge,#calPrev,#calNext){min-width:44px}
    .check-hit{height:44px}
    :is(.sidenav-brand,.card-link,.now-set,.now-task,.now-over,.linklike){display:inline-flex;align-items:center}
  }
  .card.is-folded > .card-head > :not(h2){display:none}   /* البطاقة المطويّة: العنوان والعدد فقط */
  @media (pointer:fine){
    :is(.card-link,.linklike,.sub-badge,.now-set,.now-task,.now-over,.chip,.fold-btn,.info-tip,.hero-add,.hero-del,.ob-arrow){min-height:24px}
    :is(.info-tip,.hero-add,.hero-del){min-width:24px}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;
      transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  }
  .theme-switching,.theme-switching *{transition-property:background-color,color !important;transition-duration:200ms !important;transition-timing-function:var(--ease-std) !important}
  @media (prefers-reduced-motion:reduce){ .theme-switching,.theme-switching *{transition:none !important} }
}