/* ===== merged calendar+home widget (mobile only) =====
   Collapsed = this week as a 7-day strip. Expanded = full month grid,
   like Samsung Calendar. Drag the handle (or tap it) to switch; picking
   a date in the expanded grid also collapses back to the strip. */
/* Mobile: its own card above .desktop-box now, not merged into the
   same swiper/box — repo owner's request. Card styling (border/radius/
   bg) matches .desktop-box so the two read as siblings, not one
   component split across different looks. */
.home-cal-widget{
  position:relative; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:20px; margin:0 0 14px 0; padding:14px 10px 10px 10px;
}
.home-cal-topbar{ margin-bottom:10px; }
/* The grid owns its vertical drags (expand/collapse, week/month swipe):
   without touch-action:none a downward drag on a phone was taken by the
   browser's own pull-to-refresh/scroll and cancelled the pointer gesture,
   so the 1- and 2-week views could not be opened again by dragging. */
/* Settling after a drag/tap: a soft spring-like ease (fast start, long
   gentle stop) instead of a stiff linear-ish one. */
.home-cal-grid-clip{ overflow:hidden; transition:height .42s cubic-bezier(.22,1,.36,1); touch-action:none; }
#page-home{ overscroll-behavior-y:contain; }
/* Every workspace desktop off (phone): the calendar is the whole page —
   always the full month, cells stretched to fill the screen height. */
.home-cal-full{ margin-bottom:0; padding-bottom:14px; }
.home-cal-full .day-cell{ aspect-ratio:auto; height:max(46px, calc((100dvh - 330px) / 6)); border-radius:14px; }
.home-cal-full .day-cell.today, .home-cal-full .day-cell.selected{ border-radius:14px; }
.home-cal-full .day-cell-num{ font-size:17px; }
#home-cal-grid{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
/* Separate from #home-cal-grid's own translateY (expand/collapse) —
   this wrapper only ever does the horizontal week/month-change slide,
   set/cleared by slideHomeCalDate() rather than a persistent class. */
#home-cal-slide{ transform:translateX(0); opacity:1; }
.home-cal-handle{ display:flex; justify-content:center; padding:8px 0 2px 0; cursor:grab; touch-action:none; }
.home-cal-handle span{ width:36px; height:4px; border-radius:999px; background:var(--border); }
/* calendar */
.cal-topbar{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; padding:6px 0; }
/* Mobile-only: sits just above the bottom bar (FAB/profile/capsule) —
   static markup like the rest of that bar, so it can slide up into
   place with a transition instead of just appearing/disappearing. */
.back-today-btn{
  position:absolute; bottom:84px; left:50%; z-index:49;
  background:var(--bg-soft); border:1px solid var(--border); color:var(--primary);
  font-size:12px; font-weight:700; font-family:inherit; border-radius:999px;
  padding:8px 16px; cursor:pointer; box-shadow:var(--shadow);
  transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.back-today-btn.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.cal-label{ font-size:22px; font-weight:800; cursor:pointer; touch-action:none; user-select:none; padding:4px 6px; border-radius:10px; text-align:center; }
.cal-label:active{ background:var(--bg-soft); }
#cal-month-label, #home-cal-month-label{ min-width:130px; }
#cal-year-label, #home-cal-year-label{ min-width:64px; }
.cal-corner-arrow{ position:absolute; top:2px; width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text); cursor:pointer; transition:color .2s ease; }
.cal-corner-arrow:hover{ color:var(--primary); }
.cal-corner-arrow.left{ left:0; }
.cal-corner-arrow.right{ right:0; }
.cal-corner-arrow svg{width:16px;height:16px;}
.cal-subrow{ text-align:center; font-size:11px; color:var(--text-muted); margin:-6px 0 10px 0; }
/* All 3 calendar systems (big number + the two secondary lines below
   it, plus the month/year subrow above the grid) stay visible in
   every density stage now — compaction only shrinks sizing/spacing,
   it no longer hides date systems. */
.cal-subrow-group{ position:relative; display:inline-block; }
.cal-subrow-item{ cursor:pointer; padding:2px 3px; border-radius:6px; }
.cal-subrow-item:active{ background:var(--bg-soft); }
.cal-subrow-sep{ padding:0 2px; }
.cal-mode-tabs{display:flex; gap:6px; background:var(--bg-soft); padding:4px; border-radius:12px; margin-bottom:16px;}
.cal-mode-tabs button{flex:1; border:none; background:transparent; padding:8px; border-radius:9px; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; font-family:inherit;}
.cal-mode-tabs button.active{background:var(--card); color:var(--primary);}
.cal-dropdown{ position:absolute; top:110%; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); z-index:20; max-height:220px; overflow-y:auto; width:150px; scrollbar-width:none; }
.cal-dropdown::-webkit-scrollbar{ display:none; }
.cal-dropdown-item{ padding:10px 14px; font-size:14px; cursor:pointer; text-align:center; }
.cal-dropdown-item.active{ color:var(--primary); font-weight:700; }
.cal-dropdown-item:active{ background:var(--bg-soft); }
.weekday-header{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px;}
.weekday-header span{font-size:10px; color:var(--text-muted); font-weight:700;}
.month-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.day-cell{ aspect-ratio:1; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); border:1px solid transparent; background:none; padding:0; font-family:inherit; -webkit-tap-highlight-color:transparent; }
.day-cell:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }
.day-cell.other-month{color:var(--text-muted); opacity:0.3;}
/* Selected day and today are drawn on .day-cell-bg — a fixed-size CIRCLE
   centred in the cell — not on the cell itself. Cells are as wide as
   their column, so on wider phones/tablets the old cell-shaped highlight
   became a wide rounded rectangle; the circle stays a circle at any
   width. It grows in with a small spring when a day is picked. */
.day-cell-bg{
  position:absolute; z-index:-1; top:50%; left:50%;
  width:var(--day-circle); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(.55); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.22,1.4,.36,1), opacity .18s ease, box-shadow .25s ease;
}
.day-cell.today .day-cell-bg{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary-soft);
}
.day-cell.today:not(.selected){ color:var(--primary); }
.day-cell.selected{ color:var(--on-primary); }
.day-cell.selected .day-cell-bg{
  opacity:1; transform:translate(-50%,-50%) scale(1);
  background:var(--primary); background-image:var(--gradient-brand, none);
  box-shadow:0 6px 16px -6px var(--primary);
}
.day-cell.selected.today .day-cell-bg{ box-shadow:0 0 0 3px var(--primary-soft), 0 6px 16px -6px var(--primary); }
.day-cell.selected .day-cell-sub{ opacity:.8; }
@media (hover:hover){
  .day-cell:not(.selected):not(.other-month):hover .day-cell-bg{ opacity:1; transform:translate(-50%,-50%) scale(.92); background:var(--primary-soft); }
}
/* Public holidays (Occasions settings): the day number in red. */
.day-cell.holiday:not(.selected) .day-cell-num{ color:var(--holiday, var(--danger)); }
/* Press feedback: only the circle shrinks (the cell stays put, see theme.css). */
.day-cell.press .day-cell-bg{ opacity:1; transform:translate(-50%,-50%) scale(.88); }
.day-cell.press:not(.selected) .day-cell-bg{ background:var(--primary-soft); }
@media (prefers-reduced-motion:reduce){ .day-cell-bg{ transition:none; } }
/* Secondary line: the two non-primary calendar systems (Gregorian/
   Jalali, whichever isn't the big number, plus Hijri), small and muted
   so the primary number stays the visual focus — same idea as the
   calendar09.html reference's triple-date cells. */
.day-cell-num{ line-height:1.1; }
.day-cell-sub{ font-size:8.5px; font-weight:500; line-height:1; opacity:.55; letter-spacing:-0.2px; }
.day-cell.selected .day-cell-sub{ opacity:.85; }
/* Density states driven by attachDensityGesture()'s scroll/touch state
   machine (phone-only), set as data-density on the whole page
   container (#page-calendar / #page-home) so it can also shrink the
   grid's siblings (weekday header, month/year title row) — same idea
   as the reference's "shrink title, hide nav arrows, shrink .occwrap"
   compaction, re-themed to this app's own elements. "full" is the
   default/untouched look above. */
.month-grid{ transition:gap .18s ease; }
[data-density] .cal-topbar, [data-density] .home-cal-topbar{ transition:font-size .18s ease, margin .18s ease, padding .18s ease; }
.density-fade .month-grid, .density-fade .weekday-header{ animation:density-fade .18s ease; }
@keyframes density-fade{ from{ opacity:.4; } to{ opacity:1; } }
[data-density="mid"] .weekday-header{ margin-bottom:3px; }
[data-density="mid"] .weekday-header span{ font-size:9px; }
[data-density="mid"] .cal-topbar, [data-density="mid"] .home-cal-topbar{ font-size:13px; margin-bottom:8px; padding:2px 0; }
[data-density="mid"] .day-cell{ font-size:12px; }
[data-density="compact"] .weekday-header{ margin-bottom:0; }
[data-density="compact"] .weekday-header span{ font-size:0; }
[data-density="compact"] .cal-topbar, [data-density="compact"] .home-cal-topbar{ font-size:11px; margin-bottom:4px; padding:0; }
[data-density="compact"] .cal-corner-arrow{ display:none; }
[data-density="compact"] .month-grid{ gap:2px; }
[data-density="compact"] .day-cell{ font-size:10.5px; border-radius:7px; }
/* On wider phones/tablets a square cell is ~85px tall, so the 1- and 2-
   week strips turned into tall, top-clipped blocks around the selected
   day; the strips keep a fixed, compact cell height instead. */
/* One fixed cell height at EVERY size of the phone widget: the drag
   follows the finger row by row, so rows can't change height when the
   size settles (that was the jump at the end of a resize). */
@media (max-width:959px){
  #page-home .home-cal-widget:not(.home-cal-full) .day-cell{ aspect-ratio:auto; height:46px; border-radius:12px; font-size:13px; }
  #page-home .home-cal-widget:not(.home-cal-full) .month-grid{ gap:4px; }
}
[data-density="compact"] .day-dots{ display:none; }
/* Out of the flow, pinned near the circle's bottom: in the flow it pushed
   the day number above the cell's centre, so numbers didn't sit in the
   middle of the (centred) circle and period/range capsules. */
.day-dots{ position:absolute; left:50%; bottom:calc(50% - var(--day-circle-r) + 3px); transform:translateX(-50%); display:flex; gap:2px; height:4px; pointer-events:none; }
.day-dots span{width:4px; height:4px; border-radius:50%; background:var(--primary);}
.day-cell.selected .day-dots span{background:var(--on-primary);}
.week-list{display:flex; flex-direction:column; gap:8px;}
.week-row{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:10px 12px; border:1px solid var(--border); cursor:pointer;}
.week-row.today{border-color:var(--primary);}
.week-row .wd{width:38px; text-align:center;}
.week-row .wd .num{font-size:16px; font-weight:700; display:block;}
.week-row .wd .name{font-size:10px; color:var(--text-muted);}
.week-row .counts{flex:1; font-size:12px; color:var(--text-muted);}
.mini-cal-weekday{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px; }
.mini-cal-weekday span{ font-size:10px; color:var(--text-muted); font-weight:700; }
.mini-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.mini-cal-cell{ aspect-ratio:1; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--text); cursor:pointer; user-select:none; }
.mini-cal-cell.other-month{ color:var(--text-muted); opacity:.3; }
.mini-cal-cell.in-range{ background:var(--primary-soft); border-radius:0; }
.mini-cal-cell.range-start{ background:var(--primary); color:var(--on-primary); border-radius:10px 0 0 10px; }
.mini-cal-cell.range-end{ background:var(--primary); color:var(--on-primary); border-radius:0 10px 10px 0; }
.mini-cal-cell.range-single{ background:var(--primary); color:var(--on-primary); }
.mini-cal-hint{ text-align:center; font-size:11px; color:var(--text-muted); margin-top:10px; }
@media (min-width: 960px){
/* Desktop shows the full #page-calendar column instead of this
   compact widget inside #page-home. */
.home-cal-widget{ display:none; }
/* Desktop's #page-calendar column is Monthly-only (see render()'s
   guard that forces state.calMode='month' at this width). */
.cal-mode-tabs{ display:none; }
/* Shown below the calendar column instead of above a bottom bar (there
   isn't one on desktop) — position (left/top) is set in updateNav()
   from #page-calendar's measured rect, since the column sits inside a
   centered, max-width-capped grid with no fixed offset to key off in
   CSS alone. */
.back-today-btn{ bottom:auto; }
}

/* ---- task date ranges (see taskRangeMap in calendar.js) ----
   A light capsule behind every day a task/subtask range covers, extended
   over half the grid gap on each side so neighbouring days join up, and
   rounded where the range starts/ends. Start and deadline days get a
   solid orange circle. Logical sides: both grids are dir=rtl in fa. */
/* --day-circle: the size of the today/selected circle (.day-cell-bg).
   Range and period capsules use the same height and end exactly on that
   circle's edge, so a capsule's rounded end and the circle line up. */
.day-cell{ position:relative; isolation:isolate; --day-circle:min(42px, 94%); --day-circle-r:21px; }
.day-cell.rng::before{
  content:''; position:absolute; z-index:-2; top:calc(50% - var(--day-circle-r)); height:42px;
  inset-inline:-2px; background:var(--range-band); /* translucent: pieces meet exactly, no overlap */
}
.day-cell.rng-cap-s::before{ inset-inline-start:calc(50% - var(--day-circle-r)); border-start-start-radius:999px; border-end-start-radius:999px; }
.day-cell.rng-cap-e::before{ inset-inline-end:calc(50% - var(--day-circle-r)); border-start-end-radius:999px; border-end-end-radius:999px; }
.rng-dot{
  position:absolute; z-index:-1; top:50%; left:50%; height:66%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--range-mark); box-shadow:0 4px 12px -4px var(--range-mark);
}
.day-cell.rng-mark:not(.selected){ color:var(--on-range-mark); }

/* ---- period phases (periodPhaseClass in calendar.js) ----
   Same capsule shape as the task ranges, in the cycle ring's phase color
   at low strength. Always in the DOM; visible only while the period desk
   is the active one (#device.period-desk-active), with a fade. */
.day-cell.ph::after{
  /* Opaque tint (mixed into the card color, not into transparent) and a
     slight overlap into the grid gap, so neighbouring days join into one
     seamless capsule instead of showing hairline seams. */
  /* Whole-pixel top (no translate) and a wider overlap: sub-pixel
     positioned pieces left hairline seams between neighbouring days. */
  content:''; position:absolute; z-index:-3; top:calc(50% - var(--day-circle-r)); height:42px; inset-inline:-4px;
  background:color-mix(in srgb, var(--ph-color) var(--phase-capsule-strength), var(--card));
  opacity:0; transition:opacity .35s ease, background-color .22s ease-out, filter .22s ease-out;
}
/* The phase picked on the period ring (focusPhaseOnCalendar): its days
   get a slightly stronger, brighter capsule — a quick, soft change. */
.day-cell.ph.ph-focus::after{
  background-color:color-mix(in srgb, var(--ph-color) var(--phase-focus-strength), var(--card));
  filter:brightness(1.06) saturate(1.2);
}
.day-cell.ph-period{ --ph-color:var(--period-flow); }
.day-cell.ph-pms{ --ph-color:var(--period-pms); }
.day-cell.ph-fertile{ --ph-color:var(--period-fertile); }
.day-cell.ph-cap-s::after{ inset-inline-start:calc(50% - var(--day-circle-r)); border-start-start-radius:999px; border-end-start-radius:999px; }
.day-cell.ph-cap-e::after{ inset-inline-end:calc(50% - var(--day-circle-r)); border-start-end-radius:999px; border-end-end-radius:999px; }
.period-desk-active .day-cell.ph::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .day-cell.ph::after{ transition:none; } }
.day-cell.rng-mark .day-cell-sub{ opacity:.75; }