/* Content calendar — Apple-style interface (see apple-design principles):
   instant press feedback, translucent materials, spring-driven sheet, restrained colour. */
:root{
  color-scheme:light dark;
  --bg:#f2f2f7; --surface:#fff; --ink:#1c1c1e; --muted:#6c6c70; --muted-2:#c7c7cc;
  --fill:rgba(120,120,128,.14); --line:rgba(60,60,67,.14);
  --accent:#b8472a; --accent-ink:#fff; --ok:#248a3d; --warn:#b25e00; --bad:#d70015;
  --material:rgba(249,249,251,.72); --material-thick:rgba(246,246,249,.84);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --bar-h:104px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000; --surface:#1c1c1e; --ink:#f5f5f7; --muted:#98989d; --muted-2:#48484a;
    --fill:rgba(120,120,128,.28); --line:rgba(235,235,245,.14);
    --accent:#ee7b60; --accent-ink:#1a0c07; --ok:#32d74b; --warn:#ffb340; --bad:#ff6961;
    --material:rgba(28,28,30,.7); --material-thick:rgba(32,32,34,.84);
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.modal-open,html.modal-open body{overflow:hidden}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
.muted{color:var(--muted);font-size:.86rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inline{display:inline;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- materials ---------- */
.material{background:var(--material);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .material{background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce){
  .material,.sheet.material{background:var(--surface)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top)}
.bar::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .2s}
.bar.scrolled::after{opacity:1}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:780px;margin:0 auto;padding:12px 16px 4px}
.bar-title h1{font-size:1.65rem;line-height:1.2;font-weight:700}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;
  background:var(--fill);color:var(--ink);text-decoration:none;transition:transform .12s var(--ease),background-color .12s}
.icon-btn:active{transform:scale(.92)}
.icon-btn.accent{background:var(--accent);color:var(--accent-ink)}

/* ---------- segmented control ---------- */
.seg{position:relative;display:flex;background:var(--fill);border-radius:10px;padding:2px;isolation:isolate}
.bar .seg{max-width:748px;margin:6px auto 10px;width:calc(100% - 32px)}
.seg button{flex:1;position:relative;z-index:1;border:0;background:none;padding:6px 8px;border-radius:8px;
  font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}
.seg button[aria-selected="true"],.seg button[aria-checked="true"]{font-weight:700}
.seg-thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:0;width:0;border-radius:8px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){.seg-thumb{background:#636366}}
.seg-sm{margin-bottom:14px}
.seg-sm button{padding:7px 6px;font-size:.86rem}

/* ---------- layout ---------- */
main{max-width:780px;margin:0 auto;padding:12px 16px calc(64px + env(safe-area-inset-bottom))}
.panel{animation:panelIn .24s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lead{color:var(--muted);margin:2px 4px 14px;font-size:.92rem}

/* ---------- buttons ---------- */
.btn{height:40px;padding:0 16px;border-radius:12px;border:0;background:var(--fill);color:var(--ink);font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s var(--ease),filter .12s}
.btn:active{transform:scale(.97);filter:brightness(.95)}
.btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.danger{color:var(--bad);background:var(--surface)}
.btn.block{width:100%;height:48px}
.link{border:0;background:none;color:var(--accent);padding:8px 4px;font-size:1rem;min-width:56px}
.link.strong{font-weight:700;text-align:end}
.link:active{opacity:.5}

/* ---------- hero ---------- */
.hero{background:var(--surface);border-radius:20px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.hero-top{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:88px;height:88px;flex:none}
.ring svg{width:88px;height:88px;transform:rotate(-90deg)}
.ring .track{stroke:var(--fill)}
.ring .prog{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;font-variant-numeric:tabular-nums}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.stat b{display:block;font-size:1.35rem;line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem;color:var(--muted)}
.stat.late b{color:var(--bad)}
.hero-plats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.plat-meter .l{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.bar-track{height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s var(--ease)}

/* ---------- tools ---------- */
.tools{display:grid;gap:10px;margin-bottom:6px}
.search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--fill);color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--ink);font-size:1rem}
.search input::-webkit-search-cancel-button{opacity:.6}
.search:focus-within{outline:2px solid var(--accent)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin-inline:-16px;padding-inline:16px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-size:.9rem;
  box-shadow:var(--shadow);transition:transform .12s var(--ease),background-color .2s,color .2s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--ink);color:var(--bg);font-weight:600}
.tools-row{display:flex;gap:8px;justify-content:space-between}
select{border:0;background:var(--fill);border-radius:12px;height:40px;padding:0 12px;font-size:.95rem;max-width:60%}
.tools-row select{flex:1;min-width:0;max-width:none}

/* ---------- day groups & rows ---------- */
.day{margin-top:6px;scroll-margin-top:var(--bar-h)}
.day-h{position:sticky;top:var(--bar-h);z-index:5;display:flex;align-items:center;gap:8px;margin:0 -16px;padding:8px 20px 6px;
  font-size:.82rem;font-weight:600;color:var(--muted);background:var(--material);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
@media (min-width:781px){.day-h{margin:0;border-radius:10px;padding-inline:10px}}
@media (prefers-reduced-transparency:reduce){.day-h{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
.day-h.today{color:var(--accent)}
.day-h.late{color:var(--bad)}
.group{background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px}
.group-title{font-size:.8rem;font-weight:600;color:var(--muted);margin:18px 6px 6px}
.row{position:relative;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;min-height:60px;cursor:pointer;
  transition:background-color .15s;scroll-margin-top:calc(var(--bar-h) + 40px)}
.row:active{background:var(--fill);transition:none}
.row+.row::before{content:"";position:absolute;top:0;inset-inline-start:58px;inset-inline-end:0;height:1px;background:var(--line)}
.check{flex:none;width:44px;height:44px;margin:-4px;border:0;background:none;display:grid;place-items:center;border-radius:50%}
.check i{width:26px;height:26px;border-radius:50%;border:2px solid var(--muted-2);display:grid;place-items:center;
  transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.check:active i{transform:scale(.86)}
.check svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .28s var(--ease) .04s}
.row.doing .check i{border-color:var(--warn);background:conic-gradient(var(--warn) 0 50%,transparent 0)}
.row.done .check i{background:var(--ok);border-color:var(--ok)}
.row.done .check svg{stroke-dashoffset:0}
.row-main{flex:1;min-width:0}
.row-title{font-weight:600;font-size:.97rem;line-height:1.45;overflow-wrap:anywhere}
.row.done .row-title{color:var(--muted);font-weight:500;text-decoration:line-through;text-decoration-color:var(--muted-2)}
.row-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:.8rem;color:var(--muted);margin-top:1px}
.row-sub .sep{opacity:.5}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:#8e8e93}
.p-دیوار{background:#ff9f0a}.p-باسکول{background:#0a84ff}.p-ترب{background:#30b350}.p-باسلام{background:#ff6b3d}
.p-مدیریت{background:#8e8e93}.p-سایت{background:#bf5af2}.p-آپارات{background:#32ade6}
.row-note{font-size:.78rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pri{font-size:.7rem;font-weight:600;padding:0 7px;border-radius:999px;line-height:1.5;margin-inline-start:2px}
.pri.p2{background:color-mix(in srgb,#0a84ff 16%,transparent);color:#0a64c8}
.pri.p3{background:var(--fill);color:var(--muted)}
@media (prefers-color-scheme:dark){.pri.p2{color:#6cb4ff}}
.tag-doing{flex:none;font-size:.72rem;font-weight:600;color:var(--warn)}
.chev{flex:none;color:var(--muted-2);width:8px;height:14px}
[dir=rtl] .chev{transform:scaleX(-1)}
.empty{text-align:center;padding:48px 16px}
.empty-title{font-weight:600;margin-bottom:4px}

/* ---------- stats ---------- */
.stat-cards{display:grid;gap:12px}
.stat-card{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.stat-card header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600}
.stat-card header .res{margin-inline-start:auto;font-size:.8rem;font-weight:500;color:var(--muted)}
.stat-card header .res b{color:var(--ink);font-variant-numeric:tabular-nums}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.num{display:grid;gap:4px;font-size:.76rem;color:var(--muted);text-align:center}
.num input{width:100%;height:44px;border:0;border-radius:10px;background:var(--fill);text-align:center;font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);-moz-appearance:textfield}
.num input::-webkit-outer-spin-button,.num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.best{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tile{background:var(--surface);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.tile b{display:block;font-size:1.05rem}
.tile span{font-size:.78rem;color:var(--muted)}
.prose li{padding:12px 14px;font-size:.94rem;line-height:1.75}
.prose li+li{box-shadow:inset 0 1px 0 var(--line)}

/* ---------- sheet ---------- */
#scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.42);opacity:0}
.sheet{position:fixed;z-index:50;display:flex;flex-direction:column;overflow:hidden;will-change:transform,opacity;outline:0;
  background:var(--material-thick);-webkit-backdrop-filter:blur(34px) saturate(180%);backdrop-filter:blur(34px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.35)}
@media (prefers-color-scheme:dark){.sheet{border-top-color:rgba(255,255,255,.12)}}
.sheet-drag{touch-action:none;cursor:grab;flex:none}
.grabber{width:38px;height:5px;border-radius:3px;background:var(--muted-2);margin:8px auto 0}
.sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 12px 6px}
.sheet-head h2{font-size:1rem;font-weight:700;text-align:center}
.sheet-head .link:first-child{text-align:start}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:8px 16px calc(20px + env(safe-area-inset-bottom));display:block}
.form{margin-bottom:14px}
.frow{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:48px}
.frow+.frow{box-shadow:inset 0 1px 0 var(--line)}
.frow>span{flex:none;width:76px;color:var(--muted);font-size:.9rem}
.frow input,.frow select,.frow textarea{flex:1;min-width:0;border:0;background:none;padding:12px 0;font-size:1rem;outline:0;height:auto;max-width:none;border-radius:0}
.frow select{padding:10px 0}
#f_time{text-align:right}
.frow.col{flex-direction:column;align-items:stretch;gap:0;padding:10px 14px}
.frow.col>span{width:auto;font-size:.8rem}
.frow.col textarea{resize:none;padding:4px 0;line-height:1.6}
.frow:focus-within{background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media (max-width:760px){
  .sheet{left:0;right:0;bottom:0;max-height:92dvh;border-radius:22px 22px 0 0;box-shadow:0 -12px 48px rgba(0,0,0,.28)}
}
@media (min-width:761px){
  .sheet{top:50%;left:50%;translate:-50% -50%;width:min(560px,92vw);max-height:86vh;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.4)}
  .sheet-drag{cursor:default}
  .grabber{display:none}
  .sheet-head{padding-top:14px}
}

/* ---------- toast ---------- */
#toast{position:fixed;z-index:60;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;max-width:min(92vw,480px);padding:11px 16px;border-radius:16px;font-size:.9rem;
  background:rgba(40,40,43,.9);color:#fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.3);
  transition:opacity .22s var(--ease),transform .3s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast.bad{background:#a3261a}
#toast button{border:0;background:none;color:#ffb8a3;font-weight:700;padding:2px 0;white-space:nowrap}
#toast.bad button{color:#fff}

/* ---------- login ---------- */
.login-body{min-height:100dvh;display:grid;place-items:center;padding:16px;
  background:radial-gradient(60% 45% at 15% 10%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),
             radial-gradient(55% 45% at 90% 95%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--bg)}
.login-card{width:min(380px,100%);padding:30px 24px 24px;border-radius:26px;display:grid;gap:14px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.4)}
@media (prefers-color-scheme:dark){.login-card{border-color:rgba(255,255,255,.08)}}
.login-card h1{font-size:1.6rem;line-height:1.25}
.login-mark{width:56px;height:56px;border-radius:16px;margin:0 auto;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.field input{width:100%;height:50px;border:0;border-radius:14px;background:var(--fill);padding:0 16px;font-size:1rem;text-align:center;outline:0}
.field input:focus{outline:2px solid var(--accent)}
.err{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad);padding:10px 12px;border-radius:12px;font-size:.9rem}

/* ---------- accessibility: motion & contrast ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .panel{animation:none}
  #toast{transform:translate(-50%,0)}
}
@media (prefers-contrast:more){
  :root{--line:rgba(0,0,0,.45);--muted:#3a3a3c;--muted-2:#6c6c70}
  .material{background:var(--surface)}
  .group,.hero,.stat-card,.tile,.chip{outline:1px solid var(--line)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root{--line:rgba(255,255,255,.55);--muted:#d1d1d6;--muted-2:#98989d}}
@media (max-width:420px){
  .hero-stats{grid-template-columns:repeat(3,auto);gap:10px}
  .nums{grid-template-columns:1fr 1fr}
}
@media print{.bar,.tools,#toast,.sheet,#scrim{display:none!important}body{background:#fff}}