.item-card{ background:var(--card); border-radius:16px; padding:14px; margin-bottom:10px; border:1px solid var(--border); display:flex; align-items:center; gap:12px; }
/* Done rows fade their CONTENT, not the card: a translucent card let the
   red swipe-to-delete layer behind it (.swipe-delete-bg) show through,
   so every finished task looked like it was being deleted. */
.item-card.done > *{ opacity:0.5; }
.item-card.task-row{ padding:9px 14px; border-radius:24px; margin-bottom:8px; }
.checkbox{ position:relative; width:22px; height:22px; border-radius:50%; border:2px solid var(--primary); flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s cubic-bezier(.34,1.56,.64,1); }
/* Below WCAG's 24x24 minimum touch target as drawn — grow the tap area
   invisibly instead of the visible circle, to keep the compact look. */
.checkbox::before{ content:''; position:absolute; inset:-5px; }
/* fa: task/habit rows read right-to-left (checkbox at the right). */
.device.lang-fa .item-card{ flex-direction:row-reverse; }
/* Menu of a selected row (right-click or long-press, see
   attachItemSelection): Done / Not done / Edit / Delete. */
.row-context-menu{
  position:fixed; z-index:200; background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:6px; min-width:160px;
  display:flex; flex-direction:column;
}
.row-context-menu button{
  display:flex; align-items:center; gap:10px; border:none; background:none;
  color:var(--text); font-size:13px; font-weight:600; font-family:inherit;
  padding:9px 10px; border-radius:9px; cursor:pointer; text-align:start;
}
.row-context-menu button svg{ width:15px; height:15px; flex:0 0 auto; }
.row-context-menu button:hover{ background:var(--bg-soft); }
.row-context-menu button.danger{ color:var(--danger); }
.checkbox:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.checkbox:active{ transform:scale(0.85); }
.checkbox.checked{background:var(--primary); animation:checkbox-pop .3s cubic-bezier(.34,1.56,.64,1); }
/* Explicitly marked "not done" from the selection menu (see
   applyQuicksetState), distinct from the plain empty/untouched state. */
.checkbox.skipped{background:var(--danger); border-color:var(--danger); animation:checkbox-pop .3s cubic-bezier(.34,1.56,.64,1); }
.checkbox.skipped svg{width:12px; height:12px; fill:#fff;}
@keyframes checkbox-pop{ 0%{ transform:scale(0.7); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.item-card{ transition:transform .15s ease, opacity .3s ease; }
.item-card:active{ transform:scale(0.985); }
.checkbox.checked svg{width:12px; height:12px; fill:#fff;}
.checkbox.square{ border-radius:7px; }
.item-title{ font-size:15px; font-weight:600; margin:0; flex:1; }
.task-row .item-title{ font-size:14px; font-weight:500; }
.item-card.done .item-title{ text-decoration:line-through; color:var(--text-muted); }
.item-card.skipped .item-title{ text-decoration:line-through; color:var(--danger); }
.mini-btn{ width:28px; height:28px; border-radius:9px; border:1px solid var(--border); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); }
.mini-btn svg{width:14px; height:14px;}
.star-btn{ background:none; border:none; cursor:pointer; }
.star-btn svg{ width:20px; height:20px; fill:none; stroke:var(--text-muted); stroke-width:2; }
.star-btn.active svg{ fill:#E0B95C; stroke:#E0B95C; }
.task-title-wrap{ display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.task-title-wrap .item-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.star-mini{ position:relative; background:none; border:none; cursor:pointer; padding:2px; flex:0 0 auto; display:flex; }
.star-mini::before{ content:''; position:absolute; inset:-6px; }
.star-mini svg{ width:16px; height:16px; fill:none; stroke:var(--text-muted); stroke-width:2; }
.star-mini.active svg{ fill:#E0B95C; stroke:#E0B95C; }
/* swipe to delete */
.swipe-wrap{ position:relative; overflow:hidden; border-radius:16px; margin-bottom:8px; touch-action:pan-y; }
.swipe-wrap.task-wrap{ border-radius:24px; margin-bottom:8px; }
.swipe-wrap .item-card{ margin-bottom:0; border-radius:inherit; position:relative; background:var(--card); }
.swipe-delete-bg{ position:absolute; inset:0; background:#D9534F; border-radius:inherit; display:flex; align-items:center; justify-content:center; }
.swipe-delete-bg svg{ width:17px; height:17px; fill:#fff; }
.swipe-delete-bg.swipe-bg-done{ background:#2E7D32; }
/* subtasks: small down-arrow at the bottom-center of a task card that
   has subtasks. Open, the subtasks hang under the card as one connected
   block (not separate cards): tucked under the card's bottom edge,
   inset from both sides, rows divided by hairlines and joined by a
   cascade line on the checkbox side. */
.item-card.task-row.has-subtasks{ padding-bottom:14px; }
.subtask-toggle{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:28px; height:14px; border:none; background:transparent; color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.subtask-toggle svg{ width:14px; height:14px; transition:transform .2s ease; }
.subtask-toggle:hover{ color:var(--primary); }
.subtask-toggle.open svg{ transform:rotate(180deg); }
.swipe-wrap.task-wrap.subs-open{ z-index:1; }
.subtask-children{
  position:relative; margin:-22px 14px 10px; padding:18px 0 4px;
  background:var(--bg-soft); border:1px solid var(--border); border-top:none;
  border-radius:0 0 18px 18px;
  display:flex; flex-direction:column;
}
.subtask-row{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px 14px 8px 34px; cursor:default;
  transition:background-color .15s ease;
}
.device.lang-fa .subtask-row{ flex-direction:row-reverse; padding:8px 34px 8px 14px; }
.subtask-row + .subtask-row{ border-top:1px solid var(--border); }
/* cascade line: a vertical rule down the block plus an elbow into each
   row; the last row gets a rounded L. Physical sides, mirrored for fa
   like the rest of the rows (fa mirrors with row-reverse, not dir=rtl). */
.subtask-row::before{ content:''; position:absolute; left:18px; top:0; bottom:0; border-left:1.5px solid var(--border); }
.subtask-row:not(:last-child)::after{ content:''; position:absolute; left:18px; top:50%; width:10px; border-top:1.5px solid var(--border); }
.subtask-row:last-child::before{ bottom:50%; width:10px; border-bottom:1.5px solid var(--border); border-bottom-left-radius:8px; }
.device.lang-fa .subtask-row::before{ left:auto; right:18px; border-left:none; border-right:1.5px solid var(--border); }
.device.lang-fa .subtask-row:not(:last-child)::after{ left:auto; right:18px; }
.device.lang-fa .subtask-row:last-child::before{ border-bottom-left-radius:0; border-bottom-right-radius:8px; }.subtask-row .checkbox{ width:18px; height:18px; }
.subtask-row .checkbox.checked svg, .subtask-row .checkbox.skipped svg{ width:10px; height:10px; }
.subtask-row .item-title{ font-size:12.5px; font-weight:500; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subtask-row.done .item-title{ text-decoration:line-through; color:var(--text-muted); }
.subtask-row.skipped .item-title{ text-decoration:line-through; color:var(--danger); }
.subtask-row.done .checkbox{ opacity:.6; }
@media (hover:hover){ .subtask-row:hover{ background:var(--primary-soft); } }
.subtask-row:last-child{ border-radius:0 0 17px 17px; }

/* ---- selected row (long-press / right-click) ----
   Lifts out of the page: scales up with a colored glow. Uses the
   standalone `scale` property so it composes with the swipe gesture's
   inline transform instead of fighting it. The swipe wrapper stops
   clipping while selected so the glow can spill outside the card. */
[data-select-type]{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.swipe-wrap.is-selected{ overflow:visible; z-index:6; }
.swipe-wrap.is-selected .swipe-delete-bg{ visibility:hidden; }
.swipe-wrap .item-card.is-selected,
.subtask-children .subtask-row.is-selected{
  scale:1.035; z-index:2;
  box-shadow:0 0 0 2px var(--select-ring), 0 0 26px 2px var(--select-glow), var(--select-lift);
  transition:scale .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.subtask-children .subtask-row.is-selected{ background:var(--card); border-radius:14px; border-top-color:transparent; }
.subtask-children .subtask-row.is-selected + .subtask-row{ border-top-color:transparent; }
@media (prefers-reduced-motion:reduce){
  .swipe-wrap .item-card.is-selected, .subtask-children .subtask-row.is-selected{ scale:1; }
}/* event cards */
.events-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.events-scroll::-webkit-scrollbar{ display:none; }
.event-card{ position:relative; flex:0 0 auto; width:96px; height:116px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:12px 12px 10px 12px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; }
.event-time{ font-size:11px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.event-title{ font-size:12px; font-weight:600; margin:0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.event-del{ position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:7px; background:rgba(0,0,0,0.25); border:none; }
.device.lang-fa .event-del{ right:auto; left:6px; }
.event-del::before{ content:''; position:absolute; inset:-5px; }
.event-del svg{ width:10px; height:10px; }