/* base.css sets html,body{min-height:100vh}. With html{zoom:1.15} that 100vh
   renders ~115vh physically → phantom scroll on every page. Let content drive
   document height; the fixed body background still covers the viewport. */
html,body{min-height:0}

/* ── TOP BAR ─────────────────────────────────── */
.top-bar{
  position:fixed;top:0;left:var(--side-w);right:0;
  height:calc(var(--top-h) + var(--safe-t));
  background:transparent;
  display:flex;align-items:center;
  padding:var(--safe-t) 0 0;z-index:699;transition:left .24s cubic-bezier(.25,0,.18,1);
  pointer-events:none;
}
.top-sub{
  position:absolute;left:0;right:0;top:calc(var(--safe-t) + 4px);height:auto;min-height:58px;
  display:none;align-items:flex-start;justify-content:center;
  pointer-events:none;
  isolation:isolate;
}
.tasks-sub::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:calc(-1 * (var(--safe-t) + 4px));
  bottom:0;
  z-index:0;
  background:transparent;
  backdrop-filter:blur(16px) saturate(128%);
  -webkit-backdrop-filter:blur(16px) saturate(128%);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.top-bar.tasks-scrolled .tasks-sub::before{
  opacity:1;
}
.tasks-sub .tasks-top-tools{
  position:relative;
  z-index:1;
}
.top-sub .tasks-top-tools,.top-sub .tasks-rail,.top-sub .tasks-rail-chip,.top-sub .tasks-rail-item-more{pointer-events:auto}
#top-bar[data-page=tasks] .top-sub{display:flex}
.top-utils{margin-left:auto;display:flex;align-items:center;gap:3px;padding:0 12px;position:relative;z-index:1;pointer-events:auto}

/* ── PAGES ─────────────────────────────────── */
.page{display:none;margin-left:var(--side-w);padding-top:calc(var(--top-h) + var(--safe-t) + 12px);padding-bottom:80px;transition:margin-left .24s cubic-bezier(.25,0,.18,1)}
#page-tasks{padding-top:calc(var(--top-h) + var(--safe-t) + 24px)}
#page-home,#page-settings,#page-shortcuts{padding-top:20px}
#page-home{padding-bottom:0}
.page.active{display:block;animation:pgIn .2s ease}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}