/* Scene 5 - the calendar: blocks dragged from the backlog onto the week by an animated cursor */
.cal-slot { left: max(33%, calc(var(--gutter) + min(24rem, 32vw) + 24px)); right: 108px; top: 70px; bottom: 22px; z-index: 3; }
.cal-copy { width: min(24rem, 32vw); }
.cal-copy .ticks li { --on: 0; transition: none;
  background: color-mix(in srgb, var(--accent-soft) calc(var(--on) * 100%), color-mix(in srgb, var(--surface) 70%, transparent));
  color: color-mix(in srgb, var(--accent-ink) calc(var(--on) * 100%), var(--ink-muted)); }
.cal-copy .ticks li::before { background: color-mix(in srgb, var(--accent-ink) calc(30% + var(--on) * 70%), var(--ink4)); }

/* ---- inside the window ---- */
.appwin .win-main.cal-main { padding: 18px 18px 16px 4px; }
.cal { position: relative; display: grid; grid-template-columns: 1fr 244px; gap: 14px; height: 100%; }
.cal-left { min-width: 0; display: flex; flex-direction: column; }
.cal-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 44px; }
.cal-month { display: flex; align-items: center; gap: 4px; font-size: 27px; font-weight: 500; font-variation-settings: 'ROND' 100; }
.cal-month .ms { font-size: 24px; color: var(--ink2); }
.cal-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--inset); }
.cal-seg span { display: grid; place-items: center; height: 28px; padding: 0 13px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink2); }
.cal-seg span.on { background: var(--accent); color: var(--on-accent); }

.wk { position: relative; flex: 1; min-height: 0; --gut: 36px; --hr: 44px; }
.wk-days { display: grid; grid-template-columns: var(--gut) repeat(7, 1fr); height: 46px; align-items: end; padding-bottom: 6px; }
.wk-dh { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--ink2); text-transform: uppercase; }
.wk-dh b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; letter-spacing: 0; color: var(--ink); }
.wk-dh.today b { background: var(--accent); color: var(--on-accent); }
.wk-body { position: relative; height: calc(var(--hr) * 11); border-radius: 20px; background: color-mix(in srgb, var(--surface) 62%, transparent); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.wk-hours { position: absolute; left: 0; top: 0; bottom: 0; width: var(--gut); }
.wk-hr { position: absolute; left: 0; width: var(--gut); padding-right: 6px; text-align: right; font-size: 10px; font-weight: 600; color: var(--ink3); font-variant-numeric: tabular-nums; transform: translateY(-6px); }
.wk-cols { position: absolute; left: var(--gut); right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, 1fr);
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hr)); }
.wk-col { border-left: 1px solid var(--line); }
.wk-col.today { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.wk-blocks { position: absolute; left: var(--gut); right: 0; top: 0; bottom: 0; }

.blk {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 4px 4px 9px; overflow: hidden; border-radius: 11px;
  background: color-mix(in srgb, var(--hs) 92%, var(--surface)); color: var(--hi); box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-c) 10%, transparent); will-change: transform, opacity;
}
.blk::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: var(--h); }
.blk-t { font-size: 11.5px; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.blk-m { font-size: 9.5px; font-weight: 600; opacity: 0.8; white-space: nowrap; letter-spacing: -0.1px; font-variant-numeric: tabular-nums; }
.blk.short .blk-t { display: block; white-space: nowrap; text-overflow: ellipsis; }
.blk.tiny .blk-m { display: none; }
.blk.tiny { padding-top: 4px; }
.blk .ms { font-size: 13px; vertical-align: -2px; margin-right: 2px; font-variation-settings: 'FILL' 1; }
.blk.pv { background: color-mix(in srgb, var(--h) 16%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--h) 70%, transparent); border-radius: 11px; }
.blk.pv::before { display: none; }
.blk-h { position: absolute; left: 50%; bottom: 3px; width: 26px; height: 4px; margin-left: -13px; border-radius: 2px; background: var(--h); opacity: 0; }
.tpill { position: absolute; left: 0; top: 0; z-index: 8; height: 22px; padding: 0 9px; border-radius: 11px; display: flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ink); color: var(--surface); opacity: 0; will-change: transform, opacity; }
.ripple { position: absolute; left: 0; top: 0; z-index: 7; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; pointer-events: none; }
.ghost {
  position: absolute; left: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; max-width: 220px; border-radius: 17px; white-space: nowrap;
  background: var(--surface); color: var(--hi); font-size: 12px; font-weight: 700; opacity: 0; will-change: transform, opacity;
  box-shadow: var(--shadow-lift), inset 0 0 0 2px var(--h);
}
.ghost .dot { width: 10px; height: 10px; }
.ghost span:last-child { overflow: hidden; text-overflow: ellipsis; }
.toast { position: absolute; left: 50%; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 8px 0 16px; border-radius: 20px; white-space: nowrap; opacity: 0;
  background: var(--ink); color: var(--surface); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lift); will-change: transform, opacity; }
.toast b { display: grid; place-items: center; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); }

/* ---- the backlog panel (D-129: tinted cards, area bar, grip, pills) ---- */
.bl { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 16px 12px 12px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.bl-h { flex: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; }
.bl-h h3 { font-size: 20px; font-weight: 500; font-variation-settings: 'ROND' 100; }
.bl-cnt { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-h .ms { margin-left: auto; font-size: 20px; color: var(--ink2); }
.bl-tip { flex: none; display: flex; gap: 6px; padding: 4px 4px 8px; font-size: 11px; line-height: 1.3; color: var(--ink2); }
.bl-tip .ms { flex: none; font-size: 15px; color: var(--accent); }
.bl-list { position: relative; flex: 1; min-height: 0; }
.bl-head { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 26px; padding: 0 6px; font-size: 11.5px; font-weight: 700; color: var(--ink2); will-change: transform, opacity; }
.bl-head .n { font-variant-numeric: tabular-nums; }
.bc {
  position: absolute; left: 0; top: 0; width: 100%; height: 62px; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 2px; border-radius: 19px; overflow: hidden; will-change: transform, opacity;
  background: linear-gradient(90deg, color-mix(in srgb, var(--hs) 85%, var(--surface)), var(--surface) 72%); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line);
}
.bc::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--h); }
.bc .grip { flex: none; font-size: 18px; color: var(--ink3); margin-left: 3px; }
.bc-tx { min-width: 0; flex: 1; }
.bc-t { font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-pills { display: flex; gap: 4px; margin-top: 5px; }
.bc .pillx { height: 19px; padding: 0 7px; font-size: 10.5px; }
.bc .pillx .dot { width: 6px; height: 6px; }
.bc .fl { flex: none; font-size: 16px; font-variation-settings: 'FILL' 1; }
.bc .fl.red { color: var(--red); } .bc .fl.amber { color: var(--amber); }
.bc .pl { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink2); }
.bc .pl .ms { font-size: 19px; }
.bc.habit { background: linear-gradient(90deg, color-mix(in srgb, var(--hs) 85%, var(--surface)), var(--surface) 72%); }
.bc.habit .tile { width: 34px; height: 34px; border-radius: 12px; margin-left: 2px; }
.bc.habit .tile .ms { font-size: 20px; }
.quota { display: flex; gap: 4px; margin-top: 6px; }
.quota i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--h); background: transparent; transition: background var(--dur-effects) var(--ease-effects); }
.quota i.d { background: var(--h); }
.bc .bc-in { display: contents; }
.bc.lifted { background: transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--h) 45%, transparent); border-radius: 19px; }
.bc.lifted::before { display: none; }
.bc.lifted > * { opacity: 0; }
.bc.lifted { outline: 2px dashed color-mix(in srgb, var(--h) 55%, transparent); outline-offset: -4px; box-shadow: none; }

/* ---- mobile window: week on top, the backlog as a tray of cards underneath ---- */
.appwin.is-m .win-main.cal-main { padding: 14px 12px 10px; }
.appwin.is-m .cal { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 8px; }
.appwin.is-m .cal-head { height: 38px; }
.appwin.is-m .cal-month { font-size: 23px; }
.appwin.is-m .cal-seg span { height: 24px; padding: 0 9px; font-size: 11px; }
.appwin.is-m .wk { --gut: 26px; --hr: 28px; }
.appwin.is-m .wk-days { height: 40px; }
.appwin.is-m .wk-dh { font-size: 9px; } .appwin.is-m .wk-dh b { width: 21px; height: 21px; font-size: 11.5px; }
.appwin.is-m .wk-body { height: calc(var(--hr) * 10); border-radius: 16px; }
.appwin.is-m .wk-hr { font-size: 8.5px; padding-right: 4px; }
.appwin.is-m .blk { padding: 3px 3px 2px 6px; border-radius: 8px; }
.appwin.is-m .blk-t { font-size: 9px; -webkit-line-clamp: 3; }
.appwin.is-m .blk-m { display: none; }
.appwin.is-m .blk::before { width: 3px; }
.appwin.is-m .bl { padding: 10px 10px 10px; border-radius: 22px; }
.appwin.is-m .bl-h { height: 24px; } .appwin.is-m .bl-h h3 { font-size: 16px; } .appwin.is-m .bl-h .ms, .appwin.is-m .bl-tip, .appwin.is-m .bl-head { display: none; }
.appwin.is-m .bl-list { flex: none; height: 66px; margin-top: 4px; overflow: hidden; }
.appwin.is-m .bc { width: 148px; height: 62px; }
.appwin.is-m .bc .fl, .appwin.is-m .bc .pl { display: none; }
.appwin.is-m .tpill { height: 19px; font-size: 10px; padding: 0 7px; }
.appwin.is-m .toast { bottom: 8px; height: 34px; font-size: 11.5px; }

@media (max-width: 759px) {
  .cal-slot { left: 0; right: 0; top: 176px; bottom: 56px; }
  .cal-copy { width: auto; }
  .cal-copy .lead, .cal-copy .ticks { display: none; }
  .static .cal-copy .lead, .static .cal-copy .ticks { display: block; }
  .static .cal-copy .ticks { display: flex; }
  .static #calendar .stage { min-height: 1180px; }
  .static #calendar .cal-slot { top: 500px; bottom: 24px; }
}